saleor-dashboard/src/storybook/__snapshots__/Stories.test.ts.snap

// 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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;width:768px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="AddressEdit-root-id"
      >
        <div>
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
              data-shrink="true"
            >
              First Name
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="firstName"
                type="text"
                value="Elizabeth"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
              data-shrink="true"
            >
              Last Name
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="lastName"
                type="text"
                value="Vaughn"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
      </div>
      <div
        class="FormSpacer-spacer-id"
      />
      <div
        class="AddressEdit-root-id"
      >
        <div>
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
              data-shrink="false"
            >
              Company
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="companyName"
                type="text"
                value=""
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
              data-shrink="false"
            >
              Phone
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="phone"
                type="text"
                value=""
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
      </div>
      <div
        class="FormSpacer-spacer-id"
      />
      <div
        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
      >
        <label
          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
          data-shrink="true"
        >
          Address line 1
        </label>
        <div
          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
        >
          <input
            aria-invalid="false"
            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
            name="streetAddress1"
            type="text"
            value="419 Ruiz Orchard Apt. 199"
          />
          <fieldset
            aria-hidden="true"
            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            style="padding-left:8px"
          >
            <legend
              class="PrivateNotchedOutline-legend-id"
              style="width:0"
            >
              <span>
                ​
              </span>
            </legend>
          </fieldset>
        </div>
      </div>
      <div
        class="FormSpacer-spacer-id"
      />
      <div
        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
      >
        <label
          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
          data-shrink="false"
        >
          Address line 2
        </label>
        <div
          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
        >
          <input
            aria-invalid="false"
            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
            name="streetAddress2"
            type="text"
            value=""
          />
          <fieldset
            aria-hidden="true"
            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            style="padding-left:8px"
          >
            <legend
              class="PrivateNotchedOutline-legend-id"
              style="width:0.01px"
            >
              <span>
                ​
              </span>
            </legend>
          </fieldset>
        </div>
      </div>
      <div
        class="FormSpacer-spacer-id"
      />
      <div
        class="AddressEdit-root-id"
      >
        <div>
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
              data-shrink="true"
            >
              City
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="city"
                type="text"
                value="Port Danielshire"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
              data-shrink="true"
            >
              ZIP / Postal code
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="postalCode"
                type="text"
                value="52203"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </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 MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Country
              </label>
              <div
                aria-autocomplete="list"
                aria-expanded="false"
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                role="combobox"
              >
                <input
                  aria-invalid="false"
                  autocomplete="off"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  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>
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
              data-shrink="false"
            >
              Country area
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="countryArea"
                type="text"
                value=""
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

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

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

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

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

exports[`Storyshots Generics / Autocomplete Menu loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="AutocompleteSelectMenu-container-id"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
            data-shrink="true"
          >
            Autocomplete Menu
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
          >
            <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>
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Card menu default 1`] = `
<div
  style="padding:24px"
>
  <div>
    <button
      aria-haspopup="true"
      aria-label="More"
      class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
      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="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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <button
        class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="Chip-root-id"
      >
        <div
          class="MuiTypography-root-id Chip-label-id MuiTypography-caption-id"
        >
          Lorem Ipsum
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Chip with x 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="Chip-root-id"
      >
        <div
          class="MuiTypography-root-id Chip-label-id MuiTypography-caption-id"
        >
          Lorem Ipsum
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id Chip-closeIcon-id"
            focusable="false"
            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"
            />
          </svg>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Column picker default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        style="display:flex;justify-content:center"
      >
        <div>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ColumnPickerButton-root-id MuiButton-outlinedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Columns
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id ColumnPickerButton-icon-id MuiSvgIcon-colorPrimary-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M7 10l5 5 5-5z"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Column picker loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        style="display:flex;justify-content:center"
      >
        <div>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ColumnPickerButton-root-id MuiButton-outlinedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Columns
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id ColumnPickerButton-icon-id MuiSvgIcon-colorPrimary-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M7 10l5 5 5-5z"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
`;

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

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

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

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

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

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

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

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

exports[`Storyshots Generics / Filter default 1`] = `
<div
  style="padding:24px"
>
  <div
    style="margin:auto;width:400px"
  >
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id"
    >
      <form>
        <div
          class="FilterContent-actionBar-id"
        >
          <div
            class="MuiTypography-root-id FilterContent-label-id MuiTypography-body1-id"
          >
            Filters
          </div>
          <div>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id FilterContent-clear-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Clear
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
              tabindex="0"
              type="submit"
            >
              <span
                class="MuiButton-label-id"
              >
                Done
              </span>
            </button>
          </div>
        </div>
        <hr
          class="Hr-root-id"
        />
        <div
          class="FilterContent-filterFieldBar-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"
                type="checkbox"
                value="true"
              />
            </button>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Created At
            </span>
          </label>
        </div>
        <div
          class="FilterContent-filterSettings-id"
        >
          <div
            class="MuiFormControl-root-id SingleSelectField-formControl-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
              data-shrink="true"
            />
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <div
                aria-haspopup="listbox"
                aria-labelledby=" "
                class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id FilterContent-input-id MuiInputBase-inputSelect-id MuiOutlinedInput-inputSelect-id"
                role="button"
                tabindex="0"
              >
                between
              </div>
              <input
                type="hidden"
                value="MULTIPLE"
              />
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M7 10l5 5 5-5z"
                />
              </svg>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:143px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="FilterContent-inputRange-id"
          >
            <div>
              <svg
                class="FilterContent-arrow-id"
                fill="none"
                height="21"
                viewBox="0 0 18 21"
                width="18"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  clip-rule="evenodd"
                  d="M13.5858 17.1357L-1.37065e-07 17.1357L-1.37065e-07 15L-1.37064e-07 0L2 -8.74228e-08L2 15.1357L13.5858 15.1357L11.8643 13.4142L13.2785 12L17.4142 16.1357L13.2785 20.2714L11.8643 18.8571L13.5858 17.1357Z"
                  fill="#3D3D3D"
                  fill-rule="evenodd"
                />
              </svg>
            </div>
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterContent-input-id"
                  name="createdAt_min"
                  type="date"
                  value="2019-09-09"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
            <span
              class="FilterContent-andLabel-id"
            >
              and
            </span>
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterContent-input-id"
                  name="createdAt_max"
                  type="date"
                  value="2019-10-23"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
        </div>
        <div
          class="FilterContent-filterFieldBar-id"
        >
          <label
            class="MuiFormControlLabel-root-id"
          >
            <button
              class="MuiButtonBase-root-id Checkbox-root-id"
              tabindex="0"
              type="button"
            >
              <input
                class="Checkbox-box-id"
                type="checkbox"
                value="false"
              />
            </button>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Multiple Options
            </span>
          </label>
        </div>
        <div
          class="FilterContent-filterFieldBar-id"
        >
          <label
            class="MuiFormControlLabel-root-id"
          >
            <button
              class="MuiButtonBase-root-id Checkbox-root-id"
              tabindex="0"
              type="button"
            >
              <input
                class="Checkbox-box-id"
                type="checkbox"
                value="false"
              />
            </button>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Price
            </span>
          </label>
        </div>
        <div
          class="FilterContent-filterFieldBar-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"
                type="checkbox"
                value="true"
              />
            </button>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Status
            </span>
          </label>
        </div>
        <div
          class="FilterContent-filterSettings-id"
        >
          <div
            class="FilterOptionField-root-id"
          >
            <div
              class="FilterOptionField-option-id FilterOptionField-optionRadio-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      name="status"
                      type="radio"
                    />
                    <div
                      class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        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>
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                        />
                      </svg>
                    </div>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Value 1
                </span>
              </label>
            </div>
            <div
              class="FilterOptionField-option-id FilterOptionField-optionRadio-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      name="status"
                      type="radio"
                    />
                    <div
                      class="PrivateRadioButtonIcon-root-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        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>
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                        />
                      </svg>
                    </div>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Value 2
                </span>
              </label>
            </div>
            <div
              class="FilterOptionField-option-id FilterOptionField-optionRadio-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      name="status"
                      type="radio"
                    />
                    <div
                      class="PrivateRadioButtonIcon-root-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        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>
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                        />
                      </svg>
                    </div>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Value 3
                </span>
              </label>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Filter interactive 1`] = `
<div
  style="padding:24px"
>
  <div
    style="margin:auto;width:400px"
  >
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id"
    >
      <form>
        <div
          class="FilterContent-actionBar-id"
        >
          <div
            class="MuiTypography-root-id FilterContent-label-id MuiTypography-body1-id"
          >
            Filters
          </div>
          <div>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id FilterContent-clear-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Clear
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
              tabindex="0"
              type="submit"
            >
              <span
                class="MuiButton-label-id"
              >
                Done
              </span>
            </button>
          </div>
        </div>
        <hr
          class="Hr-root-id"
        />
        <div
          class="FilterContent-filterFieldBar-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"
                type="checkbox"
                value="true"
              />
            </button>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Created At
            </span>
          </label>
        </div>
        <div
          class="FilterContent-filterSettings-id"
        >
          <div
            class="MuiFormControl-root-id SingleSelectField-formControl-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
              data-shrink="true"
            />
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <div
                aria-haspopup="listbox"
                aria-labelledby=" "
                class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id FilterContent-input-id MuiInputBase-inputSelect-id MuiOutlinedInput-inputSelect-id"
                role="button"
                tabindex="0"
              >
                between
              </div>
              <input
                type="hidden"
                value="MULTIPLE"
              />
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M7 10l5 5 5-5z"
                />
              </svg>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:143px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="FilterContent-inputRange-id"
          >
            <div>
              <svg
                class="FilterContent-arrow-id"
                fill="none"
                height="21"
                viewBox="0 0 18 21"
                width="18"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  clip-rule="evenodd"
                  d="M13.5858 17.1357L-1.37065e-07 17.1357L-1.37065e-07 15L-1.37064e-07 0L2 -8.74228e-08L2 15.1357L13.5858 15.1357L11.8643 13.4142L13.2785 12L17.4142 16.1357L13.2785 20.2714L11.8643 18.8571L13.5858 17.1357Z"
                  fill="#3D3D3D"
                  fill-rule="evenodd"
                />
              </svg>
            </div>
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterContent-input-id"
                  name="createdAt_min"
                  type="date"
                  value="2019-09-09"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
            <span
              class="FilterContent-andLabel-id"
            >
              and
            </span>
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id FilterContent-input-id"
                  name="createdAt_max"
                  type="date"
                  value="2019-10-23"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
        </div>
        <div
          class="FilterContent-filterFieldBar-id"
        >
          <label
            class="MuiFormControlLabel-root-id"
          >
            <button
              class="MuiButtonBase-root-id Checkbox-root-id"
              tabindex="0"
              type="button"
            >
              <input
                class="Checkbox-box-id"
                type="checkbox"
                value="false"
              />
            </button>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Multiple Options
            </span>
          </label>
        </div>
        <div
          class="FilterContent-filterFieldBar-id"
        >
          <label
            class="MuiFormControlLabel-root-id"
          >
            <button
              class="MuiButtonBase-root-id Checkbox-root-id"
              tabindex="0"
              type="button"
            >
              <input
                class="Checkbox-box-id"
                type="checkbox"
                value="false"
              />
            </button>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Price
            </span>
          </label>
        </div>
        <div
          class="FilterContent-filterFieldBar-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"
                type="checkbox"
                value="true"
              />
            </button>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              Status
            </span>
          </label>
        </div>
        <div
          class="FilterContent-filterSettings-id"
        >
          <div
            class="FilterOptionField-root-id"
          >
            <div
              class="FilterOptionField-option-id FilterOptionField-optionRadio-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      checked=""
                      class="PrivateSwitchBase-input-id"
                      name="status"
                      type="radio"
                    />
                    <div
                      class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        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>
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                        />
                      </svg>
                    </div>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Value 1
                </span>
              </label>
            </div>
            <div
              class="FilterOptionField-option-id FilterOptionField-optionRadio-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      name="status"
                      type="radio"
                    />
                    <div
                      class="PrivateRadioButtonIcon-root-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        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>
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                        />
                      </svg>
                    </div>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Value 2
                </span>
              </label>
            </div>
            <div
              class="FilterOptionField-option-id FilterOptionField-optionRadio-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  aria-disabled="false"
                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      class="PrivateSwitchBase-input-id"
                      name="status"
                      type="radio"
                    />
                    <div
                      class="PrivateRadioButtonIcon-root-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        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>
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                        />
                      </svg>
                    </div>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Value 3
                </span>
              </label>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
`;

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

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

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

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

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

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

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

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

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

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

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

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

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

exports[`Storyshots Generics / Multiple select with autocomplete can load more 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MultiAutocompleteSelectFieldContent-root-id MuiPaper-rounded-id"
      >
        <div
          class="MultiAutocompleteSelectFieldContent-content-id"
        >
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-selected-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id MuiListItem-selected-id"
            data-tc="multiautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <button
              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
              tabindex="0"
              type="button"
            >
              <input
                class="Checkbox-box-id Checkbox-checked-id"
                type="checkbox"
                value="true"
              />
            </button>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Afghanistan
            </span>
          </div>
          <hr
            class="Hr-root-id MultiAutocompleteSelectFieldContent-hr-id"
          />
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="multiautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <button
              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
              tabindex="0"
              type="button"
            >
              <input
                class="Checkbox-box-id"
                type="checkbox"
                value="false"
              />
            </button>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Afghanistan
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="multiautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <button
              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
              tabindex="0"
              type="button"
            >
              <input
                class="Checkbox-box-id"
                type="checkbox"
                value="false"
              />
            </button>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Åland Islands
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="multiautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <button
              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
              tabindex="0"
              type="button"
            >
              <input
                class="Checkbox-box-id"
                type="checkbox"
                value="false"
              />
            </button>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Albania
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="multiautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <button
              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
              tabindex="0"
              type="button"
            >
              <input
                class="Checkbox-box-id"
                type="checkbox"
                value="false"
              />
            </button>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Algeria
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="multiautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <button
              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
              tabindex="0"
              type="button"
            >
              <input
                class="Checkbox-box-id"
                type="checkbox"
                value="false"
              />
            </button>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              American Samoa
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="multiautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <button
              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
              tabindex="0"
              type="button"
            >
              <input
                class="Checkbox-box-id"
                type="checkbox"
                value="false"
              />
            </button>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              AndorrA
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="multiautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <button
              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
              tabindex="0"
              type="button"
            >
              <input
                class="Checkbox-box-id"
                type="checkbox"
                value="false"
              />
            </button>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Angola
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="multiautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <button
              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
              tabindex="0"
              type="button"
            >
              <input
                class="Checkbox-box-id"
                type="checkbox"
                value="false"
              />
            </button>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Anguilla
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="multiautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <button
              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
              tabindex="0"
              type="button"
            >
              <input
                class="Checkbox-box-id"
                type="checkbox"
                value="false"
              />
            </button>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Antarctica
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="multiautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <button
              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
              tabindex="0"
              type="button"
            >
              <input
                class="Checkbox-box-id"
                type="checkbox"
                value="false"
              />
            </button>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Antigua and Barbuda
            </span>
          </div>
          <hr
            class="Hr-root-id MultiAutocompleteSelectFieldContent-hr-id"
          />
          <div
            class="MultiAutocompleteSelectFieldContent-progressContainer-id"
          >
            <div
              class="MuiCircularProgress-root-id MultiAutocompleteSelectFieldContent-progress-id MuiCircularProgress-colorPrimary-id MuiCircularProgress-indeterminate-id"
              role="progressbar"
              style="width:24px;height:24px"
            >
              <svg
                class="MuiCircularProgress-svg-id"
                viewBox="22 22 44 44"
              >
                <circle
                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
                  cx="44"
                  cy="44"
                  fill="none"
                  r="20.2"
                  stroke-width="3.6"
                />
              </svg>
            </div>
          </div>
        </div>
        <div
          class="MultiAutocompleteSelectFieldContent-arrowContainer-id"
        >
          <div
            class="MultiAutocompleteSelectFieldContent-arrowInnerContainer-id MultiAutocompleteSelectFieldContent-hide-id"
          >
            <span
              class="isvg pending"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Multiple select with autocomplete default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MultiAutocompleteSelectFieldContent-root-id MuiPaper-rounded-id"
      >
        <div
          class="MultiAutocompleteSelectFieldContent-content-id"
        >
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-selected-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id MuiListItem-selected-id"
            data-tc="multiautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <button
              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
              tabindex="0"
              type="button"
            >
              <input
                class="Checkbox-box-id Checkbox-checked-id"
                type="checkbox"
                value="true"
              />
            </button>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Afghanistan
            </span>
          </div>
          <hr
            class="Hr-root-id MultiAutocompleteSelectFieldContent-hr-id"
          />
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="multiautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <button
              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
              tabindex="0"
              type="button"
            >
              <input
                class="Checkbox-box-id"
                type="checkbox"
                value="false"
              />
            </button>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Afghanistan
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="multiautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <button
              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
              tabindex="0"
              type="button"
            >
              <input
                class="Checkbox-box-id"
                type="checkbox"
                value="false"
              />
            </button>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Åland Islands
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="multiautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <button
              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
              tabindex="0"
              type="button"
            >
              <input
                class="Checkbox-box-id"
                type="checkbox"
                value="false"
              />
            </button>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Albania
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="multiautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <button
              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
              tabindex="0"
              type="button"
            >
              <input
                class="Checkbox-box-id"
                type="checkbox"
                value="false"
              />
            </button>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Algeria
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="multiautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <button
              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
              tabindex="0"
              type="button"
            >
              <input
                class="Checkbox-box-id"
                type="checkbox"
                value="false"
              />
            </button>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              American Samoa
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="multiautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <button
              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
              tabindex="0"
              type="button"
            >
              <input
                class="Checkbox-box-id"
                type="checkbox"
                value="false"
              />
            </button>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              AndorrA
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="multiautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <button
              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
              tabindex="0"
              type="button"
            >
              <input
                class="Checkbox-box-id"
                type="checkbox"
                value="false"
              />
            </button>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Angola
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="multiautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <button
              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
              tabindex="0"
              type="button"
            >
              <input
                class="Checkbox-box-id"
                type="checkbox"
                value="false"
              />
            </button>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Anguilla
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="multiautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <button
              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
              tabindex="0"
              type="button"
            >
              <input
                class="Checkbox-box-id"
                type="checkbox"
                value="false"
              />
            </button>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Antarctica
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="multiautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <button
              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
              tabindex="0"
              type="button"
            >
              <input
                class="Checkbox-box-id"
                type="checkbox"
                value="false"
              />
            </button>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Antigua and Barbuda
            </span>
          </div>
        </div>
        <div
          class="MultiAutocompleteSelectFieldContent-arrowContainer-id"
        >
          <div
            class="MultiAutocompleteSelectFieldContent-arrowInnerContainer-id MultiAutocompleteSelectFieldContent-hide-id"
          >
            <span
              class="isvg pending"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Multiple select with autocomplete interactive 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MultiAutocompleteSelectField-container-id"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
            data-shrink="false"
          >
            Country
          </label>
          <div
            aria-autocomplete="list"
            aria-expanded="false"
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            role="combobox"
          >
            <input
              aria-invalid="false"
              autocomplete="off"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
              placeholder="Select country"
              type="text"
              value=""
            />
            <div>
              <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>
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
          <p
            class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
          >
            Value: AF
          </p>
        </div>
      </div>
      <div
        class="MultiAutocompleteSelectField-chipContainer-id"
      >
        <div
          class="MultiAutocompleteSelectField-chip-id"
        >
          <div
            class="MultiAutocompleteSelectField-chipInner-id"
          >
            <div
              class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
            >
              Afghanistan
            </div>
            <button
              class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
              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"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Multiple select with autocomplete interactive with custom option 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MultiAutocompleteSelectField-container-id"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
            data-shrink="false"
          >
            Country
          </label>
          <div
            aria-autocomplete="list"
            aria-expanded="false"
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            role="combobox"
          >
            <input
              aria-invalid="false"
              autocomplete="off"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
              placeholder="Select country"
              type="text"
              value=""
            />
            <div>
              <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>
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
          <p
            class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
          >
            Value: AF
          </p>
        </div>
      </div>
      <div
        class="MultiAutocompleteSelectField-chipContainer-id"
      >
        <div
          class="MultiAutocompleteSelectField-chip-id"
        >
          <div
            class="MultiAutocompleteSelectField-chipInner-id"
          >
            <div
              class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
            >
              Afghanistan
            </div>
            <button
              class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
              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"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Multiple select with autocomplete interactive with error 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MultiAutocompleteSelectField-container-id"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
            data-shrink="false"
          >
            Country
          </label>
          <div
            aria-autocomplete="list"
            aria-expanded="false"
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            role="combobox"
          >
            <input
              aria-invalid="true"
              autocomplete="off"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
              placeholder="Select country"
              type="text"
              value=""
            />
            <div>
              <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>
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
          <p
            class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
          >
            Value: AF
          </p>
        </div>
      </div>
      <div
        class="MultiAutocompleteSelectField-chipContainer-id"
      >
        <div
          class="MultiAutocompleteSelectField-chip-id"
        >
          <div
            class="MultiAutocompleteSelectField-chipInner-id"
          >
            <div
              class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
            >
              Afghanistan
            </div>
            <button
              class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
              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"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Multiple select with autocomplete interactive with load more 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MultiAutocompleteSelectField-container-id"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
            data-shrink="false"
          >
            Country
          </label>
          <div
            aria-autocomplete="list"
            aria-expanded="false"
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            role="combobox"
          >
            <input
              aria-invalid="false"
              autocomplete="off"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
              placeholder="Select country"
              type="text"
              value=""
            />
            <div>
              <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>
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
          <p
            class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
          >
            Value: AF
          </p>
        </div>
      </div>
      <div
        class="MultiAutocompleteSelectField-chipContainer-id"
      >
        <div
          class="MultiAutocompleteSelectField-chip-id"
        >
          <div
            class="MultiAutocompleteSelectField-chipInner-id"
          >
            <div
              class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
            >
              Afghanistan
            </div>
            <button
              class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
              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"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Multiple select with autocomplete no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MultiAutocompleteSelectFieldContent-root-id MuiPaper-rounded-id"
      >
        <div
          class="MultiAutocompleteSelectFieldContent-content-id"
        >
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-selected-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id MuiListItem-selected-id"
            data-tc="multiautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            <button
              class="MuiButtonBase-root-id Checkbox-root-id MultiAutocompleteSelectFieldContent-checkbox-id"
              tabindex="0"
              type="button"
            >
              <input
                class="Checkbox-box-id Checkbox-checked-id"
                type="checkbox"
                value="true"
              />
            </button>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Afghanistan
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

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

exports[`Storyshots Generics / PageHeader with title icon bar 1`] = `
<div
  style="padding:24px"
>
  <div
    class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
  >
    <div
      class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
    >
      Lorem ipsum
    </div>
    <div
      class="ExtendedPageHeader-action-id"
    >
      <div
        class="PageHeader-root-id"
      >
        <button
          class="MuiButtonBase-root-id MuiIconButton-root-id"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiIconButton-label-id"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id"
              focusable="false"
              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"
              />
            </svg>
          </span>
        </button>
      </div>
    </div>
  </div>
</div>
`;

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

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

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

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

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

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

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

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

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

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

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

exports[`Storyshots Generics / Rich text editor default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="RichTextEditor-root-id RichTextEditor-scroll-id"
      >
        <div
          class="RichTextEditor-input-id"
        >
          <div
            class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
          >
            Content
          </div>
          <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 / Select with autocomplete can load more 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id SingleAutocompleteSelectFieldContent-root-id MuiPaper-rounded-id"
      >
        <div
          class="SingleAutocompleteSelectFieldContent-content-id"
        >
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-selected-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id MuiListItem-selected-id"
            data-tc="singleautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            Afghanistan
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="singleautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            Åland Islands
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="singleautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            Albania
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="singleautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            Algeria
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="singleautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            American Samoa
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="singleautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            AndorrA
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="singleautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            Angola
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="singleautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            Anguilla
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="singleautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            Antarctica
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="singleautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            Antigua and Barbuda
          </div>
          <hr
            class="Hr-root-id SingleAutocompleteSelectFieldContent-hr-id"
          />
          <div
            class="SingleAutocompleteSelectFieldContent-progressContainer-id"
          >
            <div
              class="MuiCircularProgress-root-id SingleAutocompleteSelectFieldContent-progress-id MuiCircularProgress-colorPrimary-id MuiCircularProgress-indeterminate-id"
              role="progressbar"
              style="width:24px;height:24px"
            >
              <svg
                class="MuiCircularProgress-svg-id"
                viewBox="22 22 44 44"
              >
                <circle
                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
                  cx="44"
                  cy="44"
                  fill="none"
                  r="20.2"
                  stroke-width="3.6"
                />
              </svg>
            </div>
          </div>
        </div>
        <div
          class="SingleAutocompleteSelectFieldContent-arrowContainer-id"
        >
          <div
            class="SingleAutocompleteSelectFieldContent-arrowInnerContainer-id SingleAutocompleteSelectFieldContent-hide-id"
          >
            <span
              class="isvg pending"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Select with autocomplete default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id SingleAutocompleteSelectFieldContent-root-id MuiPaper-rounded-id"
      >
        <div
          class="SingleAutocompleteSelectFieldContent-content-id"
        >
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-selected-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id MuiListItem-selected-id"
            data-tc="singleautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            Afghanistan
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="singleautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            Åland Islands
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="singleautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            Albania
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="singleautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            Algeria
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="singleautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            American Samoa
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="singleautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            AndorrA
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="singleautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            Angola
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="singleautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            Anguilla
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="singleautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            Antarctica
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-tc="singleautocomplete-select-option"
            role="menuitem"
            tabindex="-1"
          >
            Antigua and Barbuda
          </div>
        </div>
        <div
          class="SingleAutocompleteSelectFieldContent-arrowContainer-id"
        >
          <div
            class="SingleAutocompleteSelectFieldContent-arrowInnerContainer-id SingleAutocompleteSelectFieldContent-hide-id"
          >
            <span
              class="isvg pending"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Select with autocomplete interactive 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <div
          class="SingleAutocompleteSelectField-container-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
              data-shrink="true"
            >
              Country
            </label>
            <div
              aria-autocomplete="list"
              aria-expanded="false"
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
              role="combobox"
            >
              <input
                aria-invalid="false"
                autocomplete="off"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                placeholder="Select country"
                type="text"
                value="Afghanistan"
              />
              <div>
                <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>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
            >
              Value: AF
            </p>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Select with autocomplete interactive with custom option 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <div
          class="SingleAutocompleteSelectField-container-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
              data-shrink="true"
            >
              Country
            </label>
            <div
              aria-autocomplete="list"
              aria-expanded="false"
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
              role="combobox"
            >
              <input
                aria-invalid="false"
                autocomplete="off"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                placeholder="Select country"
                type="text"
                value="Afghanistan"
              />
              <div>
                <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>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
            >
              Value: AF
            </p>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Select with autocomplete interactive with empty option 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <div
          class="SingleAutocompleteSelectField-container-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
              data-shrink="true"
            >
              Country
            </label>
            <div
              aria-autocomplete="list"
              aria-expanded="false"
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
              role="combobox"
            >
              <input
                aria-invalid="false"
                autocomplete="off"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                placeholder="Select country"
                type="text"
                value="Afghanistan"
              />
              <div>
                <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>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
            >
              Value: AF
            </p>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Select with autocomplete interactive with load more 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <div
          class="SingleAutocompleteSelectField-container-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
              data-shrink="true"
            >
              Country
            </label>
            <div
              aria-autocomplete="list"
              aria-expanded="false"
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
              role="combobox"
            >
              <input
                aria-invalid="false"
                autocomplete="off"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                placeholder="Select country"
                type="text"
                value="Afghanistan"
              />
              <div>
                <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>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
            >
              Value: AF
            </p>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
`;

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

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

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

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

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

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

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

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

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

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

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

exports[`Storyshots Generics / TablePagination both previous and next pages are available 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <tbody>
            <tr>
              <td
                class="MuiTableCell-root-id TablePagination-root-id"
                colspan="1"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  />
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-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>
</div>
`;

exports[`Storyshots Generics / TablePagination next page available 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <tbody>
            <tr>
              <td
                class="MuiTableCell-root-id TablePagination-root-id"
                colspan="1"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  />
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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>
</div>
`;

exports[`Storyshots Generics / TablePagination no previous / next page 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <tbody>
            <tr>
              <td
                class="MuiTableCell-root-id TablePagination-root-id"
                colspan="1"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  />
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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 TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-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>
</div>
`;

exports[`Storyshots Generics / TablePagination previous page available 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <tbody>
            <tr>
              <td
                class="MuiTableCell-root-id TablePagination-root-id"
                colspan="1"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  />
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-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 TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-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>
</div>
`;

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

exports[`Storyshots Generics / Timeline with expansion panels 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Timeline-root-id"
  >
    <div
      class="TimelineEvent-root-id"
    >
      <span
        class="TimelineEvent-dot-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation0-id MuiExpansionPanel-root-id TimelineEvent-panel-id MuiExpansionPanel-rounded-id MuiPaper-rounded-id"
      >
        <div
          aria-disabled="false"
          aria-expanded="false"
          class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id"
          role="button"
          tabindex="0"
        >
          <div
            class="MuiExpansionPanelSummary-content-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Expansion panel 1
            </div>
            <div
              class="MuiTypography-root-id TimelineEvent-dateExpander-id MuiTypography-body1-id"
            >
              Expansion panel 1
            </div>
          </div>
          <div
            aria-disabled="false"
            aria-hidden="true"
            class="MuiButtonBase-root-id MuiIconButton-root-id MuiExpansionPanelSummary-expandIcon-id MuiIconButton-edgeEnd-id"
          >
            <span
              class="MuiIconButton-label-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
                />
              </svg>
            </span>
          </div>
        </div>
        <div
          class="MuiCollapse-container-id MuiCollapse-hidden-id"
          style="min-height:0px"
        >
          <div
            class="MuiCollapse-wrapper-id"
          >
            <div
              class="MuiCollapse-wrapperInner-id"
            >
              <div
                role="region"
              >
                <div
                  class="MuiExpansionPanelDetails-root-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="TimelineEvent-root-id"
    >
      <span
        class="TimelineEvent-dot-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation0-id MuiExpansionPanel-root-id TimelineEvent-panel-id MuiExpansionPanel-rounded-id MuiPaper-rounded-id"
      >
        <div
          aria-disabled="false"
          aria-expanded="false"
          class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id"
          role="button"
          tabindex="0"
        >
          <div
            class="MuiExpansionPanelSummary-content-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Expansion panel 2
            </div>
            <div
              class="MuiTypography-root-id TimelineEvent-dateExpander-id MuiTypography-body1-id"
            >
              Expansion panel 2
            </div>
          </div>
          <div
            aria-disabled="false"
            aria-hidden="true"
            class="MuiButtonBase-root-id MuiIconButton-root-id MuiExpansionPanelSummary-expandIcon-id MuiIconButton-edgeEnd-id"
          >
            <span
              class="MuiIconButton-label-id"
            >
              <svg
                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"
                />
              </svg>
            </span>
          </div>
        </div>
        <div
          class="MuiCollapse-container-id MuiCollapse-hidden-id"
          style="min-height:0px"
        >
          <div
            class="MuiCollapse-wrapper-id"
          >
            <div
              class="MuiCollapse-wrapperInner-id"
            >
              <div
                role="region"
              >
                <div
                  class="MuiExpansionPanelDetails-root-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="TimelineEvent-root-id"
    >
      <span
        class="TimelineEvent-dot-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation0-id MuiExpansionPanel-root-id TimelineEvent-panel-id MuiExpansionPanel-rounded-id MuiPaper-rounded-id"
      >
        <div
          aria-disabled="false"
          aria-expanded="false"
          class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id"
          role="button"
          tabindex="0"
        >
          <div
            class="MuiExpansionPanelSummary-content-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Expansion panel 3
            </div>
            <div
              class="MuiTypography-root-id TimelineEvent-dateExpander-id MuiTypography-body1-id"
            >
              Expansion panel 3
            </div>
          </div>
          <div
            aria-disabled="false"
            aria-hidden="true"
            class="MuiButtonBase-root-id MuiIconButton-root-id MuiExpansionPanelSummary-expandIcon-id MuiIconButton-edgeEnd-id"
          >
            <span
              class="MuiIconButton-label-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
                />
              </svg>
            </span>
          </div>
        </div>
        <div
          class="MuiCollapse-container-id MuiCollapse-hidden-id"
          style="min-height:0px"
        >
          <div
            class="MuiCollapse-wrapper-id"
          >
            <div
              class="MuiCollapse-wrapperInner-id"
            >
              <div
                role="region"
              >
                <div
                  class="MuiExpansionPanelDetails-root-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

exports[`Storyshots Orders / OrderCustomer default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
  >
    <div
      class="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Customer
      </span>
      <div
        class="CardTitle-toolbar-id"
      >
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
          disabled=""
          tabindex="-1"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            Edit
          </span>
        </button>
      </div>
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
      >
        melissa.simon@example.com
      </div>
    </div>
    <hr
      class="Hr-root-id"
    />
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="OrderCustomer-sectionHeader-id"
      >
        <div
          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
        >
          Shipping Address
        </div>
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        Melissa Simon
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        487 Roberto Shores
        <br />
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        66272 West Patriciastad
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        Wyspy Salomona
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      />
    </div>
    <hr
      class="Hr-root-id"
    />
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="OrderCustomer-sectionHeader-id"
      >
        <div
          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
        >
          Billing Address
        </div>
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        Same as shipping address
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Orders / OrderCustomer editable 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
  >
    <div
      class="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Customer
      </span>
      <div
        class="CardTitle-toolbar-id"
      >
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
          disabled=""
          tabindex="-1"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            Edit
          </span>
        </button>
      </div>
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
      >
        melissa.simon@example.com
      </div>
    </div>
    <hr
      class="Hr-root-id"
    />
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="OrderCustomer-sectionHeader-id"
      >
        <div
          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
        >
          Shipping Address
        </div>
        <div
          class="OrderCustomer-sectionHeaderToolbar-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Edit
            </span>
          </button>
        </div>
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        Melissa Simon
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        487 Roberto Shores
        <br />
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        66272 West Patriciastad
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        Wyspy Salomona
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      />
    </div>
    <hr
      class="Hr-root-id"
    />
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="OrderCustomer-sectionHeader-id"
      >
        <div
          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
        >
          Billing Address
        </div>
        <div
          class="OrderCustomer-sectionHeaderToolbar-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Edit
            </span>
          </button>
        </div>
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        Same as shipping address
      </div>
    </div>
  </div>
</div>
`;

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

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

exports[`Storyshots Orders / OrderCustomer with different addresses 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
  >
    <div
      class="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Customer
      </span>
      <div
        class="CardTitle-toolbar-id"
      >
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
          disabled=""
          tabindex="-1"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            Edit
          </span>
        </button>
      </div>
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
      >
        melissa.simon@example.com
      </div>
    </div>
    <hr
      class="Hr-root-id"
    />
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="OrderCustomer-sectionHeader-id"
      >
        <div
          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
        >
          Shipping Address
        </div>
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        Melissa Simon
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        487 Roberto Shores
        <br />
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        66272 West Patriciastad
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        Wyspy Salomona
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      />
    </div>
    <hr
      class="Hr-root-id"
    />
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="OrderCustomer-sectionHeader-id"
      >
        <div
          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
        >
          Billing Address
        </div>
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        Melissa Simon
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        487 Roberto Shores
        <br />
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        66272 West Patriciastad
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      >
        Wyspy Salomona
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id"
      />
    </div>
  </div>
</div>
`;

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

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

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

exports[`Storyshots Orders / OrderDraftFinalizeDialog with errors 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 / OrderFulfillmentCancelDialog error 1`] = `
<div
  style="padding:24px"
/>
`;

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

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

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

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

exports[`Storyshots Orders / OrderHistory default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="OrderHistory-root-id"
  >
    <div
      class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
    >
      Order History
    </div>
    <hr
      class="Hr-root-id"
    />
    <div
      class="Timeline-root-id"
    >
      <form>
        <div
          class="Timeline-noteRoot-id"
        >
          <div
            class="MuiCardContent-root-id Timeline-noteTitle-id"
          >
            <div
              class="MuiAvatar-root-id MuiAvatar-circle-id Timeline-avatar-id MuiAvatar-colorDefault-id"
              style="background:#673ab7"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                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"
                />
              </svg>
            </div>
            <div
              class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
            >
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
              >
                <textarea
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  name="message"
                  placeholder="Leave your note here..."
                  rows="1"
                />
                <textarea
                  aria-hidden="true"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  readonly=""
                  style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                  tabindex="-1"
                />
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id Timeline-button-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Send
                  </span>
                </button>
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
        </div>
      </form>
      <div
        class="TimelineEvent-root-id"
      >
        <span
          class="TimelineEvent-dot-id"
        />
        <div
          class="TimelineEvent-noExpander-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Fulfilled 1 items
          </div>
          <div
            class="MuiTypography-root-id TimelineEvent-date-id MuiTypography-body1-id"
          >
            <time
              class=""
              datetime="1537190544376"
              title="Sep 17, 2018 9:22 AM"
            >
              in a month
            </time>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

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

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

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

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

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

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

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

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

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

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

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

exports[`Storyshots 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 ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create New Attribute
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Default Label
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Attribute Code
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="slug"
                    placeholder=""
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                >
                  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 MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Catalog Input type for Store Owner
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <div
                    aria-haspopup="listbox"
                    aria-labelledby=" mui-component-select-inputType"
                    class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputSelect-id MuiOutlinedInput-inputSelect-id"
                    id="mui-component-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 MuiSelect-iconOutlined-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:143px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <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="valueRequired"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Value Required
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Attribute Values
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign value
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnDrag-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnAdmin-id"
                      scope="col"
                    >
                      Admin
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnStore-id"
                      scope="col"
                    >
                      Default Store View
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id AttributeValues-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        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 AttributeValues-columnAdmin-id"
                    >
                      john-doe
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
                    >
                      John Doe
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id AttributeValues-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        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 AttributeValues-columnAdmin-id"
                    >
                      milionare-pirate
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
                    >
                      Milionare Pirate
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Properties
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Storefront Properties
              </div>
              <hr
                class="Hr-root-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-checked-id"
                    name="filterableInStorefront"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Use in Faceted Navigation
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Position in faceted navigation
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="storefrontSearchPosition"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-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="visibleInStorefront"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Visible on Product Page in Storefront
                </span>
              </label>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Dashboard Properties
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-checked-id"
                    name="filterableInDashboard"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Use in Filtering
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    If enabled, you’ll be able to use this attribute to filter products in product list.
                  </div>
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-checked-id"
                    name="availableInGrid"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Add to Column Options
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    If enabled this attribute can be used as a column in product table.
                  </div>
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Author
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Default Label
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Author"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Attribute Code
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="slug"
                    placeholder="author"
                    type="text"
                    value="author"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                >
                  This is used internally. Make sure you don’t use spaces
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id SingleSelectField-formControl-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Catalog Input type for Store Owner
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <div
                    aria-haspopup="listbox"
                    aria-labelledby=" mui-component-select-inputType"
                    class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputSelect-id MuiOutlinedInput-inputSelect-id MuiSelect-disabled-id"
                    id="mui-component-select-inputType"
                    role="button"
                  >
                    Dropdown
                  </div>
                  <input
                    name="inputType"
                    type="hidden"
                    value="DROPDOWN"
                  />
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:143px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <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="valueRequired"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Value Required
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Attribute Values
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign value
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnDrag-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnAdmin-id"
                      scope="col"
                    >
                      Admin
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnStore-id"
                      scope="col"
                    >
                      Default Store View
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id AttributeValues-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        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 AttributeValues-columnAdmin-id"
                    >
                      john-doe
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
                    >
                      John Doe
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id AttributeValues-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        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 AttributeValues-columnAdmin-id"
                    >
                      milionare-pirate
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
                    >
                      Milionare Pirate
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Properties
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Storefront Properties
              </div>
              <hr
                class="Hr-root-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-checked-id"
                    name="filterableInStorefront"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Use in Faceted Navigation
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Position in faceted navigation
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="storefrontSearchPosition"
                    type="text"
                    value="2"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-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="visibleInStorefront"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Visible on Product Page in Storefront
                </span>
              </label>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Dashboard Properties
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    name="filterableInDashboard"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Use in Filtering
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    If enabled, you’ll be able to use this attribute to filter products in product list.
                  </div>
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-checked-id"
                    name="availableInGrid"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Add to Column Options
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    If enabled this attribute can be used as a column in product table.
                  </div>
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Author
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Default Label
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Author"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Invalid value
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Attribute Code
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="slug"
                    placeholder="author"
                    type="text"
                    value="author"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Invalid value
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id SingleSelectField-formControl-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Catalog Input type for Store Owner
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <div
                    aria-haspopup="listbox"
                    aria-labelledby=" mui-component-select-inputType"
                    class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputSelect-id MuiOutlinedInput-inputSelect-id MuiSelect-disabled-id"
                    id="mui-component-select-inputType"
                    role="button"
                  >
                    Dropdown
                  </div>
                  <input
                    name="inputType"
                    type="hidden"
                    value="DROPDOWN"
                  />
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:143px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <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="valueRequired"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Value Required
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Attribute Values
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign value
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnDrag-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnAdmin-id"
                      scope="col"
                    >
                      Admin
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnStore-id"
                      scope="col"
                    >
                      Default Store View
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id AttributeValues-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        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 AttributeValues-columnAdmin-id"
                    >
                      john-doe
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
                    >
                      John Doe
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id AttributeValues-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        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 AttributeValues-columnAdmin-id"
                    >
                      milionare-pirate
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
                    >
                      Milionare Pirate
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Properties
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Storefront Properties
              </div>
              <hr
                class="Hr-root-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-checked-id"
                    name="filterableInStorefront"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Use in Faceted Navigation
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Position in faceted navigation
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="storefrontSearchPosition"
                    type="text"
                    value="2"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Invalid value
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-checked-id"
                    name="visibleInStorefront"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Visible on Product Page in Storefront
                </span>
              </label>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Dashboard Properties
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    name="filterableInDashboard"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Use in Filtering
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    If enabled, you’ll be able to use this attribute to filter products in product list.
                  </div>
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-checked-id"
                    name="availableInGrid"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Add to Column Options
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    If enabled this attribute can be used as a column in product table.
                  </div>
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <span
            class="Skeleton-skeleton-id"
            style="width:10em"
          >
            ‌
          </span>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Default Label
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Attribute Code
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="slug"
                    placeholder=""
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-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 MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Catalog Input type for Store Owner
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <div
                    aria-haspopup="listbox"
                    aria-labelledby=" mui-component-select-inputType"
                    class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputSelect-id MuiOutlinedInput-inputSelect-id MuiSelect-disabled-id"
                    id="mui-component-select-inputType"
                    role="button"
                  >
                    Dropdown
                  </div>
                  <input
                    name="inputType"
                    type="hidden"
                    value="DROPDOWN"
                  />
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:143px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-checked-id Checkbox-disabled-id"
                    disabled=""
                    name="valueRequired"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Value Required
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Attribute Values
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign value
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnDrag-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnAdmin-id"
                      scope="col"
                    >
                      Admin
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnStore-id"
                      scope="col"
                    >
                      Default Store View
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        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 AttributeValues-columnAdmin-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                      >
                        ‌
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                      >
                        ‌
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Properties
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Storefront Properties
              </div>
              <hr
                class="Hr-root-id"
              />
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-checked-id Checkbox-disabled-id"
                    disabled=""
                    name="filterableInStorefront"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Use in Faceted Navigation
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Position in faceted navigation
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="storefrontSearchPosition"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-checked-id Checkbox-disabled-id"
                    disabled=""
                    name="visibleInStorefront"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Visible on Product Page in Storefront
                </span>
              </label>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Dashboard Properties
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-checked-id Checkbox-disabled-id"
                    disabled=""
                    name="filterableInDashboard"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Use in Filtering
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    If enabled, you’ll be able to use this attribute to filter products in product list.
                  </div>
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-checked-id Checkbox-disabled-id"
                    disabled=""
                    name="availableInGrid"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Add to Column Options
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    If enabled this attribute can be used as a column in product table.
                  </div>
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Attributes / Attribute details multiple select input 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Author
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Default Label
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Author"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Attribute Code
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="slug"
                    placeholder="author"
                    type="text"
                    value="author"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                >
                  This is used internally. Make sure you don’t use spaces
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id SingleSelectField-formControl-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Catalog Input type for Store Owner
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <div
                    aria-haspopup="listbox"
                    aria-labelledby=" mui-component-select-inputType"
                    class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputSelect-id MuiOutlinedInput-inputSelect-id MuiSelect-disabled-id"
                    id="mui-component-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 MuiSelect-iconOutlined-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:143px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <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="valueRequired"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Value Required
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Attribute Values
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign value
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnDrag-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnAdmin-id"
                      scope="col"
                    >
                      Admin
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnStore-id"
                      scope="col"
                    >
                      Default Store View
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id AttributeValues-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        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 AttributeValues-columnAdmin-id"
                    >
                      john-doe
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
                    >
                      John Doe
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id AttributeValues-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        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 AttributeValues-columnAdmin-id"
                    >
                      milionare-pirate
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
                    >
                      Milionare Pirate
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Properties
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Storefront Properties
              </div>
              <hr
                class="Hr-root-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-checked-id"
                    name="filterableInStorefront"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Use in Faceted Navigation
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Position in faceted navigation
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="storefrontSearchPosition"
                    type="text"
                    value="2"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-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="visibleInStorefront"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Visible on Product Page in Storefront
                </span>
              </label>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Dashboard Properties
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    name="filterableInDashboard"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Use in Filtering
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    If enabled, you’ll be able to use this attribute to filter products in product list.
                  </div>
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-checked-id"
                    name="availableInGrid"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Add to Column Options
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    If enabled this attribute can be used as a column in product table.
                  </div>
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Author
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Default Label
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Author"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Attribute Code
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="slug"
                    placeholder="author"
                    type="text"
                    value="author"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                >
                  This is used internally. Make sure you don’t use spaces
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id SingleSelectField-formControl-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Catalog Input type for Store Owner
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <div
                    aria-haspopup="listbox"
                    aria-labelledby=" mui-component-select-inputType"
                    class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputSelect-id MuiOutlinedInput-inputSelect-id MuiSelect-disabled-id"
                    id="mui-component-select-inputType"
                    role="button"
                  >
                    Dropdown
                  </div>
                  <input
                    name="inputType"
                    type="hidden"
                    value="DROPDOWN"
                  />
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:143px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <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="valueRequired"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Value Required
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Attribute Values
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign value
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnDrag-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnAdmin-id"
                      scope="col"
                    >
                      Admin
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnStore-id"
                      scope="col"
                    >
                      Default Store View
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        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 AttributeValues-columnAdmin-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                      >
                        ‌
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                      >
                        ‌
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Properties
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Storefront Properties
              </div>
              <hr
                class="Hr-root-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-checked-id"
                    name="filterableInStorefront"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Use in Faceted Navigation
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Position in faceted navigation
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="storefrontSearchPosition"
                    type="text"
                    value="2"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-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="visibleInStorefront"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Visible on Product Page in Storefront
                </span>
              </label>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Dashboard Properties
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    name="filterableInDashboard"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Use in Filtering
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    If enabled, you’ll be able to use this attribute to filter products in product list.
                  </div>
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-checked-id"
                    name="availableInGrid"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Add to Column Options
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    If enabled this attribute can be used as a column in product table.
                  </div>
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Attributes
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create attribute
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Attributes
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Attribute"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <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 TableCellHeader-root-id AttributeList-colSlug-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Attribute Code
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowLeft-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Default Label
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colVisible-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Visible
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colSearchable-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Searchable
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colFaceted-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Use in faceted search
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="6"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  />
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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 AttributeList-link-id MuiTableRow-hover-id"
              data-tc="id"
              data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTo5"
              data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI0\\",\\"name\\":\\"John Doe\\",\\"slug\\":\\"john-doe\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI1\\",\\"name\\":\\"Milionare Pirate\\",\\"slug\\":\\"milionare-pirate\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
            >
              <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 AttributeList-colSlug-id"
                data-tc="slug"
              >
                author
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-tc="name"
              >
                Author
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-tc="visible"
                data-tc-visible="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-tc="searchable"
                data-tc-searchable="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-tc="use-in-faceted-search"
                data-tc-use-in-faceted-search="false"
              >
                No
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
              data-tc="id"
              data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTo2"
              data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE1\\",\\"name\\":\\"100g\\",\\"slug\\":\\"100g\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE2\\",\\"name\\":\\"250g\\",\\"slug\\":\\"250g\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE3\\",\\"name\\":\\"500g\\",\\"slug\\":\\"500g\\",\\"sortOrder\\":2,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE4\\",\\"name\\":\\"1kg\\",\\"slug\\":\\"1kg\\",\\"sortOrder\\":3,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
            >
              <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 AttributeList-colSlug-id"
                data-tc="slug"
              >
                box-size
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-tc="name"
              >
                Box Size
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-tc="visible"
                data-tc-visible="false"
              >
                No
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-tc="searchable"
                data-tc-searchable="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-tc="use-in-faceted-search"
                data-tc-use-in-faceted-search="false"
              >
                No
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
              data-tc="id"
              data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToz"
              data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjY=\\",\\"name\\":\\"Saleor\\",\\"slug\\":\\"saleor\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
            >
              <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 AttributeList-colSlug-id"
                data-tc="slug"
              >
                brand
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-tc="name"
              >
                Brand
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-tc="visible"
                data-tc-visible="false"
              >
                No
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-tc="searchable"
                data-tc-searchable="false"
              >
                No
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-tc="use-in-faceted-search"
                data-tc-use-in-faceted-search="true"
              >
                Yes
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
              data-tc="id"
              data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTo4"
              data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIx\\",\\"name\\":\\"100g\\",\\"slug\\":\\"100g\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIy\\",\\"name\\":\\"250g\\",\\"slug\\":\\"250g\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIz\\",\\"name\\":\\"500g\\",\\"slug\\":\\"500g\\",\\"sortOrder\\":2,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
            >
              <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 AttributeList-colSlug-id"
                data-tc="slug"
              >
                candy-box-size
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-tc="name"
              >
                Candy Box Size
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-tc="visible"
                data-tc-visible="false"
              >
                No
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-tc="searchable"
                data-tc-searchable="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-tc="use-in-faceted-search"
                data-tc-use-in-faceted-search="true"
              >
                Yes
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
              data-tc="id"
              data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTo1"
              data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEz\\",\\"name\\":\\"Arabica\\",\\"slug\\":\\"arabica\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE0\\",\\"name\\":\\"Robusta\\",\\"slug\\":\\"robusta\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
            >
              <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 AttributeList-colSlug-id"
                data-tc="slug"
              >
                coffee-genre
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-tc="name"
              >
                Coffee Genre
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-tc="visible"
                data-tc-visible="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-tc="searchable"
                data-tc-searchable="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-tc="use-in-faceted-search"
                data-tc-use-in-faceted-search="true"
              >
                Yes
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
              data-tc="id"
              data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToy"
              data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjM=\\",\\"name\\":\\"Round\\",\\"slug\\":\\"round\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjQ=\\",\\"name\\":\\"V-Neck\\",\\"slug\\":\\"v-neck\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjU=\\",\\"name\\":\\"Polo\\",\\"slug\\":\\"polo\\",\\"sortOrder\\":2,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
            >
              <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 AttributeList-colSlug-id"
                data-tc="slug"
              >
                collar
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-tc="name"
              >
                Collar
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-tc="visible"
                data-tc-visible="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-tc="searchable"
                data-tc-searchable="false"
              >
                No
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-tc="use-in-faceted-search"
                data-tc-use-in-faceted-search="true"
              >
                Yes
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
              data-tc="id"
              data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTox"
              data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE=\\",\\"name\\":\\"Blue\\",\\"slug\\":\\"blue\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI=\\",\\"name\\":\\"White\\",\\"slug\\":\\"white\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
            >
              <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 AttributeList-colSlug-id"
                data-tc="slug"
              >
                color
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-tc="name"
              >
                Color
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-tc="visible"
                data-tc-visible="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-tc="searchable"
                data-tc-searchable="false"
              >
                No
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-tc="use-in-faceted-search"
                data-tc-use-in-faceted-search="false"
              >
                No
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
              data-tc="id"
              data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToxMg=="
              data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMw\\",\\"name\\":\\"Soft\\",\\"slug\\":\\"soft\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMx\\",\\"name\\":\\"Hard\\",\\"slug\\":\\"hard\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMy\\",\\"name\\":\\"Middle soft\\",\\"slug\\":\\"middle-soft\\",\\"sortOrder\\":2,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjMz\\",\\"name\\":\\"Middle hard\\",\\"slug\\":\\"middle-hard\\",\\"sortOrder\\":3,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjM0\\",\\"name\\":\\"Middle\\",\\"slug\\":\\"middle\\",\\"sortOrder\\":4,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjM1\\",\\"name\\":\\"Very hard\\",\\"slug\\":\\"very-hard\\",\\"sortOrder\\":5,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
            >
              <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 AttributeList-colSlug-id"
                data-tc="slug"
              >
                cover
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-tc="name"
              >
                Cover
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-tc="visible"
                data-tc-visible="false"
              >
                No
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-tc="searchable"
                data-tc-searchable="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-tc="use-in-faceted-search"
                data-tc-use-in-faceted-search="false"
              >
                No
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
              data-tc="id"
              data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTo3"
              data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjE5\\",\\"name\\":\\"Sour\\",\\"slug\\":\\"sour\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjIw\\",\\"name\\":\\"Sweet\\",\\"slug\\":\\"sweet\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
            >
              <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 AttributeList-colSlug-id"
                data-tc="slug"
              >
                flavor
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-tc="name"
              >
                Flavor
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-tc="visible"
                data-tc-visible="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-tc="searchable"
                data-tc-searchable="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-tc="use-in-faceted-search"
                data-tc-use-in-faceted-search="true"
              >
                Yes
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
              data-tc="id"
              data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToxMQ=="
              data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI4\\",\\"name\\":\\"English\\",\\"slug\\":\\"english\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI5\\",\\"name\\":\\"Pirate\\",\\"slug\\":\\"pirate\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
            >
              <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 AttributeList-colSlug-id"
                data-tc="slug"
              >
                language
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-tc="name"
              >
                Language
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-tc="visible"
                data-tc-visible="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-tc="searchable"
                data-tc-searchable="false"
              >
                No
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-tc="use-in-faceted-search"
                data-tc-use-in-faceted-search="true"
              >
                Yes
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
              data-tc="id"
              data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToxMA=="
              data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI2\\",\\"name\\":\\"Mirumee Press\\",\\"slug\\":\\"mirumee-press\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjI3\\",\\"name\\":\\"Saleor Publishing\\",\\"slug\\":\\"saleor-publishing\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
            >
              <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 AttributeList-colSlug-id"
                data-tc="slug"
              >
                publisher
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-tc="name"
              >
                Publisher
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-tc="visible"
                data-tc-visible="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-tc="searchable"
                data-tc-searchable="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-tc="use-in-faceted-search"
                data-tc-use-in-faceted-search="true"
              >
                Yes
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
              data-tc="id"
              data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTo0"
              data-tc-values="[{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjc=\\",\\"name\\":\\"XS\\",\\"slug\\":\\"xs\\",\\"sortOrder\\":0,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjg=\\",\\"name\\":\\"S\\",\\"slug\\":\\"s\\",\\"sortOrder\\":1,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjk=\\",\\"name\\":\\"M\\",\\"slug\\":\\"m\\",\\"sortOrder\\":2,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEw\\",\\"name\\":\\"L\\",\\"slug\\":\\"l\\",\\"sortOrder\\":3,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEx\\",\\"name\\":\\"XL\\",\\"slug\\":\\"xl\\",\\"sortOrder\\":4,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"},{\\"__typename\\":\\"AttributeValue\\",\\"id\\":\\"UHJvZHVjdEF0dHJpYnV0ZVZhbHVlOjEy\\",\\"name\\":\\"XXL\\",\\"slug\\":\\"xxl\\",\\"sortOrder\\":5,\\"type\\":\\"STRING\\",\\"value\\":\\"\\"}]"
            >
              <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 AttributeList-colSlug-id"
                data-tc="slug"
              >
                size
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-tc="name"
              >
                Size
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-tc="visible"
                data-tc-visible="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-tc="searchable"
                data-tc-searchable="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-tc="use-in-faceted-search"
                data-tc-use-in-faceted-search="true"
              >
                Yes
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Attributes / Attribute list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Attributes
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create attribute
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Attributes
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Attribute"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 TableCellHeader-root-id AttributeList-colSlug-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Attribute Code
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowLeft-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Default Label
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colVisible-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Visible
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colSearchable-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Searchable
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colFaceted-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Use in faceted search
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="6"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  />
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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 TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-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 AttributeList-link-id"
              data-tc="id"
              data-tc-values="[]"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 AttributeList-colSlug-id"
                data-tc="slug"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-tc="name"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-tc="visible"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-tc="searchable"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-tc="use-in-faceted-search"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Attributes / Attribute list no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Attributes
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create attribute
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Attributes
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Attribute"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colSlug-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Attribute Code
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowLeft-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Default Label
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colVisible-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Visible
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colSearchable-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Searchable
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colFaceted-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Use in faceted search
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="6"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  />
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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>
</div>
`;

exports[`Storyshots Views / Authentication / Log in default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
            data-shrink="false"
          >
            E-mail Address
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              autocomplete="username"
              autofocus=""
              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
              data-tc="email"
              name="email"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
            data-shrink="false"
          >
            Password
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              autocomplete="password"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
              data-tc="password"
              name="password"
              type="password"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="LoginCard-buttonContainer-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id LoginCard-loginButton-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
            data-tc="submit"
            disabled=""
            tabindex="-1"
            type="submit"
          >
            <span
              class="MuiButton-label-id"
            >
              Login
            </span>
          </button>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="MuiTypography-root-id LoginCard-link-id MuiTypography-body1-id"
        >
          Reset your password
        </div>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Authentication / Log in error 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <div
          class="LoginCard-panel-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-caption-id"
          >
            Sorry, your username and/or password are incorrect. Please try again.
          </div>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
            data-shrink="false"
          >
            E-mail Address
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              autocomplete="username"
              autofocus=""
              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
              data-tc="email"
              name="email"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
            data-shrink="false"
          >
            Password
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              autocomplete="password"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
              data-tc="password"
              name="password"
              type="password"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="LoginCard-buttonContainer-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id LoginCard-loginButton-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
            data-tc="submit"
            disabled=""
            tabindex="-1"
            type="submit"
          >
            <span
              class="MuiButton-label-id"
            >
              Login
            </span>
          </button>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="MuiTypography-root-id LoginCard-link-id MuiTypography-body1-id"
        >
          Reset your password
        </div>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Authentication / Log in loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
            data-shrink="false"
          >
            E-mail Address
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              autocomplete="username"
              autofocus=""
              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
              data-tc="email"
              name="email"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
            data-shrink="false"
          >
            Password
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              autocomplete="password"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
              data-tc="password"
              name="password"
              type="password"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="LoginCard-buttonContainer-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id LoginCard-loginButton-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
            data-tc="submit"
            disabled=""
            tabindex="-1"
            type="submit"
          >
            <span
              class="MuiButton-label-id"
            >
              Login
            </span>
          </button>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="MuiTypography-root-id LoginCard-link-id MuiTypography-body1-id"
        >
          Reset your password
        </div>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Authentication / Reset password default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          Forgot your password? Don't worry, we'll reset it for you.
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
            data-shrink="false"
          >
            E-mail Address
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              autocomplete="username"
              autofocus=""
              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
              data-tc="email"
              name="email"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id ResetPasswordPage-submit-id MuiButton-containedPrimary-id"
          tabindex="0"
          type="submit"
        >
          <span
            class="MuiButton-label-id"
          >
            Send Instructions
          </span>
        </button>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Authentication / Reset password error 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <div
          class="ResetPasswordPage-panel-id"
        >
          <div
            class="MuiTypography-root-id ResetPasswordPage-errorText-id MuiTypography-caption-id"
          >
            Generic form error
          </div>
        </div>
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          Forgot your password? Don't worry, we'll reset it for you.
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
            data-shrink="false"
          >
            E-mail Address
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              autocomplete="username"
              autofocus=""
              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
              data-tc="email"
              name="email"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id ResetPasswordPage-submit-id MuiButton-containedPrimary-id"
          tabindex="0"
          type="submit"
        >
          <span
            class="MuiButton-label-id"
          >
            Send Instructions
          </span>
        </button>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Authentication / Reset password loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          Forgot your password? Don't worry, we'll reset it for you.
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
            data-shrink="false"
          >
            E-mail Address
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              autocomplete="username"
              autofocus=""
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
              data-tc="email"
              disabled=""
              name="email"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id ResetPasswordPage-submit-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
          disabled=""
          tabindex="-1"
          type="submit"
        >
          <span
            class="MuiButton-label-id"
          >
            Send Instructions
          </span>
        </button>
      </form>
    </div>
  </div>
</div>
`;

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

exports[`Storyshots Views / Authentication / Set up a new password default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          Please set up a new password.
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
            data-shrink="false"
          >
            New Password
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              autocomplete="none"
              autofocus=""
              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
              data-tc="password"
              name="password"
              type="password"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
            data-shrink="false"
          >
            Confirm Password
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              autocomplete="none"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
              data-tc="confirm-password"
              name="confirmPassword"
              type="password"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id NewPasswordPage-submit-id MuiButton-containedPrimary-id"
          tabindex="0"
          type="submit"
        >
          <span
            class="MuiButton-label-id"
          >
            Set new password
          </span>
        </button>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Authentication / Set up a new password loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          Please set up a new password.
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
            data-shrink="false"
          >
            New Password
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              autocomplete="none"
              autofocus=""
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
              data-tc="password"
              disabled=""
              name="password"
              type="password"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
            data-shrink="false"
          >
            Confirm Password
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              autocomplete="none"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
              data-tc="confirm-password"
              disabled=""
              name="confirmPassword"
              type="password"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id NewPasswordPage-submit-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
          disabled=""
          tabindex="-1"
          type="submit"
        >
          <span
            class="MuiButton-label-id"
          >
            Set new password
          </span>
        </button>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Authentication / Set up a new password too short error 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;position:relative;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <div
          class="NewPasswordPage-panel-id"
        >
          <div
            class="MuiTypography-root-id NewPasswordPage-errorText-id MuiTypography-caption-id"
          >
            This password is too short
          </div>
        </div>
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          Please set up a new password.
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
            data-shrink="false"
          >
            New Password
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              autocomplete="none"
              autofocus=""
              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
              data-tc="password"
              name="password"
              type="password"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
            data-shrink="false"
          >
            Confirm Password
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              autocomplete="none"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
              data-tc="confirm-password"
              name="confirmPassword"
              type="password"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id NewPasswordPage-submit-id MuiButton-containedPrimary-id"
          tabindex="0"
          type="submit"
        >
          <span
            class="MuiButton-label-id"
          >
            Set new password
          </span>
        </button>
      </form>
    </div>
  </div>
</div>
`;

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

exports[`Storyshots Views / Categories / Category list default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Categories
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create category
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Categories
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="SearchBar-root-id"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Category"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <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 TableCellHeader-root-id CategoryList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Category Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colSubcategories-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Subcategories
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colProducts-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    No. of Products
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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 MuiTableRow-hover-id"
              data-tc="id"
              data-tc-id="123123"
            >
              <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"
                data-tc="name"
              >
                Lorem ipsum dolor
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
              >
                2
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
              >
                4
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CategoryList-tableRow-id MuiTableRow-hover-id"
              data-tc="id"
              data-tc-id="876752"
            >
              <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"
                data-tc="name"
              >
                Mauris vehicula tortor vulputate
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
              >
                54
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
              >
                3
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CategoryList-tableRow-id MuiTableRow-hover-id"
              data-tc="id"
              data-tc-id="876542"
            >
              <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"
                data-tc="name"
              >
                Excepteur sint occaecat cupidatat non proident
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
              >
                2
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
              >
                6
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CategoryList-tableRow-id MuiTableRow-hover-id"
              data-tc="id"
              data-tc-id="875352"
            >
              <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"
                data-tc="name"
              >
                Ut enim ad minim veniam
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
              >
                6
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
              >
                12
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CategoryList-tableRow-id MuiTableRow-hover-id"
              data-tc="id"
              data-tc-id="865752"
            >
              <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"
                data-tc="name"
              >
                Duis aute irure dolor in reprehenderit
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
              >
                76
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
              >
                43
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CategoryList-tableRow-id MuiTableRow-hover-id"
              data-tc="id"
              data-tc-id="878752"
            >
              <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"
                data-tc="name"
              >
                Neque porro quisquam est
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
              >
                11
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
              >
                21
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Categories / Category list empty 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Categories
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create category
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Categories
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="SearchBar-root-id"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Category"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Category Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colSubcategories-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Subcategories
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colProducts-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    No. of Products
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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>
</div>
`;

exports[`Storyshots Views / Categories / Category list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Categories
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create category
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Categories
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="SearchBar-root-id"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Category"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <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 TableCellHeader-root-id CategoryList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Category Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colSubcategories-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Subcategories
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colProducts-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    No. of Products
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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"
              data-tc="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"
                data-tc="name"
              >
                <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>
</div>
`;

exports[`Storyshots Views / Categories / Create category When loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create New Category
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Category Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="RichTextEditor-root-id RichTextEditor-scroll-id"
            >
              <div
                class="RichTextEditor-input-id"
              >
                <div
                  class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                >
                  Category Description
                </div>
                <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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Search Engine Preview
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Edit website SEO
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Add search engine title and description to make this category easier to find
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Categories / Create category default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create New Category
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Category Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="RichTextEditor-root-id RichTextEditor-scroll-id"
            >
              <div
                class="RichTextEditor-input-id"
              >
                <div
                  class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                >
                  Category Description
                </div>
                <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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Search Engine Preview
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Edit website SEO
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Add search engine title and description to make this category easier to find
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Categories / Create category form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create New Category
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                  data-shrink="false"
                >
                  Category Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  This field is required
                </p>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="RichTextEditor-error-id RichTextEditor-root-id RichTextEditor-scroll-id"
            >
              <div
                class="RichTextEditor-input-id"
              >
                <div
                  class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                >
                  Category Description
                </div>
                <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
                class="MuiTypography-root-id RichTextEditor-error-id RichTextEditor-helperText-id MuiTypography-caption-id"
              >
                This field is required
              </div>
            </div>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Search Engine Preview
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Edit website SEO
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Add search engine title and description to make this category easier to find
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Categories / Update category default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Coffees
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Category Name
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="name"
                  type="text"
                  value="Coffees"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="RichTextEditor-root-id RichTextEditor-scroll-id"
          >
            <div
              class="RichTextEditor-input-id"
            >
              <div
                class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
              >
                Category Description
              </div>
              <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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Background Image (optional)
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Upload image
              </span>
            </button>
            <input
              accept="image/*"
              class="CategoryBackground-fileField-id"
              id="fileUpload"
              type="file"
            />
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="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"
                      />
                    </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 MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
              data-shrink="true"
            >
              Description
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
            >
              <textarea
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                name="backgroundImageAlt"
                rows="1"
              >
                Alt text
              </textarea>
              <textarea
                aria-hidden="true"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                readonly=""
                style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                tabindex="-1"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
            >
              (Optional)
            </p>
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Search Engine Preview
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Edit website SEO
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Add search engine title and description to make this category easier to find
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="TabContainer-root-id"
      >
        <span
          class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
        >
          Subcategories
        </span>
        <span
          class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
        >
          Products
        </span>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            All Subcategories
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Create subcategory
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="ResponsiveTable-root-id"
        >
          <table
            class="MuiTable-root-id"
          >
            <thead
              class="MuiTableHead-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-head-id"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colName-id TableCellHeader-disableClick-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Category Name
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colSubcategories-id TableCellHeader-disableClick-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Subcategories
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colProducts-id TableCellHeader-disableClick-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      No. of Products
                    </div>
                  </div>
                </th>
              </tr>
            </thead>
            <tfoot
              class="MuiTableFooter-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-footer-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                  colspan="4"
                >
                  <div
                    class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                  >
                    <div
                      class="TablePagination-spacer-id"
                    />
                    <div
                      class="TablePaginationActions-root-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                        data-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>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Categories / Update category form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Coffees
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Category Name
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="true"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="name"
                  type="text"
                  value="Coffees"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
              >
                This field is required
              </p>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="RichTextEditor-error-id RichTextEditor-root-id RichTextEditor-scroll-id"
          >
            <div
              class="RichTextEditor-input-id"
            >
              <div
                class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
              >
                Category Description
              </div>
              <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
              class="MuiTypography-root-id RichTextEditor-error-id RichTextEditor-helperText-id MuiTypography-caption-id"
            >
              This field is required
            </div>
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Background Image (optional)
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Upload image
              </span>
            </button>
            <input
              accept="image/*"
              class="CategoryBackground-fileField-id"
              id="fileUpload"
              type="file"
            />
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="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"
                      />
                    </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 MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
              data-shrink="true"
            >
              Description
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
            >
              <textarea
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                name="backgroundImageAlt"
                rows="1"
              >
                Alt text
              </textarea>
              <textarea
                aria-hidden="true"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                readonly=""
                style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                tabindex="-1"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
            >
              (Optional)
            </p>
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Search Engine Preview
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Edit website SEO
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Add search engine title and description to make this category easier to find
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="TabContainer-root-id"
      >
        <span
          class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
        >
          Subcategories
        </span>
        <span
          class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
        >
          Products
        </span>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            All Subcategories
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Create subcategory
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="ResponsiveTable-root-id"
        >
          <table
            class="MuiTable-root-id"
          >
            <thead
              class="MuiTableHead-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-head-id"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colName-id TableCellHeader-disableClick-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Category Name
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colSubcategories-id TableCellHeader-disableClick-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Subcategories
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colProducts-id TableCellHeader-disableClick-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      No. of Products
                    </div>
                  </div>
                </th>
              </tr>
            </thead>
            <tfoot
              class="MuiTableFooter-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-footer-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                  colspan="4"
                >
                  <div
                    class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                  >
                    <div
                      class="TablePagination-spacer-id"
                    />
                    <div
                      class="TablePaginationActions-root-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                        data-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>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Categories / Update category loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <span
            class="Skeleton-skeleton-id"
            style="width:10em"
          >
            ‌
          </span>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                data-shrink="false"
              >
                Category Name
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                  disabled=""
                  name="name"
                  type="text"
                  value=""
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="RichTextEditor-root-id RichTextEditor-scroll-id"
          >
            <div
              class="RichTextEditor-input-id"
            >
              <div
                class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
              >
                Category Description
              </div>
              <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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Background Image (optional)
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Upload image
              </span>
            </button>
            <input
              accept="image/*"
              class="CategoryBackground-fileField-id"
              id="fileUpload"
              type="file"
            />
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id"
        >
          <div>
            <div
              class="CategoryBackground-imageContainer-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </div>
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Search Engine Preview
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Edit website SEO
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Add search engine title and description to make this category easier to find
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="TabContainer-root-id"
      >
        <span
          class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
        >
          Subcategories
        </span>
        <span
          class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
        >
          Products
        </span>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            All Subcategories
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Create subcategory
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="ResponsiveTable-root-id"
        >
          <table
            class="MuiTable-root-id"
          >
            <thead
              class="MuiTableHead-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-head-id"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
                  scope="col"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 TableCellHeader-root-id CategoryList-colName-id TableCellHeader-disableClick-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Category Name
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colSubcategories-id TableCellHeader-disableClick-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Subcategories
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colProducts-id TableCellHeader-disableClick-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      No. of Products
                    </div>
                  </div>
                </th>
              </tr>
            </thead>
            <tfoot
              class="MuiTableFooter-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-footer-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                  colspan="4"
                >
                  <div
                    class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                  >
                    <div
                      class="TablePagination-spacer-id"
                    />
                    <div
                      class="TablePaginationActions-root-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        data-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 TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-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"
                data-tc="id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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"
                  data-tc="name"
                >
                  <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>
  </form>
</div>
`;

exports[`Storyshots Views / Categories / Update category no background 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Coffees
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Category Name
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="name"
                  type="text"
                  value="Coffees"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="RichTextEditor-root-id RichTextEditor-scroll-id"
          >
            <div
              class="RichTextEditor-input-id"
            >
              <div
                class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
              >
                Category Description
              </div>
              <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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Background Image (optional)
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Upload image
              </span>
            </button>
            <input
              accept="image/*"
              class="CategoryBackground-fileField-id"
              id="fileUpload"
              type="file"
            />
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="ImageUpload-photosIconContainer-id"
          tabindex="0"
        >
          <div
            class=""
          >
            <input
              accept="image/*"
              autocomplete="off"
              class="ImageUpload-fileField-id"
              multiple=""
              style="display:none"
              tabindex="-1"
              type="file"
            />
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id ImageUpload-photosIcon-id"
              focusable="false"
              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
              class="MuiTypography-root-id ImageUpload-uploadText-id MuiTypography-body1-id"
            >
              Drop here to upload
            </div>
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Search Engine Preview
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Edit website SEO
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Add search engine title and description to make this category easier to find
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="TabContainer-root-id"
      >
        <span
          class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
        >
          Subcategories
        </span>
        <span
          class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
        >
          Products
        </span>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            All Subcategories
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Create subcategory
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="ResponsiveTable-root-id"
        >
          <table
            class="MuiTable-root-id"
          >
            <thead
              class="MuiTableHead-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-head-id"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colName-id TableCellHeader-disableClick-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Category Name
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colSubcategories-id TableCellHeader-disableClick-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Subcategories
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colProducts-id TableCellHeader-disableClick-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      No. of Products
                    </div>
                  </div>
                </th>
              </tr>
            </thead>
            <tfoot
              class="MuiTableFooter-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-footer-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                  colspan="4"
                >
                  <div
                    class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                  >
                    <div
                      class="TablePagination-spacer-id"
                    />
                    <div
                      class="TablePaginationActions-root-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                        data-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>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Categories / Update category no products 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Coffees
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Category Name
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="name"
                  type="text"
                  value="Coffees"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="RichTextEditor-root-id RichTextEditor-scroll-id"
          >
            <div
              class="RichTextEditor-input-id"
            >
              <div
                class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
              >
                Category Description
              </div>
              <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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Background Image (optional)
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Upload image
              </span>
            </button>
            <input
              accept="image/*"
              class="CategoryBackground-fileField-id"
              id="fileUpload"
              type="file"
            />
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="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"
                      />
                    </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 MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
              data-shrink="true"
            >
              Description
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
            >
              <textarea
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                name="backgroundImageAlt"
                rows="1"
              >
                Alt text
              </textarea>
              <textarea
                aria-hidden="true"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                readonly=""
                style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                tabindex="-1"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
            >
              (Optional)
            </p>
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Search Engine Preview
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Edit website SEO
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Add search engine title and description to make this category easier to find
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="TabContainer-root-id"
      >
        <span
          class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
        >
          Subcategories
        </span>
        <span
          class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
        >
          Products
        </span>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Products in Coffees
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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"
        >
          <div
            class="ResponsiveTable-root-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 TablePagination-toolbar-id MuiToolbar-gutters-id"
                    >
                      <div
                        class="TablePagination-spacer-id"
                      />
                      <div
                        class="TablePaginationActions-root-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                          data-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>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Categories / Update category no subcategories 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Coffees
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Category Name
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="name"
                  type="text"
                  value="Coffees"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="RichTextEditor-root-id RichTextEditor-scroll-id"
          >
            <div
              class="RichTextEditor-input-id"
            >
              <div
                class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
              >
                Category Description
              </div>
              <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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Background Image (optional)
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Upload image
              </span>
            </button>
            <input
              accept="image/*"
              class="CategoryBackground-fileField-id"
              id="fileUpload"
              type="file"
            />
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="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"
                      />
                    </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 MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
              data-shrink="true"
            >
              Description
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
            >
              <textarea
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                name="backgroundImageAlt"
                rows="1"
              >
                Alt text
              </textarea>
              <textarea
                aria-hidden="true"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                readonly=""
                style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                tabindex="-1"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
            >
              (Optional)
            </p>
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Search Engine Preview
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Edit website SEO
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Add search engine title and description to make this category easier to find
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="TabContainer-root-id"
      >
        <span
          class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
        >
          Subcategories
        </span>
        <span
          class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
        >
          Products
        </span>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            All Subcategories
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Create subcategory
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="ResponsiveTable-root-id"
        >
          <table
            class="MuiTable-root-id"
          >
            <thead
              class="MuiTableHead-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-head-id"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colName-id TableCellHeader-disableClick-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Category Name
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colSubcategories-id TableCellHeader-disableClick-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Subcategories
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colProducts-id TableCellHeader-disableClick-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      No. of Products
                    </div>
                  </div>
                </th>
              </tr>
            </thead>
            <tfoot
              class="MuiTableFooter-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-footer-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                  colspan="4"
                >
                  <div
                    class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                  >
                    <div
                      class="TablePagination-spacer-id"
                    />
                    <div
                      class="TablePaginationActions-root-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                        data-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>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Categories / Update category products 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Coffees
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Category Name
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="name"
                  type="text"
                  value="Coffees"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="RichTextEditor-root-id RichTextEditor-scroll-id"
          >
            <div
              class="RichTextEditor-input-id"
            >
              <div
                class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
              >
                Category Description
              </div>
              <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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Background Image (optional)
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Upload image
              </span>
            </button>
            <input
              accept="image/*"
              class="CategoryBackground-fileField-id"
              id="fileUpload"
              type="file"
            />
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="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"
                      />
                    </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 MuiTextField-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
              data-shrink="true"
            >
              Description
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
            >
              <textarea
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                name="backgroundImageAlt"
                rows="1"
              >
                Alt text
              </textarea>
              <textarea
                aria-hidden="true"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                readonly=""
                style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                tabindex="-1"
              />
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="PrivateNotchedOutline-legend-id"
                  style="width:0"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
            </div>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
            >
              (Optional)
            </p>
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Search Engine Preview
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Edit website SEO
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Add search engine title and description to make this category easier to find
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="TabContainer-root-id"
      >
        <span
          class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
        >
          Subcategories
        </span>
        <span
          class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
        >
          Products
        </span>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Products in Coffees
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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"
        >
          <div
            class="ResponsiveTable-root-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 TablePagination-toolbar-id MuiToolbar-gutters-id"
                    >
                      <div
                        class="TablePagination-spacer-id"
                      />
                      <div
                        class="TablePaginationActions-root-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                          data-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 CategoryProductList-link-id MuiTableRow-hover-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 MuiAvatar-circle-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 CategoryProductList-link-id MuiTableRow-hover-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 MuiAvatar-circle-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 CategoryProductList-link-id MuiTableRow-hover-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 MuiAvatar-circle-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 CategoryProductList-link-id MuiTableRow-hover-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 MuiAvatar-circle-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 CategoryProductList-link-id MuiTableRow-hover-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 MuiAvatar-circle-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 CategoryProductList-link-id MuiTableRow-hover-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 MuiAvatar-circle-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 CategoryProductList-link-id MuiTableRow-hover-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 MuiAvatar-circle-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 CategoryProductList-link-id MuiTableRow-hover-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 MuiAvatar-circle-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 CategoryProductList-link-id MuiTableRow-hover-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 MuiAvatar-circle-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 CategoryProductList-link-id MuiTableRow-hover-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 MuiAvatar-circle-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>
    </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 ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Summer collection
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Summer collection"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="RichTextEditor-root-id RichTextEditor-scroll-id"
              >
                <div
                  class="RichTextEditor-input-id"
                >
                  <div
                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                  >
                    Description
                  </div>
                  <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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Background Image (optional)
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload image
                  </span>
                </button>
                <input
                  accept="image/*"
                  class="CollectionImage-fileField-id"
                  id="fileUpload"
                  type="file"
                />
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="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"
                          />
                        </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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Description
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    name="backgroundImageAlt"
                    rows="1"
                  >
                    Alt text
                  </textarea>
                  <textarea
                    aria-hidden="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    readonly=""
                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                    tabindex="-1"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                >
                  (Optional)
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Products in Summer collection
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign product
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id CollectionProducts-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
                      scope="col"
                    >
                      <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 TablePagination-toolbar-id MuiToolbar-gutters-id"
                      >
                        <div
                          class="TablePagination-spacer-id"
                        />
                        <div
                          class="TablePaginationActions-root-id"
                        >
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-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 MuiTableRow-hover-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 MuiAvatar-circle-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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CollectionProducts-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <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 MuiAvatar-circle-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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CollectionProducts-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <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 MuiAvatar-circle-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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CollectionProducts-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <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 MuiAvatar-circle-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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this collection easier to find
              </div>
            </div>
          </div>
        </div>
        <div>
          <div>
            <div
              class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
            >
              <div
                class="CardTitle-root-id"
              >
                <span
                  class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
                >
                  Visibility
                </span>
                <div
                  class="CardTitle-toolbar-id"
                />
              </div>
              <div
                class="CardTitle-children-id"
              />
              <hr
                class="CardTitle-hr-id"
              />
              <div
                class="MuiCardContent-root-id"
              >
                <div
                  class="MuiFormControl-root-id RadioSwitchField-formControl-id"
                >
                  <div
                    aria-label="isPublished"
                    class="MuiFormGroup-root-id"
                    role="radiogroup"
                  >
                    <label
                      class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            checked=""
                            class="PrivateSwitchBase-input-id"
                            name="isPublished"
                            type="radio"
                            value="true"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              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>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                      >
                        <p
                          class="VisibilityCard-label-id"
                        >
                          Visible
                        </p>
                        <span
                          class="VisibilityCard-secondLabel-id"
                        >
                          since Aug 25, 2018
                        </span>
                      </span>
                    </label>
                    <label
                      class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            name="isPublished"
                            type="radio"
                            value="false"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              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>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                      >
                        <p
                          class="VisibilityCard-label-id"
                        >
                          Hidden
                        </p>
                        <span
                          class="VisibilityCard-secondLabel-id"
                        />
                      </span>
                    </label>
                  </div>
                </div>
                <div
                  class="VisibilityCard-children-id"
                >
                  <div
                    class="FormSpacer-spacer-id"
                  />
                  <hr
                    class="Hr-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="isFeatured"
                        type="checkbox"
                        value="true"
                      />
                    </button>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      Feature on Homepage
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Collections / Collection details form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Summer collection
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Summer collection"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  This field is required
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="RichTextEditor-error-id RichTextEditor-root-id RichTextEditor-scroll-id"
              >
                <div
                  class="RichTextEditor-input-id"
                >
                  <div
                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                  >
                    Description
                  </div>
                  <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
                  class="MuiTypography-root-id RichTextEditor-error-id RichTextEditor-helperText-id MuiTypography-caption-id"
                >
                  This field is required
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Background Image (optional)
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload image
                  </span>
                </button>
                <input
                  accept="image/*"
                  class="CollectionImage-fileField-id"
                  id="fileUpload"
                  type="file"
                />
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="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"
                          />
                        </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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Description
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    name="backgroundImageAlt"
                    rows="1"
                  >
                    Alt text
                  </textarea>
                  <textarea
                    aria-hidden="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    readonly=""
                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                    tabindex="-1"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                >
                  (Optional)
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Products in Summer collection
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign product
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id CollectionProducts-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
                      scope="col"
                    >
                      <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 TablePagination-toolbar-id MuiToolbar-gutters-id"
                      >
                        <div
                          class="TablePagination-spacer-id"
                        />
                        <div
                          class="TablePaginationActions-root-id"
                        >
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-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 MuiTableRow-hover-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 MuiAvatar-circle-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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CollectionProducts-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <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 MuiAvatar-circle-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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CollectionProducts-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <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 MuiAvatar-circle-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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CollectionProducts-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <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 MuiAvatar-circle-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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this collection easier to find
              </div>
            </div>
          </div>
        </div>
        <div>
          <div>
            <div
              class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
            >
              <div
                class="CardTitle-root-id"
              >
                <span
                  class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
                >
                  Visibility
                </span>
                <div
                  class="CardTitle-toolbar-id"
                />
              </div>
              <div
                class="CardTitle-children-id"
              />
              <hr
                class="CardTitle-hr-id"
              />
              <div
                class="MuiCardContent-root-id"
              >
                <div
                  class="MuiFormControl-root-id RadioSwitchField-formControl-id"
                >
                  <div
                    aria-label="isPublished"
                    class="MuiFormGroup-root-id"
                    role="radiogroup"
                  >
                    <label
                      class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            checked=""
                            class="PrivateSwitchBase-input-id"
                            name="isPublished"
                            type="radio"
                            value="true"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              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>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                      >
                        <p
                          class="VisibilityCard-label-id"
                        >
                          Visible
                        </p>
                        <span
                          class="VisibilityCard-secondLabel-id"
                        >
                          since Aug 25, 2018
                        </span>
                      </span>
                    </label>
                    <label
                      class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            name="isPublished"
                            type="radio"
                            value="false"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              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>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                      >
                        <p
                          class="VisibilityCard-label-id"
                        >
                          Hidden
                        </p>
                        <span
                          class="VisibilityCard-secondLabel-id"
                        />
                      </span>
                    </label>
                  </div>
                </div>
                <div
                  class="FormSpacer-spacer-id"
                />
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorError-id"
                />
                <div
                  class="VisibilityCard-children-id"
                >
                  <div
                    class="FormSpacer-spacer-id"
                  />
                  <hr
                    class="Hr-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="isFeatured"
                        type="checkbox"
                        value="true"
                      />
                    </button>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      Feature on Homepage
                    </span>
                  </label>
                </div>
              </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 ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <span
            class="Skeleton-skeleton-id"
            style="width:10em"
          >
            ‌
          </span>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="RichTextEditor-root-id RichTextEditor-scroll-id"
              >
                <div
                  class="RichTextEditor-input-id"
                >
                  <div
                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                  >
                    Description
                  </div>
                  <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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Background Image (optional)
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload image
                  </span>
                </button>
                <input
                  accept="image/*"
                  class="CollectionImage-fileField-id"
                  id="fileUpload"
                  type="file"
                />
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div>
                <div
                  class="CollectionImage-imageContainer-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                  >
                    ‌
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign product
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id CollectionProducts-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
                      scope="col"
                    >
                      <button
                        class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 TablePagination-toolbar-id MuiToolbar-gutters-id"
                      >
                        <div
                          class="TablePagination-spacer-id"
                        />
                        <div
                          class="TablePaginationActions-root-id"
                        >
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-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 Checkbox-root-id MuiButtonBase-disabled-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-circle-id TableCellAvatar-avatar-id MuiAvatar-colorDefault-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"
                            />
                          </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 MuiIconButton-root-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this collection easier to find
              </div>
            </div>
          </div>
        </div>
        <div>
          <div>
            <div
              class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
            >
              <div
                class="CardTitle-root-id"
              >
                <span
                  class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
                >
                  Visibility
                </span>
                <div
                  class="CardTitle-toolbar-id"
                />
              </div>
              <div
                class="CardTitle-children-id"
              />
              <hr
                class="CardTitle-hr-id"
              />
              <div
                class="MuiCardContent-root-id"
              >
                <div
                  class="MuiFormControl-root-id RadioSwitchField-formControl-id"
                >
                  <div
                    aria-label="isPublished"
                    class="MuiFormGroup-root-id"
                    role="radiogroup"
                  >
                    <label
                      class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id MuiFormControlLabel-disabled-id"
                    >
                      <span
                        aria-disabled="true"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        tabindex="-1"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            disabled=""
                            name="isPublished"
                            type="radio"
                            value="true"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              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>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                      >
                        <p
                          class="VisibilityCard-label-id"
                        >
                          Visible
                        </p>
                        <span
                          class="VisibilityCard-secondLabel-id"
                        />
                      </span>
                    </label>
                    <label
                      class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id MuiFormControlLabel-disabled-id"
                    >
                      <span
                        aria-disabled="true"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        tabindex="-1"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            checked=""
                            class="PrivateSwitchBase-input-id"
                            disabled=""
                            name="isPublished"
                            type="radio"
                            value="false"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              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>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                      >
                        <p
                          class="VisibilityCard-label-id"
                        >
                          Hidden
                        </p>
                        <span
                          class="VisibilityCard-secondLabel-id"
                        />
                      </span>
                    </label>
                  </div>
                </div>
                <div
                  class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
                >
                  Set publication date
                </div>
                <div
                  class="VisibilityCard-children-id"
                >
                  <div
                    class="FormSpacer-spacer-id"
                  />
                  <hr
                    class="Hr-root-id"
                  />
                  <label
                    class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                  >
                    <button
                      class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id Checkbox-checked-id Checkbox-disabled-id"
                        disabled=""
                        name="isFeatured"
                        type="checkbox"
                        value="true"
                      />
                    </button>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      Feature on Homepage
                    </span>
                  </label>
                </div>
              </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 ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Summer collection
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value="Summer collection"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="RichTextEditor-root-id RichTextEditor-scroll-id"
              >
                <div
                  class="RichTextEditor-input-id"
                >
                  <div
                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                  >
                    Description
                  </div>
                  <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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Background Image (optional)
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload image
                  </span>
                </button>
                <input
                  accept="image/*"
                  class="CollectionImage-fileField-id"
                  id="fileUpload"
                  type="file"
                />
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="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"
                          />
                        </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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Description
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    name="backgroundImageAlt"
                    rows="1"
                  >
                    Alt text
                  </textarea>
                  <textarea
                    aria-hidden="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    readonly=""
                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                    tabindex="-1"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                >
                  (Optional)
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Products in Summer collection
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign product
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id CollectionProducts-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colName-id"
                      scope="col"
                    >
                      <span
                        class="CollectionProducts-colNameLabel-id"
                      >
                        Name
                      </span>
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colType-id"
                      scope="col"
                    >
                      Type
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colPublished-id"
                      scope="col"
                    >
                      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 TablePagination-toolbar-id MuiToolbar-gutters-id"
                      >
                        <div
                          class="TablePagination-spacer-id"
                        />
                        <div
                          class="TablePaginationActions-root-id"
                        >
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-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>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this collection easier to find
              </div>
            </div>
          </div>
        </div>
        <div>
          <div>
            <div
              class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
            >
              <div
                class="CardTitle-root-id"
              >
                <span
                  class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
                >
                  Visibility
                </span>
                <div
                  class="CardTitle-toolbar-id"
                />
              </div>
              <div
                class="CardTitle-children-id"
              />
              <hr
                class="CardTitle-hr-id"
              />
              <div
                class="MuiCardContent-root-id"
              >
                <div
                  class="MuiFormControl-root-id RadioSwitchField-formControl-id"
                >
                  <div
                    aria-label="isPublished"
                    class="MuiFormGroup-root-id"
                    role="radiogroup"
                  >
                    <label
                      class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id MuiFormControlLabel-disabled-id"
                    >
                      <span
                        aria-disabled="true"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        tabindex="-1"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            checked=""
                            class="PrivateSwitchBase-input-id"
                            disabled=""
                            name="isPublished"
                            type="radio"
                            value="true"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-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>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                      >
                        <p
                          class="VisibilityCard-label-id"
                        >
                          Visible
                        </p>
                        <span
                          class="VisibilityCard-secondLabel-id"
                        >
                          since Aug 25, 2018
                        </span>
                      </span>
                    </label>
                    <label
                      class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id MuiFormControlLabel-disabled-id"
                    >
                      <span
                        aria-disabled="true"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        tabindex="-1"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            disabled=""
                            name="isPublished"
                            type="radio"
                            value="false"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-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>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                      >
                        <p
                          class="VisibilityCard-label-id"
                        >
                          Hidden
                        </p>
                        <span
                          class="VisibilityCard-secondLabel-id"
                        />
                      </span>
                    </label>
                  </div>
                </div>
                <div
                  class="VisibilityCard-children-id"
                >
                  <div
                    class="FormSpacer-spacer-id"
                  />
                  <hr
                    class="Hr-root-id"
                  />
                  <label
                    class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                  >
                    <button
                      class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id Checkbox-checked-id Checkbox-disabled-id"
                        disabled=""
                        name="isFeatured"
                        type="checkbox"
                        value="true"
                      />
                    </button>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      Feature on Homepage
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Collections / Collection list default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Collections
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create collection
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Collections
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Collection"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <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 TableCellHeader-root-id CollectionList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Collection Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CollectionList-colProducts-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    No. of Products
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CollectionList-colAvailability-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Availability
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="5"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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 CollectionList-tableRow-id MuiTableRow-hover-id"
              data-tc="id"
              data-tc-id="Q29sbGVjdGlvbjox"
            >
              <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"
                data-tc="name"
              >
                Summer collection
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
              >
                4
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
                data-tc="published"
                data-tc-published="true"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
              data-tc="id"
              data-tc-id="Q29sbGVjdGlvbjoy"
            >
              <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"
                data-tc="name"
              >
                Winter sale
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
              >
                4
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
                data-tc="published"
                data-tc-published="true"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
              data-tc="id"
              data-tc-id="Q29sbGVjdGlvbjoz"
            >
              <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"
                data-tc="name"
              >
                Vintage vibes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
              >
                4
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
                data-tc="published"
                data-tc-published="true"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
              data-tc="id"
              data-tc-id="Q29sbGVjdGlvbjoa"
            >
              <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"
                data-tc="name"
              >
                Merry Christmas
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
              >
                4
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
                data-tc="published"
                data-tc-published="true"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
              data-tc="id"
              data-tc-id="Q29sbGVjdGlvbjob"
            >
              <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"
                data-tc="name"
              >
                80s Miami
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
              >
                4
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
                data-tc="published"
                data-tc-published="true"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
              data-tc="id"
              data-tc-id="Q29sbGVjdGlvbjoc"
            >
              <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"
                data-tc="name"
              >
                Yellow Submarine 2019
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
              >
                4
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
                data-tc="published"
                data-tc-published="true"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Collections / Collection list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Collections
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
            disabled=""
            tabindex="-1"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create collection
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Collections
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Collection"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 TableCellHeader-root-id CollectionList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Collection Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CollectionList-colProducts-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    No. of Products
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CollectionList-colAvailability-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Availability
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="5"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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 TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-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"
              data-tc="id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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"
                data-tc="name"
              >
                <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"
                data-tc="published"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Collections / Collection list no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Collections
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create collection
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Collections
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Collection"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CollectionList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Collection Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CollectionList-colProducts-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    No. of Products
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CollectionList-colAvailability-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Availability
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="5"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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 collections found
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Collections / Create collection default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Add Collection
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="RichTextEditor-root-id RichTextEditor-scroll-id"
              >
                <div
                  class="RichTextEditor-input-id"
                >
                  <div
                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                  >
                    Description
                  </div>
                  <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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Background Image (optional)
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload image
                  </span>
                </button>
                <input
                  accept="image/*"
                  class="CollectionImage-fileField-id"
                  id="fileUpload"
                  type="file"
                />
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ImageUpload-photosIconContainer-id"
              tabindex="0"
            >
              <div
                class=""
              >
                <input
                  accept="image/*"
                  autocomplete="off"
                  class="ImageUpload-fileField-id"
                  multiple=""
                  style="display:none"
                  tabindex="-1"
                  type="file"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id ImageUpload-photosIcon-id"
                  focusable="false"
                  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
                  class="MuiTypography-root-id ImageUpload-uploadText-id MuiTypography-body1-id"
                >
                  Drop here to upload
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this collection easier to find
              </div>
            </div>
          </div>
        </div>
        <div>
          <div>
            <div
              class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
            >
              <div
                class="CardTitle-root-id"
              >
                <span
                  class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
                >
                  Availability
                </span>
                <div
                  class="CardTitle-toolbar-id"
                />
              </div>
              <div
                class="CardTitle-children-id"
              />
              <hr
                class="CardTitle-hr-id"
              />
              <div
                class="MuiCardContent-root-id"
              >
                <div
                  class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
                >
                  <div
                    class="CardTitle-root-id"
                  >
                    <span
                      class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
                    >
                      Visibility
                    </span>
                    <div
                      class="CardTitle-toolbar-id"
                    />
                  </div>
                  <div
                    class="CardTitle-children-id"
                  />
                  <hr
                    class="CardTitle-hr-id"
                  />
                  <div
                    class="MuiCardContent-root-id"
                  >
                    <div
                      class="MuiFormControl-root-id RadioSwitchField-formControl-id"
                    >
                      <div
                        aria-label="isPublished"
                        class="MuiFormGroup-root-id"
                        role="radiogroup"
                      >
                        <label
                          class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                        >
                          <span
                            aria-disabled="false"
                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <input
                                class="PrivateSwitchBase-input-id"
                                name="isPublished"
                                type="radio"
                                value="true"
                              />
                              <div
                                class="PrivateRadioButtonIcon-root-id"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id"
                                  focusable="false"
                                  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>
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                  focusable="false"
                                  role="presentation"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                  />
                                </svg>
                              </div>
                            </span>
                          </span>
                          <span
                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                          >
                            <p
                              class="VisibilityCard-label-id"
                            >
                              Visible
                            </p>
                            <span
                              class="VisibilityCard-secondLabel-id"
                            />
                          </span>
                        </label>
                        <label
                          class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                        >
                          <span
                            aria-disabled="false"
                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <input
                                checked=""
                                class="PrivateSwitchBase-input-id"
                                name="isPublished"
                                type="radio"
                                value="false"
                              />
                              <div
                                class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id"
                                  focusable="false"
                                  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>
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                  focusable="false"
                                  role="presentation"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                  />
                                </svg>
                              </div>
                            </span>
                          </span>
                          <span
                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                          >
                            <p
                              class="VisibilityCard-label-id"
                            >
                              Hidden
                            </p>
                            <span
                              class="VisibilityCard-secondLabel-id"
                            />
                          </span>
                        </label>
                      </div>
                    </div>
                    <div
                      class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
                    >
                      Set publication date
                    </div>
                    <div
                      class="VisibilityCard-children-id"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Add Collection
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                  data-shrink="false"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  This field is required
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="RichTextEditor-error-id RichTextEditor-root-id RichTextEditor-scroll-id"
              >
                <div
                  class="RichTextEditor-input-id"
                >
                  <div
                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                  >
                    Description
                  </div>
                  <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
                  class="MuiTypography-root-id RichTextEditor-error-id RichTextEditor-helperText-id MuiTypography-caption-id"
                >
                  This field is required
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Background Image (optional)
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload image
                  </span>
                </button>
                <input
                  accept="image/*"
                  class="CollectionImage-fileField-id"
                  id="fileUpload"
                  type="file"
                />
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ImageUpload-photosIconContainer-id"
              tabindex="0"
            >
              <div
                class=""
              >
                <input
                  accept="image/*"
                  autocomplete="off"
                  class="ImageUpload-fileField-id"
                  multiple=""
                  style="display:none"
                  tabindex="-1"
                  type="file"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id ImageUpload-photosIcon-id"
                  focusable="false"
                  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
                  class="MuiTypography-root-id ImageUpload-uploadText-id MuiTypography-body1-id"
                >
                  Drop here to upload
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this collection easier to find
              </div>
            </div>
          </div>
        </div>
        <div>
          <div>
            <div
              class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
            >
              <div
                class="CardTitle-root-id"
              >
                <span
                  class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
                >
                  Availability
                </span>
                <div
                  class="CardTitle-toolbar-id"
                />
              </div>
              <div
                class="CardTitle-children-id"
              />
              <hr
                class="CardTitle-hr-id"
              />
              <div
                class="MuiCardContent-root-id"
              >
                <div
                  class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
                >
                  <div
                    class="CardTitle-root-id"
                  >
                    <span
                      class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
                    >
                      Visibility
                    </span>
                    <div
                      class="CardTitle-toolbar-id"
                    />
                  </div>
                  <div
                    class="CardTitle-children-id"
                  />
                  <hr
                    class="CardTitle-hr-id"
                  />
                  <div
                    class="MuiCardContent-root-id"
                  >
                    <div
                      class="MuiFormControl-root-id RadioSwitchField-formControl-id"
                    >
                      <div
                        aria-label="isPublished"
                        class="MuiFormGroup-root-id"
                        role="radiogroup"
                      >
                        <label
                          class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                        >
                          <span
                            aria-disabled="false"
                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <input
                                class="PrivateSwitchBase-input-id"
                                name="isPublished"
                                type="radio"
                                value="true"
                              />
                              <div
                                class="PrivateRadioButtonIcon-root-id"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id"
                                  focusable="false"
                                  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>
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                  focusable="false"
                                  role="presentation"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                  />
                                </svg>
                              </div>
                            </span>
                          </span>
                          <span
                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                          >
                            <p
                              class="VisibilityCard-label-id"
                            >
                              Visible
                            </p>
                            <span
                              class="VisibilityCard-secondLabel-id"
                            />
                          </span>
                        </label>
                        <label
                          class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                        >
                          <span
                            aria-disabled="false"
                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <input
                                checked=""
                                class="PrivateSwitchBase-input-id"
                                name="isPublished"
                                type="radio"
                                value="false"
                              />
                              <div
                                class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id"
                                  focusable="false"
                                  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>
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                  focusable="false"
                                  role="presentation"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                  />
                                </svg>
                              </div>
                            </span>
                          </span>
                          <span
                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                          >
                            <p
                              class="VisibilityCard-label-id"
                            >
                              Hidden
                            </p>
                            <span
                              class="VisibilityCard-secondLabel-id"
                            />
                          </span>
                        </label>
                      </div>
                    </div>
                    <div
                      class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
                    >
                      Set publication date
                    </div>
                    <div
                      class="FormSpacer-spacer-id"
                    />
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorError-id"
                    />
                    <div
                      class="VisibilityCard-children-id"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Collections / Create collection loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Add Collection
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="RichTextEditor-root-id RichTextEditor-scroll-id"
              >
                <div
                  class="RichTextEditor-input-id"
                >
                  <div
                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                  >
                    Description
                  </div>
                  <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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Background Image (optional)
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload image
                  </span>
                </button>
                <input
                  accept="image/*"
                  class="CollectionImage-fileField-id"
                  id="fileUpload"
                  type="file"
                />
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ImageUpload-photosIconContainer-id"
              tabindex="0"
            >
              <div
                class=""
              >
                <input
                  accept="image/*"
                  autocomplete="off"
                  class="ImageUpload-fileField-id"
                  multiple=""
                  style="display:none"
                  tabindex="-1"
                  type="file"
                />
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id ImageUpload-photosIcon-id"
                  focusable="false"
                  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
                  class="MuiTypography-root-id ImageUpload-uploadText-id MuiTypography-body1-id"
                >
                  Drop here to upload
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this collection easier to find
              </div>
            </div>
          </div>
        </div>
        <div>
          <div>
            <div
              class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
            >
              <div
                class="CardTitle-root-id"
              >
                <span
                  class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
                >
                  Availability
                </span>
                <div
                  class="CardTitle-toolbar-id"
                />
              </div>
              <div
                class="CardTitle-children-id"
              />
              <hr
                class="CardTitle-hr-id"
              />
              <div
                class="MuiCardContent-root-id"
              >
                <div
                  class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
                >
                  <div
                    class="CardTitle-root-id"
                  >
                    <span
                      class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
                    >
                      Visibility
                    </span>
                    <div
                      class="CardTitle-toolbar-id"
                    />
                  </div>
                  <div
                    class="CardTitle-children-id"
                  />
                  <hr
                    class="CardTitle-hr-id"
                  />
                  <div
                    class="MuiCardContent-root-id"
                  >
                    <div
                      class="MuiFormControl-root-id RadioSwitchField-formControl-id"
                    >
                      <div
                        aria-label="isPublished"
                        class="MuiFormGroup-root-id"
                        role="radiogroup"
                      >
                        <label
                          class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id MuiFormControlLabel-disabled-id"
                        >
                          <span
                            aria-disabled="true"
                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            tabindex="-1"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <input
                                class="PrivateSwitchBase-input-id"
                                disabled=""
                                name="isPublished"
                                type="radio"
                                value="true"
                              />
                              <div
                                class="PrivateRadioButtonIcon-root-id"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id"
                                  focusable="false"
                                  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>
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                  focusable="false"
                                  role="presentation"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                  />
                                </svg>
                              </div>
                            </span>
                          </span>
                          <span
                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                          >
                            <p
                              class="VisibilityCard-label-id"
                            >
                              Visible
                            </p>
                            <span
                              class="VisibilityCard-secondLabel-id"
                            />
                          </span>
                        </label>
                        <label
                          class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id MuiFormControlLabel-disabled-id"
                        >
                          <span
                            aria-disabled="true"
                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            tabindex="-1"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <input
                                checked=""
                                class="PrivateSwitchBase-input-id"
                                disabled=""
                                name="isPublished"
                                type="radio"
                                value="false"
                              />
                              <div
                                class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id"
                                  focusable="false"
                                  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>
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                  focusable="false"
                                  role="presentation"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                  />
                                </svg>
                              </div>
                            </span>
                          </span>
                          <span
                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                          >
                            <p
                              class="VisibilityCard-label-id"
                            >
                              Hidden
                            </p>
                            <span
                              class="VisibilityCard-secondLabel-id"
                            />
                          </span>
                        </label>
                      </div>
                    </div>
                    <div
                      class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
                    >
                      Set publication date
                    </div>
                    <div
                      class="VisibilityCard-children-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 ConfigurationPage-header-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Configuration
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="ConfigurationPage-configurationCategory-id"
    >
      <div
        class="ConfigurationPage-configurationLabel-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          Attributes and Product Typess
        </div>
      </div>
      <div
        class="ConfigurationPage-configurationItem-id"
      >
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-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="M37.9487 10.4808C37.9487 14.4459 34.7343 17.6603 30.7692 17.6603C26.8041 17.6603 23.5897 14.4459 23.5897 10.4808C23.5897 6.51565 26.8041 3.30128 30.7692 3.30128C34.7343 3.30128 37.9487 6.51565 37.9487 10.4808ZM40 10.4808C40 15.5788 35.8672 19.7115 30.7692 19.7115C25.6712 19.7115 21.5385 15.5788 21.5385 10.4808C21.5385 5.38275 25.6712 1.25 30.7692 1.25C35.8672 1.25 40 5.38275 40 10.4808ZM16.4103 9.45484H2.05128V23.8138H16.4103V9.45484ZM0 7.40356V25.8651H18.4615V7.40356H0ZM24.6154 20.7371L13.9566 39.1987H35.2741L24.6154 20.7371ZM24.6154 24.8397L17.5095 37.1474H31.7212L24.6154 24.8397Z"
                  fill="#06847B"
                  fill-rule="evenodd"
                />
              </svg>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
              >
                Attributes
              </div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
              >
                Determine attributes used to create product types
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-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="M0 6.5V33L20 40L40 33V6.5L20 0L0 6.5ZM2.5 8.69935V31.2263L18.75 36.9138V14.3869L2.5 8.69935ZM21.25 14.3869V36.9138L37.5 31.2263V8.69935L21.25 14.3869ZM34.1436 7.22539L20 2.62872L5.8564 7.22539L20 12.1756L34.1436 7.22539Z"
                  fill="#06847B"
                  fill-rule="evenodd"
                />
              </svg>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
              >
                Product Types
              </div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
              >
                Define types of products you sell
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="ConfigurationPage-configurationCategory-id"
    >
      <div
        class="ConfigurationPage-configurationLabel-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          Product Settings
        </div>
      </div>
      <div
        class="ConfigurationPage-configurationItem-id"
      >
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-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="M0 0H29.3333V12.2666H40V32.9751L32.9752 40H7.4667V19.8248L9.15816 18.1333H0V0ZM27.2 3.35694V12.2666H15.0249L11.2915 16H2.13333V3.07966L14.9333 9.73563L27.2 3.35694ZM24.929 2.13333H4.93756L14.9333 7.33111L24.929 2.13333ZM12.2667 18.1333H12.1752L11.1085 19.2H31.5582L36.3582 14.4H15.9085L12.2667 18.0418V18.1333ZM32.5334 21.2418L37.8667 15.9085V32.0915L32.5334 37.4248V21.2418ZM9.60003 21.3333V37.8666H30.4V21.3333H9.60003ZM18.6667 30.9333H26.6667V28.8H18.6667V30.9333ZM18.6667 34.6666H25.0667V32.5333H18.6667V34.6666Z"
                  fill="#06847B"
                  fill-rule="evenodd"
                />
              </svg>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
              >
                Shipping Methods
              </div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
              >
                Manage how you ship out orders
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-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="M2 0H34.6316V21.0526H32.5263V2.10526H4.10526V37.8947H32.5263V35.2632H34.6316V40H2V0ZM8.31579 20H11.4737V23.1579H8.31579V20ZM16.7368 20H13.5789V23.1579H16.7368V20ZM18.8421 20H22V23.1579H18.8421V20ZM27.2632 20H24.1053V23.1579H27.2632V20ZM8.31579 25.2632H11.4737V28.4211H8.31579V25.2632ZM16.7368 25.2632H13.5789V28.4211H16.7368V25.2632ZM18.8421 25.2632H22V28.4211H18.8421V25.2632ZM11.4737 30.5263H8.31579V33.6842H11.4737V30.5263ZM13.5789 30.5263H16.7368V33.6842H13.5789V30.5263ZM22 30.5263H18.8421V33.6842H22V30.5263ZM26.2105 9.47368H10.4211V14.7368H26.2105V9.47368ZM8.31579 7.36842V16.8421H28.3158V7.36842H8.31579ZM37.7895 30.5263H34.6316V33.6842H37.7895V30.5263ZM28.3158 24.2105H31.4737V27.3684H28.3158V24.2105ZM29.0602 34.4285L38.5339 24.9548L37.0452 23.4662L27.5715 32.9398L29.0602 34.4285Z"
                  fill="#06847B"
                  fill-rule="evenodd"
                />
              </svg>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
              >
                Taxes
              </div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
              >
                Manage how your store charges tax
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="ConfigurationPage-configurationCategory-id"
    >
      <div
        class="ConfigurationPage-configurationLabel-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          Staff Settings
        </div>
      </div>
      <div
        class="ConfigurationPage-configurationItem-id"
      >
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-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="M20 8C20 11.3137 17.3137 14 14 14C10.6863 14 8 11.3137 8 8C8 4.68629 10.6863 2 14 2C17.3137 2 20 4.68629 20 8ZM22 8C22 12.4183 18.4183 16 14 16C9.58172 16 6 12.4183 6 8C6 3.58172 9.58172 0 14 0C18.4183 0 22 3.58172 22 8ZM2.31344 38L4.94331 20H22.0567L23.0395 26.7268L23 27H23.0794L24.6866 38H2.31344ZM25.1006 27L27 40H0L3.21429 18H23.7857L24.0447 19.7729L25.0238 13H31.5H37.9762L40 27H25.1006ZM31.5 13C28.4624 13 26 10.5376 26 7.5C26 4.46243 28.4624 2 31.5 2C34.5376 2 37 4.46243 37 7.5C37 10.5376 34.5376 13 31.5 13ZM31.5 11C33.433 11 35 9.433 35 7.5C35 5.567 33.433 4 31.5 4C29.567 4 28 5.567 28 7.5C28 9.433 29.567 11 31.5 11ZM25.3099 25L26.7555 15H36.2445L37.6901 25H25.3099Z"
                  fill="#06847B"
                  fill-rule="evenodd"
                />
              </svg>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
              >
                Staff Members
              </div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
              >
                Manage your employees and their permissions
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="ConfigurationPage-configurationCategory-id"
    >
      <div
        class="ConfigurationPage-configurationLabel-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          Miscellaneous
        </div>
      </div>
      <div
        class="ConfigurationPage-configurationItem-id"
      >
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-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="M35.9075 11.3232C40.8772 19.931 37.928 30.9378 29.3202 35.9075C20.7123 40.8772 9.70553 37.928 4.7358 29.3201C-0.233933 20.7123 2.71533 9.70553 11.3232 4.7358C19.931 -0.233933 30.9378 2.71533 35.9075 11.3232ZM37.6393 10.3233C43.1612 19.8876 39.8842 32.1173 30.32 37.6393C20.7557 43.1612 8.52596 39.8842 3.00404 30.32C-2.51789 20.7557 0.759069 8.52596 10.3233 3.00404C19.8876 -2.51789 32.1173 0.759069 37.6393 10.3233ZM14.9402 14.5709L31.0335 9.60975L26.0724 25.7031L21.7789 21.4096C22.3117 20.6975 22.2544 19.6836 21.6072 19.0364C20.9599 18.3891 19.946 18.3319 19.2339 18.8647L14.9402 14.5709ZM19.0359 21.6077C18.3884 20.9602 18.3314 19.946 18.8646 19.2338L14.571 14.9402L9.6098 31.0335L25.7032 26.0723L21.4097 21.7789C20.6976 22.3122 19.6833 22.2551 19.0359 21.6077ZM18.7012 15.504L28.0085 12.6348L25.1393 21.9421L18.7012 15.504Z"
                  fill="#06847B"
                  fill-rule="evenodd"
                />
              </svg>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
              >
                Navigation
              </div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
              >
                Define how users can navigate through your store
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-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="M31.8208 5.55248L30.7926 8.35093L31.545 9.18475C33.147 10.9601 34.3637 13.1054 35.0581 15.4817L35.3837 16.596L38.1395 17.0712V23.1349L35.3838 23.6101L35.0582 24.7244C34.4073 26.9518 33.2976 28.9763 31.8417 30.6834L31.1357 31.5111L32.2146 34.4475L26.7281 37.6084L24.9142 35.4411L23.7814 35.7276C22.572 36.0334 21.3058 36.1961 20 36.1961C18.6942 36.1961 17.428 36.0334 16.2186 35.7276L15.0858 35.4411L13.2719 37.6084L7.78535 34.4475L8.86424 31.5111L8.15831 30.6834C6.70243 28.9763 5.59267 26.9518 4.94182 24.7244L4.61622 23.6101L1.86047 23.1349L1.86047 17.0712L4.61625 16.596L4.94186 15.4817C5.63625 13.1054 6.85296 10.9601 8.45495 9.18475L9.20736 8.35093L8.17916 5.55248L13.6657 2.39164L15.5348 4.62486L16.6397 4.37851C17.7208 4.1375 18.8448 4.01018 20 4.01018C21.1552 4.01018 22.2792 4.1375 23.3603 4.37851L24.4652 4.62486L26.3343 2.39164L31.8208 5.55248ZM40 24.702V15.5042L36.8439 14.9599C36.0699 12.311 34.7134 9.91885 32.9263 7.93836L34.1077 4.72285L25.9098 0L23.7651 2.56262C22.5521 2.2922 21.2924 2.14972 20 2.14972C18.7076 2.14972 17.4479 2.2922 16.2349 2.56262L14.0902 0L5.89227 4.72285L7.07371 7.93836C5.28657 9.91885 3.93009 12.311 3.15607 14.9599L0 15.5042V24.702L3.15603 25.2462C3.88152 27.7291 5.11876 29.9864 6.74273 31.8906L5.49846 35.2772L13.6964 40L15.7625 37.5313C17.1197 37.8744 18.539 38.0565 20 38.0565C21.461 38.0565 22.8803 37.8744 24.2375 37.5313L26.3036 40L34.5015 35.2772L33.2573 31.8906C34.8812 29.9864 36.1185 27.7291 36.844 25.2462L40 24.702ZM28.4425 20C28.4425 24.6627 24.6627 28.4425 20 28.4425C15.3373 28.4425 11.5574 24.6627 11.5574 20C11.5574 15.3373 15.3373 11.5574 20 11.5574C24.6627 11.5574 28.4425 15.3373 28.4425 20ZM30.303 20C30.303 25.6902 25.6902 30.303 20 30.303C14.3097 30.303 9.69693 25.6902 9.69693 20C9.69693 14.3097 14.3097 9.69693 20 9.69693C25.6902 9.69693 30.303 14.3097 30.303 20Z"
                  fill="#06847B"
                  fill-rule="evenodd"
                />
              </svg>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
              >
                Site Settings
              </div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
              >
                View and update your site settings
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-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="M18.179 1.20349H32.8068L40 8.39671V34.0421H24.6825V32.0528H38.0107V9.2207L37.79 9H32V3.20999L31.9828 3.19278H20.1683V7.15606H18.179V1.20349ZM0 6.16142H14.6278L21.821 13.3546V39H20.8264H0V6.16142ZM14 8.34692V15H19.8317V37.0107H1.98929V8.15071H13.8038L14 8.34692ZM18 19H4V22H18V19ZM4 24H18V27H4V24ZM35 12H25V15H35V12ZM25 17H35V28H25V17ZM18 29H4V32H18V29Z"
                  fill="#06847B"
                  fill-rule="evenodd"
                />
              </svg>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
              >
                Pages
              </div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
              >
                Manage and add additional pages
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-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>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
              >
                Plugins
              </div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
              >
                View and update your plugins and their settings.
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-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.1012 3.96887C22.1012 5.12931 21.1604 6.07004 20 6.07004C18.8396 6.07004 17.8988 5.12931 17.8988 3.96887C17.8988 2.80843 18.8396 1.8677 20 1.8677C21.1604 1.8677 22.1012 2.80843 22.1012 3.96887ZM20.856 7.84519C22.6365 7.45378 23.9689 5.86692 23.9689 3.96887C23.9689 1.77692 22.1919 0 20 0C17.8081 0 16.0311 1.77692 16.0311 3.96887C16.0311 5.81119 17.2864 7.36033 18.9883 7.80765V10.1167H5.29183V16.3424H0V28.7938H5.29183V35.0195H34.7082V28.7938H40V16.3424H34.7082V10.1167H20.856V7.84519ZM34.7082 26.9261V18.2101H38.1323V26.9261H34.7082ZM5.29183 18.2101H1.8677V26.9261H5.29183V18.2101ZM12.2986 26.3603H27.7916V33.1517H32.8405V11.9844H7.15953V33.1517H12.2986V26.3603ZM14.1663 33.1517V28.228H25.9239V33.1517H14.1663ZM16.6537 19.6887C16.6537 20.8151 15.7125 21.7899 14.4747 21.7899C13.2369 21.7899 12.2957 20.8151 12.2957 19.6887C12.2957 18.5623 13.2369 17.5875 14.4747 17.5875C15.7125 17.5875 16.6537 18.5623 16.6537 19.6887ZM18.5214 19.6887C18.5214 21.8807 16.7096 23.6576 14.4747 23.6576C12.2398 23.6576 10.428 21.8807 10.428 19.6887C10.428 17.4968 12.2398 15.7198 14.4747 15.7198C16.7096 15.7198 18.5214 17.4968 18.5214 19.6887ZM25.4475 21.7899C26.6079 21.7899 27.5486 20.8492 27.5486 19.6887C27.5486 18.5283 26.6079 17.5875 25.4475 17.5875C24.287 17.5875 23.3463 18.5283 23.3463 19.6887C23.3463 20.8492 24.287 21.7899 25.4475 21.7899ZM25.4475 23.6576C27.6394 23.6576 29.4163 21.8807 29.4163 19.6887C29.4163 17.4968 27.6394 15.7198 25.4475 15.7198C23.2555 15.7198 21.4786 17.4968 21.4786 19.6887C21.4786 21.8807 23.2555 23.6576 25.4475 23.6576Z"
                  fill="#06847B"
                  fill-rule="evenodd"
                />
              </svg>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
              >
                Service Accounts
              </div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
              >
                Manage external integrations accounts
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-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="M10.188 25.403L14.8603 17.9921C11.5958 15.3023 10.5525 10.9218 12.3952 7.03423C14.4554 2.68805 19.4727 0.911694 23.8632 2.67405C28.3581 4.47829 30.6541 10.5097 28.3722 15.6112L26.9311 14.9665C28.8961 10.5736 26.8313 5.56662 23.2751 4.13916C19.6146 2.66981 15.5043 4.16105 13.8218 7.71045C12.2078 11.1154 13.2502 14.9597 16.3677 17.1575L16.9804 17.5895L11.5587 26.1892C11.9146 26.496 12.2246 26.8684 12.469 27.301C13.6059 29.3129 12.8965 31.8654 10.8847 33.0023C8.87279 34.1392 6.32024 33.4298 5.18339 31.4179C4.04653 29.4061 4.75587 26.8535 6.76775 25.7167C7.85287 25.1035 9.09527 25.0274 10.188 25.403ZM23.2649 10.8173C23.2649 12.256 22.0986 13.4222 20.6599 13.4222C19.2213 13.4222 18.055 12.256 18.055 10.8173C18.055 9.37865 19.2213 8.21239 20.6599 8.21239C22.0986 8.21239 23.2649 9.37865 23.2649 10.8173ZM22.1884 14.713C21.7149 14.8989 21.1994 15.001 20.6599 15.001C18.3494 15.001 16.4763 13.1279 16.4763 10.8173C16.4763 8.50674 18.3494 6.63365 20.6599 6.63365C22.9705 6.63365 24.8436 8.50674 24.8436 10.8173C24.8436 12.0191 24.3368 13.1026 23.5253 13.8657L27.6887 21.6091C31.6202 20.096 35.9283 21.3402 38.3955 24.8467C41.154 28.7675 40.2364 33.995 36.5573 36.9426C32.7897 39.9611 26.4344 38.9945 23.1295 34.5103L24.4003 33.5736C27.2448 37.4331 32.5933 38.0955 35.5702 35.7105C38.6356 33.2546 39.3563 28.956 37.1043 25.7552C34.9442 22.6851 31.1037 21.7052 27.6738 23.3323L26.9957 23.6539L22.1884 14.713ZM28.4266 28.5411C27.7395 29.8054 28.2075 31.3873 29.4718 32.0744C30.7362 32.7614 32.3181 32.2935 33.0051 31.0291C33.6922 29.7648 33.2242 28.1829 31.9599 27.4958C30.6955 26.8088 29.1136 27.2768 28.4266 28.5411ZM26.6391 30.7276C26.8998 31.8533 27.6229 32.8664 28.718 33.4615C30.7485 34.5649 33.2889 33.8134 34.3923 31.7829C35.4956 29.7525 34.7441 27.2121 32.7137 26.1087C30.6832 25.0053 28.1428 25.7569 27.0394 27.7873C26.8022 28.2239 26.6507 28.6841 26.5792 29.1486L16.4131 29.1096L16.3716 29.8582C16.1604 33.6666 13.4532 36.5883 9.71044 37.0246C5.80888 37.4794 2.36564 34.7845 1.67123 30.9016C0.99662 27.1295 4.1478 22.7246 8.91444 22.0623L8.69716 20.4986C3.16177 21.2677 -0.735523 26.4118 0.117155 31.1796C0.950033 35.8367 5.11583 39.1496 9.89322 38.5927C14.1665 38.0946 17.3279 34.8879 17.8783 30.694L26.6391 30.7276ZM11.0946 28.0777C10.3866 26.8249 8.7972 26.3832 7.54443 27.0911C6.29165 27.799 5.84995 29.3885 6.55786 30.6413C7.26577 31.894 8.85522 32.3357 10.108 31.6278C11.3608 30.9199 11.8025 29.3305 11.0946 28.0777Z"
                  fill="#06847B"
                  fill-rule="evenodd"
                />
              </svg>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
              >
                Webhooks
              </div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
              >
                View and update your webhook and their settings
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Configuration partial access 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ConfigurationPage-header-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Configuration
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="ConfigurationPage-configurationCategory-id"
    >
      <div
        class="ConfigurationPage-configurationLabel-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          Attributes and Product Typess
        </div>
      </div>
      <div
        class="ConfigurationPage-configurationItem-id"
      >
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-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="M37.9487 10.4808C37.9487 14.4459 34.7343 17.6603 30.7692 17.6603C26.8041 17.6603 23.5897 14.4459 23.5897 10.4808C23.5897 6.51565 26.8041 3.30128 30.7692 3.30128C34.7343 3.30128 37.9487 6.51565 37.9487 10.4808ZM40 10.4808C40 15.5788 35.8672 19.7115 30.7692 19.7115C25.6712 19.7115 21.5385 15.5788 21.5385 10.4808C21.5385 5.38275 25.6712 1.25 30.7692 1.25C35.8672 1.25 40 5.38275 40 10.4808ZM16.4103 9.45484H2.05128V23.8138H16.4103V9.45484ZM0 7.40356V25.8651H18.4615V7.40356H0ZM24.6154 20.7371L13.9566 39.1987H35.2741L24.6154 20.7371ZM24.6154 24.8397L17.5095 37.1474H31.7212L24.6154 24.8397Z"
                  fill="#06847B"
                  fill-rule="evenodd"
                />
              </svg>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
              >
                Attributes
              </div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
              >
                Determine attributes used to create product types
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-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="M0 6.5V33L20 40L40 33V6.5L20 0L0 6.5ZM2.5 8.69935V31.2263L18.75 36.9138V14.3869L2.5 8.69935ZM21.25 14.3869V36.9138L37.5 31.2263V8.69935L21.25 14.3869ZM34.1436 7.22539L20 2.62872L5.8564 7.22539L20 12.1756L34.1436 7.22539Z"
                  fill="#06847B"
                  fill-rule="evenodd"
                />
              </svg>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
              >
                Product Types
              </div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
              >
                Define types of products you sell
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="ConfigurationPage-configurationCategory-id"
    >
      <div
        class="ConfigurationPage-configurationLabel-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          Product Settings
        </div>
      </div>
      <div
        class="ConfigurationPage-configurationItem-id"
      >
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-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="M2 0H34.6316V21.0526H32.5263V2.10526H4.10526V37.8947H32.5263V35.2632H34.6316V40H2V0ZM8.31579 20H11.4737V23.1579H8.31579V20ZM16.7368 20H13.5789V23.1579H16.7368V20ZM18.8421 20H22V23.1579H18.8421V20ZM27.2632 20H24.1053V23.1579H27.2632V20ZM8.31579 25.2632H11.4737V28.4211H8.31579V25.2632ZM16.7368 25.2632H13.5789V28.4211H16.7368V25.2632ZM18.8421 25.2632H22V28.4211H18.8421V25.2632ZM11.4737 30.5263H8.31579V33.6842H11.4737V30.5263ZM13.5789 30.5263H16.7368V33.6842H13.5789V30.5263ZM22 30.5263H18.8421V33.6842H22V30.5263ZM26.2105 9.47368H10.4211V14.7368H26.2105V9.47368ZM8.31579 7.36842V16.8421H28.3158V7.36842H8.31579ZM37.7895 30.5263H34.6316V33.6842H37.7895V30.5263ZM28.3158 24.2105H31.4737V27.3684H28.3158V24.2105ZM29.0602 34.4285L38.5339 24.9548L37.0452 23.4662L27.5715 32.9398L29.0602 34.4285Z"
                  fill="#06847B"
                  fill-rule="evenodd"
                />
              </svg>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
              >
                Taxes
              </div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
              >
                Manage how your store charges tax
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="ConfigurationPage-configurationCategory-id"
    >
      <div
        class="ConfigurationPage-configurationLabel-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          Miscellaneous
        </div>
      </div>
      <div
        class="ConfigurationPage-configurationItem-id"
      >
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-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="M31.8208 5.55248L30.7926 8.35093L31.545 9.18475C33.147 10.9601 34.3637 13.1054 35.0581 15.4817L35.3837 16.596L38.1395 17.0712V23.1349L35.3838 23.6101L35.0582 24.7244C34.4073 26.9518 33.2976 28.9763 31.8417 30.6834L31.1357 31.5111L32.2146 34.4475L26.7281 37.6084L24.9142 35.4411L23.7814 35.7276C22.572 36.0334 21.3058 36.1961 20 36.1961C18.6942 36.1961 17.428 36.0334 16.2186 35.7276L15.0858 35.4411L13.2719 37.6084L7.78535 34.4475L8.86424 31.5111L8.15831 30.6834C6.70243 28.9763 5.59267 26.9518 4.94182 24.7244L4.61622 23.6101L1.86047 23.1349L1.86047 17.0712L4.61625 16.596L4.94186 15.4817C5.63625 13.1054 6.85296 10.9601 8.45495 9.18475L9.20736 8.35093L8.17916 5.55248L13.6657 2.39164L15.5348 4.62486L16.6397 4.37851C17.7208 4.1375 18.8448 4.01018 20 4.01018C21.1552 4.01018 22.2792 4.1375 23.3603 4.37851L24.4652 4.62486L26.3343 2.39164L31.8208 5.55248ZM40 24.702V15.5042L36.8439 14.9599C36.0699 12.311 34.7134 9.91885 32.9263 7.93836L34.1077 4.72285L25.9098 0L23.7651 2.56262C22.5521 2.2922 21.2924 2.14972 20 2.14972C18.7076 2.14972 17.4479 2.2922 16.2349 2.56262L14.0902 0L5.89227 4.72285L7.07371 7.93836C5.28657 9.91885 3.93009 12.311 3.15607 14.9599L0 15.5042V24.702L3.15603 25.2462C3.88152 27.7291 5.11876 29.9864 6.74273 31.8906L5.49846 35.2772L13.6964 40L15.7625 37.5313C17.1197 37.8744 18.539 38.0565 20 38.0565C21.461 38.0565 22.8803 37.8744 24.2375 37.5313L26.3036 40L34.5015 35.2772L33.2573 31.8906C34.8812 29.9864 36.1185 27.7291 36.844 25.2462L40 24.702ZM28.4425 20C28.4425 24.6627 24.6627 28.4425 20 28.4425C15.3373 28.4425 11.5574 24.6627 11.5574 20C11.5574 15.3373 15.3373 11.5574 20 11.5574C24.6627 11.5574 28.4425 15.3373 28.4425 20ZM30.303 20C30.303 25.6902 25.6902 30.303 20 30.303C14.3097 30.303 9.69693 25.6902 9.69693 20C9.69693 14.3097 14.3097 9.69693 20 9.69693C25.6902 9.69693 30.303 14.3097 30.303 20Z"
                  fill="#06847B"
                  fill-rule="evenodd"
                />
              </svg>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
              >
                Site Settings
              </div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
              >
                View and update your site settings
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-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="M18.179 1.20349H32.8068L40 8.39671V34.0421H24.6825V32.0528H38.0107V9.2207L37.79 9H32V3.20999L31.9828 3.19278H20.1683V7.15606H18.179V1.20349ZM0 6.16142H14.6278L21.821 13.3546V39H20.8264H0V6.16142ZM14 8.34692V15H19.8317V37.0107H1.98929V8.15071H13.8038L14 8.34692ZM18 19H4V22H18V19ZM4 24H18V27H4V24ZM35 12H25V15H35V12ZM25 17H35V28H25V17ZM18 29H4V32H18V29Z"
                  fill="#06847B"
                  fill-rule="evenodd"
                />
              </svg>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
              >
                Pages
              </div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
              >
                Manage and add additional pages
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Customers / Address Book default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Tom Cooper's Address Book
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add address
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="CustomerAddressListPage-root-id"
    >
      <div
        class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id CustomerAddress-card-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id CardTitle-constantHeight-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Default Address
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <div>
              <button
                aria-haspopup="true"
                aria-label="More"
                class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                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="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                    />
                  </svg>
                </span>
              </button>
            </div>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id"
        >
          <address
            style="font-style:inherit"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Elizabeth Vaughn
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              419 Ruiz Orchard Apt. 199
              <br />
              0238 Cremin Freeway
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
               52203 Port Danielshire
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Szwecja
            </p>
          </address>
        </div>
        <div
          class="CustomerAddress-actionsContainer-id"
        >
          <div
            class="MuiCardActions-root-id CustomerAddress-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Edit
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Delete
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id CustomerAddress-card-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id CardTitle-constantHeight-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          />
          <div
            class="CardTitle-toolbar-id"
          >
            <div>
              <button
                aria-haspopup="true"
                aria-label="More"
                class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                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="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                    />
                  </svg>
                </span>
              </button>
            </div>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id"
        >
          <address
            style="font-style:inherit"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Timmy Macejkovic
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              0238 Cremin Freeway
              <br />
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
               15926 West Feliciamouth, Montana
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Japan
            </p>
          </address>
        </div>
        <div
          class="CustomerAddress-actionsContainer-id"
        >
          <div
            class="MuiCardActions-root-id CustomerAddress-actions-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Edit
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Delete
              </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 ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        ...'s Address Book
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add address
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="CustomerAddressListPage-root-id"
    >
      <div
        class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id CustomerAddress-card-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id CardTitle-constantHeight-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            <span
              class="Skeleton-skeleton-id"
            >
              ‌
            </span>
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <div>
              <button
                aria-haspopup="true"
                aria-label="More"
                class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                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="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 MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
              disabled=""
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Edit
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
              disabled=""
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Delete
              </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"
    >
      <div
        class="MuiTypography-root-id MuiTypography-h5-id"
      >
        There is no address to show for this customer
      </div>
      <div
        class="MuiTypography-root-id CustomerAddressListPage-description-id MuiTypography-body1-id"
      >
        This customer doesn’t have any adresses added to his address book. You can add address using the button below.
      </div>
      <button
        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id CustomerAddressListPage-addButton-id MuiButton-containedPrimary-id"
        tabindex="0"
        type="button"
      >
        <span
          class="MuiButton-label-id"
        >
          Add address
        </span>
      </button>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Customers / Create customer default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create Customer
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer Overview
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="CustomerCreateDetails-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    First Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="customerFirstName"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Last Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="customerLastName"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    E-mail Address
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="email"
                      type="email"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id CustomerCreateAddress-overflow-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Primary Address
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id CustomerCreateAddress-overflow-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                The primary address of this customer.
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      First Name
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="firstName"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      Last Name
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="lastName"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      Company
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="companyName"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      Phone
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="phone"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Address line 1
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="streetAddress1"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Address line 2
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="streetAddress2"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      City
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="city"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      ZIP / Postal code
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="postalCode"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Country
                      </label>
                      <div
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value=""
                        />
                        <div>
                          <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>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      Country area
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="countryArea"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Notes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Enter any extra infotmation regarding this customer.
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Note
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    name="note"
                    rows="1"
                  />
                  <textarea
                    aria-hidden="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    readonly=""
                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                    tabindex="-1"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Customers / Create customer form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create Customer
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer Overview
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="CustomerCreateDetails-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    First Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="customerFirstName"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Last Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="customerLastName"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                    data-shrink="false"
                  >
                    E-mail Address
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="email"
                      type="email"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Invalid value
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id CustomerCreateAddress-overflow-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Primary Address
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id CustomerCreateAddress-overflow-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                The primary address of this customer.
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                      data-shrink="false"
                    >
                      First Name
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="firstName"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                    >
                      Invalid value
                    </p>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                      data-shrink="false"
                    >
                      Last Name
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="lastName"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                    >
                      Invalid value
                    </p>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                      data-shrink="false"
                    >
                      Company
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="companyName"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                    >
                      Invalid value
                    </p>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                      data-shrink="false"
                    >
                      Phone
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="phone"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                    >
                      Invalid value
                    </p>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                  data-shrink="false"
                >
                  Address line 1
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="streetAddress1"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Invalid value
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                  data-shrink="false"
                >
                  Address line 2
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="streetAddress2"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Invalid value
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                      data-shrink="false"
                    >
                      City
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="city"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                    >
                      Invalid value
                    </p>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                      data-shrink="false"
                    >
                      ZIP / Postal code
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="postalCode"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                    >
                      Invalid value
                    </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 MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                        data-shrink="false"
                      >
                        Country
                      </label>
                      <div
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="true"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          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>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                      <p
                        class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                      >
                        Invalid value
                      </p>
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                      data-shrink="false"
                    >
                      Country area
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="countryArea"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                    >
                      Invalid value
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Notes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Enter any extra infotmation regarding this customer.
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                  data-shrink="false"
                >
                  Note
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    name="note"
                    rows="1"
                  />
                  <textarea
                    aria-hidden="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    readonly=""
                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                    tabindex="-1"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Invalid value
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Customers / Create customer loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create Customer
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer Overview
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="CustomerCreateDetails-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    First Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="customerFirstName"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Last Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="customerLastName"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    E-mail Address
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="email"
                      type="email"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id CustomerCreateAddress-overflow-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Primary Address
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id CustomerCreateAddress-overflow-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                The primary address of this customer.
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                      data-shrink="false"
                    >
                      First Name
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                        disabled=""
                        name="firstName"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                      data-shrink="false"
                    >
                      Last Name
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                        disabled=""
                        name="lastName"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                      data-shrink="false"
                    >
                      Company
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                        disabled=""
                        name="companyName"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                      data-shrink="false"
                    >
                      Phone
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                        disabled=""
                        name="phone"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Address line 1
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="streetAddress1"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Address line 2
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="streetAddress2"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                      data-shrink="false"
                    >
                      City
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                        disabled=""
                        name="city"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                      data-shrink="false"
                    >
                      ZIP / Postal code
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                        disabled=""
                        name="postalCode"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </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 MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                        data-shrink="false"
                      >
                        Country
                      </label>
                      <div
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="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>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                      data-shrink="false"
                    >
                      Country area
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                        disabled=""
                        name="countryArea"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Notes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Enter any extra infotmation regarding this customer.
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Note
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    disabled=""
                    name="note"
                    rows="1"
                  />
                  <textarea
                    aria-hidden="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    readonly=""
                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                    tabindex="-1"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Customers / Customer details default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Tom Cooper
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id CustomerDetails-cardTitle-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                elizabeth.vaughn@example.com
                <div
                  class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
                >
                  Active member since May 2017
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id CustomerDetails-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id"
              >
                <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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  User account active
                </span>
              </label>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Note
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    name="note"
                    rows="1"
                  />
                  <textarea
                    aria-hidden="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    readonly=""
                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                    tabindex="-1"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Personal Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id CustomerInfo-content-id"
            >
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                General Informations
              </div>
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    First Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="firstName"
                      type="text"
                      value="Tom"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Last Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="lastName"
                      type="text"
                      value="Cooper"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id CustomerInfo-hr-id"
              />
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                Contact Informations
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  E-mail Address
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="email"
                    type="email"
                    value="elizabeth.vaughn@example.com"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Recent Orders
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    View all orders
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      No. of Order
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Date
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Status
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id CustomerOrders-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      #8234
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <time
                        class=""
                        datetime="1525685850124"
                        title="May 7, 2018 5:37 AM"
                      >
                        3 months ago
                      </time>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                      >
                        Fully paid
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
                    >
                      $1,215.89
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Address Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Manage
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
              >
                Address
              </div>
              <address
                style="font-style:inherit"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Elizabeth Vaughn
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  419 Ruiz Orchard Apt. 199
                  <br />
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                   52203 Port Danielshire
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Szwecja
                </p>
              </address>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer History
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last login
              </div>
              <div
                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last order
              </div>
              <div
                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Customers / Customer details different addresses 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Tom Cooper
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id CustomerDetails-cardTitle-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                elizabeth.vaughn@example.com
                <div
                  class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
                >
                  Active member since May 2017
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id CustomerDetails-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id"
              >
                <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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  User account active
                </span>
              </label>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Note
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    name="note"
                    rows="1"
                  />
                  <textarea
                    aria-hidden="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    readonly=""
                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                    tabindex="-1"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Personal Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id CustomerInfo-content-id"
            >
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                General Informations
              </div>
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    First Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="firstName"
                      type="text"
                      value="Tom"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Last Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="lastName"
                      type="text"
                      value="Cooper"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id CustomerInfo-hr-id"
              />
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                Contact Informations
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  E-mail Address
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="email"
                    type="email"
                    value="elizabeth.vaughn@example.com"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Recent Orders
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    View all orders
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      No. of Order
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Date
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Status
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id CustomerOrders-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      #8234
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <time
                        class=""
                        datetime="1525685850124"
                        title="May 7, 2018 5:37 AM"
                      >
                        3 months ago
                      </time>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                      >
                        Fully paid
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
                    >
                      $1,215.89
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Address Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Manage
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
              >
                Billing Address
              </div>
              <address
                style="font-style:inherit"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Elizabeth Vaughn
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  419 Ruiz Orchard Apt. 199
                  <br />
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                   52203 Port Danielshire
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Szwecja
                </p>
              </address>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
              >
                Shipping Address
              </div>
              <address
                style="font-style:inherit"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Elizabeth Vaughn
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  419 Ruiz Orchard Apt. 199
                  <br />
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                   52203 Port Danielshire
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Szwecja
                </p>
              </address>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer History
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last login
              </div>
              <div
                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last order
              </div>
              <div
                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Tom Cooper
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id CustomerDetails-cardTitle-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                elizabeth.vaughn@example.com
                <div
                  class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
                >
                  Active member since May 2017
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id CustomerDetails-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id"
              >
                <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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  User account active
                </span>
              </label>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Note
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    name="note"
                    rows="1"
                  />
                  <textarea
                    aria-hidden="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    readonly=""
                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                    tabindex="-1"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Personal Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id CustomerInfo-content-id"
            >
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                General Informations
              </div>
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    First Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="firstName"
                      type="text"
                      value="Tom"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                  >
                    Invalid value
                  </p>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Last Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="lastName"
                      type="text"
                      value="Cooper"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                  >
                    Invalid value
                  </p>
                </div>
              </div>
              <hr
                class="Hr-root-id CustomerInfo-hr-id"
              />
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                Contact Informations
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  E-mail Address
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="email"
                    type="email"
                    value="elizabeth.vaughn@example.com"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Invalid value
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Recent Orders
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    View all orders
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      No. of Order
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Date
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Status
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id CustomerOrders-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      #8234
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <time
                        class=""
                        datetime="1525685850124"
                        title="May 7, 2018 5:37 AM"
                      >
                        3 months ago
                      </time>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                      >
                        Fully paid
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
                    >
                      $1,215.89
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Address Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Manage
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
              >
                Address
              </div>
              <address
                style="font-style:inherit"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Elizabeth Vaughn
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  419 Ruiz Orchard Apt. 199
                  <br />
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                   52203 Port Danielshire
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Szwecja
                </p>
              </address>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer History
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last login
              </div>
              <div
                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last order
              </div>
              <div
                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Customers / Customer details loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <span
            class="Skeleton-skeleton-id"
            style="width:10em"
          >
            ‌
          </span>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id CustomerDetails-cardTitle-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
                <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 CustomerDetails-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  User account active
                </span>
              </label>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Note
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    disabled=""
                    name="note"
                    rows="1"
                  />
                  <textarea
                    aria-hidden="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    readonly=""
                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                    tabindex="-1"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Personal Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id CustomerInfo-content-id"
            >
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                General Informations
              </div>
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    First Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="firstName"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Last Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="lastName"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id CustomerInfo-hr-id"
              />
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                Contact Informations
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  E-mail Address
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="email"
                    type="email"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Recent Orders
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    View all orders
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      No. of Order
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Date
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Status
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                      >
                        ‌
                      </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 CustomerOrders-textRight-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                      >
                        ‌
                      </span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Address Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Manage
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
              >
                Address
              </div>
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer History
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last login
              </div>
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last order
              </div>
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Tom Cooper
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id CustomerDetails-cardTitle-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                elizabeth.vaughn@example.com
                <div
                  class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
                >
                  Active member since May 2017
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id CustomerDetails-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id"
              >
                <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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  User account active
                </span>
              </label>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Note
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    name="note"
                    rows="1"
                  />
                  <textarea
                    aria-hidden="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    readonly=""
                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                    tabindex="-1"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Personal Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id CustomerInfo-content-id"
            >
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                General Informations
              </div>
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    First Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="firstName"
                      type="text"
                      value="Tom"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Last Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="lastName"
                      type="text"
                      value="Cooper"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id CustomerInfo-hr-id"
              />
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                Contact Informations
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  E-mail Address
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="email"
                    type="email"
                    value="elizabeth.vaughn@example.com"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Recent Orders
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    View all orders
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      No. of Order
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Date
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Status
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id CustomerOrders-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      #8234
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <time
                        class=""
                        datetime="1525685850124"
                        title="May 7, 2018 5:37 AM"
                      >
                        3 months ago
                      </time>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                      >
                        Fully paid
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
                    >
                      $1,215.89
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Address Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Manage
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
              >
                Address
              </div>
              <address
                style="font-style:inherit"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Elizabeth Vaughn
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  419 Ruiz Orchard Apt. 199
                  <br />
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                   52203 Port Danielshire
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Szwecja
                </p>
              </address>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer History
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last login
              </div>
              <div
                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
              >
                -
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last order
              </div>
              <div
                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Customers / Customer details never placed order 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Tom Cooper
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id CustomerDetails-cardTitle-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                elizabeth.vaughn@example.com
                <div
                  class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
                >
                  Active member since May 2017
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id CustomerDetails-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id"
              >
                <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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  User account active
                </span>
              </label>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Note
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    name="note"
                    rows="1"
                  />
                  <textarea
                    aria-hidden="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    readonly=""
                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                    tabindex="-1"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Personal Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id CustomerInfo-content-id"
            >
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                General Informations
              </div>
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    First Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="firstName"
                      type="text"
                      value="Tom"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Last Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="lastName"
                      type="text"
                      value="Cooper"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id CustomerInfo-hr-id"
              />
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                Contact Informations
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  E-mail Address
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="email"
                    type="email"
                    value="elizabeth.vaughn@example.com"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Recent Orders
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    View all orders
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      No. of Order
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Date
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Status
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id CustomerOrders-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      #8234
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <time
                        class=""
                        datetime="1525685850124"
                        title="May 7, 2018 5:37 AM"
                      >
                        3 months ago
                      </time>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                      >
                        Fully paid
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
                    >
                      $1,215.89
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Address Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Manage
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
              >
                Address
              </div>
              <address
                style="font-style:inherit"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Elizabeth Vaughn
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  419 Ruiz Orchard Apt. 199
                  <br />
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                   52203 Port Danielshire
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Szwecja
                </p>
              </address>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer History
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last login
              </div>
              <div
                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last order
              </div>
              <div
                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
              >
                -
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Customers / Customer details no address at all 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Tom Cooper
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id CustomerDetails-cardTitle-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                elizabeth.vaughn@example.com
                <div
                  class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
                >
                  Active member since May 2017
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id CustomerDetails-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id"
              >
                <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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  User account active
                </span>
              </label>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Note
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    name="note"
                    rows="1"
                  />
                  <textarea
                    aria-hidden="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    readonly=""
                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                    tabindex="-1"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Personal Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id CustomerInfo-content-id"
            >
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                General Informations
              </div>
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    First Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="firstName"
                      type="text"
                      value="Tom"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Last Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="lastName"
                      type="text"
                      value="Cooper"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id CustomerInfo-hr-id"
              />
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                Contact Informations
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  E-mail Address
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="email"
                    type="email"
                    value="elizabeth.vaughn@example.com"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Recent Orders
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    View all orders
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      No. of Order
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Date
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Status
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id CustomerOrders-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      #8234
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <time
                        class=""
                        datetime="1525685850124"
                        title="May 7, 2018 5:37 AM"
                      >
                        3 months ago
                      </time>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                      >
                        Fully paid
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
                    >
                      $1,215.89
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Address Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Manage
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                This customer has no addresses yet
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer History
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last login
              </div>
              <div
                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last order
              </div>
              <div
                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Customers / Customer details no default billing address 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Tom Cooper
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id CustomerDetails-cardTitle-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                elizabeth.vaughn@example.com
                <div
                  class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
                >
                  Active member since May 2017
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id CustomerDetails-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id"
              >
                <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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  User account active
                </span>
              </label>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Note
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    name="note"
                    rows="1"
                  />
                  <textarea
                    aria-hidden="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    readonly=""
                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                    tabindex="-1"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Personal Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id CustomerInfo-content-id"
            >
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                General Informations
              </div>
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    First Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="firstName"
                      type="text"
                      value="Tom"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Last Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="lastName"
                      type="text"
                      value="Cooper"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id CustomerInfo-hr-id"
              />
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                Contact Informations
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  E-mail Address
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="email"
                    type="email"
                    value="elizabeth.vaughn@example.com"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Recent Orders
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    View all orders
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      No. of Order
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Date
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Status
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id CustomerOrders-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      #8234
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <time
                        class=""
                        datetime="1525685850124"
                        title="May 7, 2018 5:37 AM"
                      >
                        3 months ago
                      </time>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                      >
                        Fully paid
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
                    >
                      $1,215.89
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Address Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Manage
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
              >
                Shipping Address
              </div>
              <address
                style="font-style:inherit"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Elizabeth Vaughn
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  419 Ruiz Orchard Apt. 199
                  <br />
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                   52203 Port Danielshire
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Szwecja
                </p>
              </address>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer History
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last login
              </div>
              <div
                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last order
              </div>
              <div
                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Customers / Customer details no default shipping address 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Tom Cooper
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id CustomerDetails-cardTitle-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                elizabeth.vaughn@example.com
                <div
                  class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
                >
                  Active member since May 2017
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id CustomerDetails-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id"
              >
                <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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  User account active
                </span>
              </label>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Note
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    name="note"
                    rows="1"
                  />
                  <textarea
                    aria-hidden="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    readonly=""
                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                    tabindex="-1"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Personal Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id CustomerInfo-content-id"
            >
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                General Informations
              </div>
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    First Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="firstName"
                      type="text"
                      value="Tom"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Last Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="lastName"
                      type="text"
                      value="Cooper"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id CustomerInfo-hr-id"
              />
              <div
                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
              >
                Contact Informations
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  E-mail Address
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="email"
                    type="email"
                    value="elizabeth.vaughn@example.com"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Recent Orders
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    View all orders
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      No. of Order
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Date
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Status
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
                      scope="col"
                    >
                      Total
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id CustomerOrders-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      #8234
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <time
                        class=""
                        datetime="1525685850124"
                        title="May 7, 2018 5:37 AM"
                      >
                        3 months ago
                      </time>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <div
                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                      >
                        Fully paid
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
                    >
                      $1,215.89
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Address Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Manage
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
              >
                Billing Address
              </div>
              <address
                style="font-style:inherit"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Elizabeth Vaughn
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  419 Ruiz Orchard Apt. 199
                  <br />
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                   52203 Port Danielshire
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Szwecja
                </p>
              </address>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer History
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last login
              </div>
              <div
                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
              >
                Last order
              </div>
              <div
                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Customers / Customer list default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Customers
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create customer
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Customers
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Customer"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <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 TableCellHeader-root-id CustomerList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Customer Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CustomerList-colEmail-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Customer Email
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CustomerList-colOrders-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    No. of Orders
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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 CustomerList-tableRow-id MuiTableRow-hover-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 CustomerList-tableRow-id MuiTableRow-hover-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 CustomerList-tableRow-id MuiTableRow-hover-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 CustomerList-tableRow-id MuiTableRow-hover-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 CustomerList-tableRow-id MuiTableRow-hover-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 CustomerList-tableRow-id MuiTableRow-hover-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 CustomerList-tableRow-id MuiTableRow-hover-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 CustomerList-tableRow-id MuiTableRow-hover-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 CustomerList-tableRow-id MuiTableRow-hover-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 CustomerList-tableRow-id MuiTableRow-hover-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 CustomerList-tableRow-id MuiTableRow-hover-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 CustomerList-tableRow-id MuiTableRow-hover-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 CustomerList-tableRow-id MuiTableRow-hover-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 CustomerList-tableRow-id MuiTableRow-hover-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 CustomerList-tableRow-id MuiTableRow-hover-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 CustomerList-tableRow-id MuiTableRow-hover-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 CustomerList-tableRow-id MuiTableRow-hover-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 CustomerList-tableRow-id MuiTableRow-hover-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 CustomerList-tableRow-id MuiTableRow-hover-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 CustomerList-tableRow-id MuiTableRow-hover-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 CustomerList-tableRow-id MuiTableRow-hover-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 CustomerList-tableRow-id MuiTableRow-hover-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 CustomerList-tableRow-id MuiTableRow-hover-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 CustomerList-tableRow-id MuiTableRow-hover-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>
</div>
`;

exports[`Storyshots Views / Customers / Customer list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Customers
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create customer
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Customers
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Customer"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 TableCellHeader-root-id CustomerList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Customer Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CustomerList-colEmail-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Customer Email
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CustomerList-colOrders-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    No. of Orders
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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 TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-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 Checkbox-root-id MuiButtonBase-disabled-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>
</div>
`;

exports[`Storyshots Views / Customers / Customer list no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Customers
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create customer
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Customers
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Customer"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CustomerList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Customer Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CustomerList-colEmail-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Customer Email
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CustomerList-colOrders-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    No. of Orders
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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>
</div>
`;

exports[`Storyshots Views / Discounts / Sale create default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create Sale
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Discount Type
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id SaleType-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="type"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="PERCENTAGE"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      Percentage
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="FIXED"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      Fixed Amount
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Active Dates
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                    data-shrink="true"
                  >
                    Start Date
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startDate"
                      type="date"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                    data-shrink="true"
                  >
                    Start Hour
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startTime"
                      type="time"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Set end date
                </span>
              </label>
            </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 ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create Sale
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                  data-shrink="false"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Invalid value
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Discount Type
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id SaleType-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="type"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="PERCENTAGE"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      Percentage
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="FIXED"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      Fixed Amount
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Active Dates
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                    data-shrink="true"
                  >
                    Start Date
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startDate"
                      type="date"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Invalid value
                  </p>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                    data-shrink="true"
                  >
                    Start Hour
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startTime"
                      type="time"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Invalid value
                  </p>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Set end date
                </span>
              </label>
            </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 ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create Sale
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Discount Type
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id SaleType-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="type"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="type"
                          type="radio"
                          value="PERCENTAGE"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      Percentage
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="type"
                          type="radio"
                          value="FIXED"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      Fixed Amount
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Active Dates
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="true"
                  >
                    Start Date
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="startDate"
                      type="date"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="true"
                  >
                    Start Hour
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="startTime"
                      type="time"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Set end date
                </span>
              </label>
            </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 ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Happy minute day!
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Happy minute day!"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Discount Type
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id SaleType-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="type"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="PERCENTAGE"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      Percentage
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="FIXED"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      Fixed Amount
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Value
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Discount Value
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    name="value"
                    type="text"
                    value="30"
                  />
                  %
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="TabContainer-root-id"
          >
            <span
              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
            >
              Categories (2)
            </span>
            <span
              class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
            >
              Collections (4)
            </span>
            <span
              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
            >
              Products (4)
            </span>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Eligible Collections
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign collections
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <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 TablePagination-toolbar-id MuiToolbar-gutters-id"
                      >
                        <div
                          class="TablePagination-spacer-id"
                        />
                        <div
                          class="TablePaginationActions-root-id"
                        >
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-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 DiscountCollections-tableRow-id MuiTableRow-hover-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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Active Dates
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Start Date
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startDate"
                      type="date"
                      value="2019-01-03"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Start Hour
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startTime"
                      type="time"
                      value="00:00"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Set end date
                </span>
              </label>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Summary
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Name
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Happy minute day!
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Value
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                30%
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Start Date
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Jan 3, 2019
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                End Date
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                -
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Discounts / Sale details default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Happy minute day!
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Happy minute day!"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Discount Type
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id SaleType-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="type"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="PERCENTAGE"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      Percentage
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="FIXED"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      Fixed Amount
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Value
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Discount Value
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    name="value"
                    type="text"
                    value="30"
                  />
                  %
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="TabContainer-root-id"
          >
            <span
              class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
            >
              Categories (2)
            </span>
            <span
              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
            >
              Collections (4)
            </span>
            <span
              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
            >
              Products (4)
            </span>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Eligible Categories
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign categories
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <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 TablePagination-toolbar-id MuiToolbar-gutters-id"
                      >
                        <div
                          class="TablePagination-spacer-id"
                        />
                        <div
                          class="TablePaginationActions-root-id"
                        >
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-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 DiscountCategories-tableRow-id MuiTableRow-hover-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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Active Dates
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Start Date
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startDate"
                      type="date"
                      value="2019-01-03"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Start Hour
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startTime"
                      type="time"
                      value="00:00"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Set end date
                </span>
              </label>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Summary
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Name
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Happy minute day!
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Value
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                30%
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Start Date
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Jan 3, 2019
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                End Date
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                -
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Happy minute day!
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Happy minute day!"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Invalid value
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Discount Type
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id SaleType-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="type"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="PERCENTAGE"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      Percentage
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="FIXED"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      Fixed Amount
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Value
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  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"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    name="value"
                    type="text"
                    value="30"
                  />
                  %
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Invalid value
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="TabContainer-root-id"
          >
            <span
              class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
            >
              Categories (2)
            </span>
            <span
              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
            >
              Collections (4)
            </span>
            <span
              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
            >
              Products (4)
            </span>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Eligible Categories
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign categories
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <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 TablePagination-toolbar-id MuiToolbar-gutters-id"
                      >
                        <div
                          class="TablePagination-spacer-id"
                        />
                        <div
                          class="TablePaginationActions-root-id"
                        >
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-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 DiscountCategories-tableRow-id MuiTableRow-hover-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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Active Dates
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Start Date
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startDate"
                      type="date"
                      value="2019-01-03"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                  >
                    Invalid value
                  </p>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Start Hour
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startTime"
                      type="time"
                      value="00:00"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                  >
                    Invalid value
                  </p>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Set end date
                </span>
              </label>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Summary
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Name
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Happy minute day!
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Value
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                30%
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Start Date
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Jan 3, 2019
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                End Date
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                -
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <span
            class="Skeleton-skeleton-id"
            style="width:10em"
          >
            ‌
          </span>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Discount Type
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id SaleType-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="type"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="type"
                          type="radio"
                          value="PERCENTAGE"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      Percentage
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="type"
                          type="radio"
                          value="FIXED"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      Fixed Amount
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Value
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Discount Value
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    disabled=""
                    name="value"
                    type="text"
                    value=""
                  />
                  USD
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="TabContainer-root-id"
          >
            <span
              class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
            >
              Categories (…)
            </span>
            <span
              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
            >
              Collections (…)
            </span>
            <span
              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
            >
              Products (…)
            </span>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Eligible Categories
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign categories
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <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 MuiButtonBase-disabled-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 TablePagination-toolbar-id MuiToolbar-gutters-id"
                      >
                        <div
                          class="TablePagination-spacer-id"
                        />
                        <div
                          class="TablePaginationActions-root-id"
                        >
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-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 TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-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 Checkbox-root-id MuiButtonBase-disabled-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 MuiIconButton-root-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Active Dates
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="true"
                  >
                    Start Date
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="startDate"
                      type="date"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="true"
                  >
                    Start Hour
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="startTime"
                      type="time"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Set end date
                </span>
              </label>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Summary
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Name
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Value
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Start Date
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                End Date
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </div>
            </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 ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Happy minute day!
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Happy minute day!"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Discount Type
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id SaleType-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="type"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="PERCENTAGE"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      Percentage
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="FIXED"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      Fixed Amount
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Value
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Discount Value
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    name="value"
                    type="text"
                    value="30"
                  />
                  %
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="TabContainer-root-id"
          >
            <span
              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
            >
              Categories (2)
            </span>
            <span
              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
            >
              Collections (4)
            </span>
            <span
              class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
            >
              Products (4)
            </span>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Eligible Products
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign products
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <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 TablePagination-toolbar-id MuiToolbar-gutters-id"
                      >
                        <div
                          class="TablePagination-spacer-id"
                        />
                        <div
                          class="TablePaginationActions-root-id"
                        >
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-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 DiscountProducts-tableRow-id MuiTableRow-hover-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 MuiAvatar-circle-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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id DiscountProducts-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <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 MuiAvatar-circle-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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id DiscountProducts-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <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 MuiAvatar-circle-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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id DiscountProducts-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                    >
                      <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 MuiAvatar-circle-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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Active Dates
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Start Date
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startDate"
                      type="date"
                      value="2019-01-03"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Start Hour
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startTime"
                      type="time"
                      value="00:00"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Set end date
                </span>
              </label>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Summary
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Name
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Happy minute day!
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Value
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                30%
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Start Date
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Jan 3, 2019
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                End Date
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                -
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Discounts / Sale list default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Sales
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Sale
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Sales
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Sale"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <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 TableCellHeader-root-id SaleList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colStart-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Starts
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colEnd-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Ends
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colValue-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Value
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="5"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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 SaleList-tableRow-id MuiTableRow-hover-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 SaleList-tableRow-id MuiTableRow-hover-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 SaleList-tableRow-id MuiTableRow-hover-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 SaleList-tableRow-id MuiTableRow-hover-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 SaleList-tableRow-id MuiTableRow-hover-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>
</div>
`;

exports[`Storyshots Views / Discounts / Sale list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Sales
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Sale
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Sales
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Sale"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <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 TableCellHeader-root-id SaleList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colStart-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Starts
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colEnd-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Ends
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colValue-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Value
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="5"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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>
</div>
`;

exports[`Storyshots Views / Discounts / Sale list no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Sales
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Sale
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Sales
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Sale"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colStart-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Starts
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colEnd-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Ends
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colValue-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Value
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="5"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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>
</div>
`;

exports[`Storyshots Views / Discounts / Voucher create default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create Voucher
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Generate Code
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Discount Code
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="code"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Discount Type
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
                >
                  <div
                    aria-label="discountType"
                    class="MuiFormGroup-root-id"
                    role="radiogroup"
                  >
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            checked=""
                            class="PrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="FIXED"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-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>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                      >
                        Fixed Amount
                      </span>
                    </label>
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="PERCENTAGE"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-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>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                      >
                        Percentage
                      </span>
                    </label>
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="SHIPPING"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              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>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                      >
                        Free Shipping
                      </span>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Value
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Discount Value
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="value"
                    type="number"
                    value="0"
                  />
                  <div
                    class="TextFieldWithChoice-adornment-id"
                  >
                    <span
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      USD
                    </span>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id VoucherValue-hr-id"
              />
              <div
                class="FormSpacer-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="applyOncePerOrder"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Only once per order
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    If this option is disabled, discount will be counted for every eligible product
                  </div>
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Minimum Requirements
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="requirementsPicker"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="NONE"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      None
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="ORDER"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      Minimal order value
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="ITEM"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      Minimum quantity of items
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Usage Limit
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <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 MuiFormControlLabel-label-id MuiTypography-body1-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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Limit to one use per customer
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Active Dates
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                    data-shrink="true"
                  >
                    Start Date
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startDate"
                      type="date"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                    data-shrink="true"
                  >
                    Start Hour
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startTime"
                      type="time"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </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 MuiFormControlLabel-label-id MuiTypography-body1-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 ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create Voucher
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Generate Code
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                  data-shrink="false"
                >
                  Discount Code
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="code"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Invalid value
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Discount Type
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
                >
                  <div
                    aria-label="discountType"
                    class="MuiFormGroup-root-id"
                    role="radiogroup"
                  >
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            checked=""
                            class="PrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="FIXED"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-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>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                      >
                        Fixed Amount
                      </span>
                    </label>
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="PERCENTAGE"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-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>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                      >
                        Percentage
                      </span>
                    </label>
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="SHIPPING"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              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>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                      >
                        Free Shipping
                      </span>
                    </label>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Invalid value
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Value
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Discount Value
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="value"
                    type="number"
                    value="0"
                  />
                  <div
                    class="TextFieldWithChoice-adornment-id"
                  >
                    <span
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      USD
                    </span>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id VoucherValue-hr-id"
              />
              <div
                class="FormSpacer-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="applyOncePerOrder"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Only once per order
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    If this option is disabled, discount will be counted for every eligible product
                  </div>
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Minimum Requirements
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="requirementsPicker"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="NONE"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      None
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="ORDER"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      Minimal order value
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="ITEM"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      Minimum quantity of items
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Usage Limit
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <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 MuiFormControlLabel-label-id MuiTypography-body1-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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Limit to one use per customer
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Active Dates
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                    data-shrink="true"
                  >
                    Start Date
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startDate"
                      type="date"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Invalid value
                  </p>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                    data-shrink="true"
                  >
                    Start Hour
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startTime"
                      type="time"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Invalid value
                  </p>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <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 MuiFormControlLabel-label-id MuiTypography-body1-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 ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          DISCOUNT
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Discount Code
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="code"
                    type="text"
                    value="DISCOUNT"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Discount Type
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
                >
                  <div
                    aria-label="discountType"
                    class="MuiFormGroup-root-id"
                    role="radiogroup"
                  >
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            checked=""
                            class="PrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="FIXED"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-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>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                      >
                        Fixed Amount
                      </span>
                    </label>
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="PERCENTAGE"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-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>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                      >
                        Percentage
                      </span>
                    </label>
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="SHIPPING"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              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>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                      >
                        Free Shipping
                      </span>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Value
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Discount Value
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="value"
                    type="number"
                    value="25"
                  />
                  <div
                    class="TextFieldWithChoice-adornment-id"
                  >
                    <span
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      USD
                    </span>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id VoucherValue-hr-id"
              />
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id"
              >
                <label
                  class="MuiFormLabel-root-id RadioGroupField-formLabel-id"
                >
                  Voucher Specific Information
                </label>
                <div
                  aria-label="type"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="ENTIRE_ORDER"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      Entire order
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="SPECIFIC_PRODUCT"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      Specific products
                    </span>
                  </label>
                </div>
              </div>
              <hr
                class="Hr-root-id VoucherValue-hr-id"
              />
              <div
                class="FormSpacer-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="applyOncePerOrder"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Only once per order
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    If this option is disabled, discount will be counted for every eligible product
                  </div>
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Minimum Requirements
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="requirementsPicker"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="NONE"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      None
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="ORDER"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      Minimal order value
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="ITEM"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      Minimum quantity of items
                    </span>
                  </label>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Minimal order value
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="minSpent"
                    type="text"
                    value="200"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Usage Limit
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <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 MuiFormControlLabel-label-id MuiTypography-body1-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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Limit to one use per customer
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Active Dates
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Start Date
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startDate"
                      type="date"
                      value="2018-11-27"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Start Hour
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startTime"
                      type="time"
                      value="00:00"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Set end date
                </span>
              </label>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Summary
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Code
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                DISCOUNT
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Applies to
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Entire order
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Value
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                $25.00
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Start Date
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Nov 27, 2018
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                End Date
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                -
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Min. Order Value
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                $200.00
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Usage Limit
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                -
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          DISCOUNT
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Discount Code
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="code"
                    type="text"
                    value="DISCOUNT"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Invalid value
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Discount Type
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
                >
                  <div
                    aria-label="discountType"
                    class="MuiFormGroup-root-id"
                    role="radiogroup"
                  >
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            checked=""
                            class="PrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="FIXED"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-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>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                      >
                        Fixed Amount
                      </span>
                    </label>
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="PERCENTAGE"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-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>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                      >
                        Percentage
                      </span>
                    </label>
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        aria-disabled="false"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="SHIPPING"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              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>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                      >
                        Free Shipping
                      </span>
                    </label>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Invalid value
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Value
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  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"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="value"
                    type="number"
                    value="25"
                  />
                  <div
                    class="TextFieldWithChoice-adornment-id"
                  >
                    <span
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      USD
                    </span>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Invalid value
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id VoucherValue-hr-id"
              />
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id"
              >
                <label
                  class="MuiFormLabel-root-id RadioGroupField-formLabel-id MuiFormLabel-error-id"
                >
                  Voucher Specific Information
                </label>
                <div
                  aria-label="type"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="ENTIRE_ORDER"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      Entire order
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="SPECIFIC_PRODUCT"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      Specific products
                    </span>
                  </label>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Invalid value
                </p>
              </div>
              <hr
                class="Hr-root-id VoucherValue-hr-id"
              />
              <div
                class="FormSpacer-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="applyOncePerOrder"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Only once per order
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    If this option is disabled, discount will be counted for every eligible product
                  </div>
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Minimum Requirements
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="requirementsPicker"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="NONE"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      None
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="ORDER"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      Minimal order value
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="ITEM"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      Minimum quantity of items
                    </span>
                  </label>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Minimal order value
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="minSpent"
                    type="text"
                    value="200"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Invalid value
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Usage Limit
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <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 MuiFormControlLabel-label-id MuiTypography-body1-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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Limit to one use per customer
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Active Dates
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Start Date
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startDate"
                      type="date"
                      value="2018-11-27"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                  >
                    Invalid value
                  </p>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Start Hour
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="startTime"
                      type="time"
                      value="00:00"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                  >
                    Invalid value
                  </p>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Set end date
                </span>
              </label>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Summary
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Code
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                DISCOUNT
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Applies to
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Entire order
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Value
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                $25.00
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Start Date
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Nov 27, 2018
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                End Date
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                -
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Min. Order Value
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                $200.00
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Usage Limit
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                -
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <span
            class="Skeleton-skeleton-id"
            style="width:10em"
          >
            ‌
          </span>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Discount Code
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="code"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Discount Type
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
                >
                  <div
                    aria-label="discountType"
                    class="MuiFormGroup-root-id"
                    role="radiogroup"
                  >
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
                    >
                      <span
                        aria-disabled="true"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        tabindex="-1"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            checked=""
                            class="PrivateSwitchBase-input-id"
                            disabled=""
                            name="discountType"
                            type="radio"
                            value="FIXED"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-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>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                      >
                        Fixed Amount
                      </span>
                    </label>
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
                    >
                      <span
                        aria-disabled="true"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        tabindex="-1"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            disabled=""
                            name="discountType"
                            type="radio"
                            value="PERCENTAGE"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-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>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                      >
                        Percentage
                      </span>
                    </label>
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
                    >
                      <span
                        aria-disabled="true"
                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        tabindex="-1"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <input
                            class="PrivateSwitchBase-input-id"
                            disabled=""
                            name="discountType"
                            type="radio"
                            value="SHIPPING"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              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>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                      >
                        Free Shipping
                      </span>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Value
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Discount Value
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    disabled=""
                    min="0"
                    name="value"
                    type="number"
                    value="0"
                  />
                  <div
                    class="TextFieldWithChoice-adornment-id"
                  >
                    <span
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      USD
                    </span>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id VoucherValue-hr-id"
              />
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id"
              >
                <label
                  class="MuiFormLabel-root-id RadioGroupField-formLabel-id MuiFormLabel-disabled-id"
                >
                  Voucher Specific Information
                </label>
                <div
                  aria-label="type"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="type"
                          type="radio"
                          value="ENTIRE_ORDER"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      Entire order
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="type"
                          type="radio"
                          value="SPECIFIC_PRODUCT"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      Specific products
                    </span>
                  </label>
                </div>
              </div>
              <hr
                class="Hr-root-id VoucherValue-hr-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-disabled-id"
                    disabled=""
                    name="applyOncePerOrder"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Only once per order
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    If this option is disabled, discount will be counted for every eligible product
                  </div>
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Minimum Requirements
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
              >
                <div
                  aria-label="requirementsPicker"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="requirementsPicker"
                          type="radio"
                          value="NONE"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      None
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="requirementsPicker"
                          type="radio"
                          value="ORDER"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      Minimal order value
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="requirementsPicker"
                          type="radio"
                          value="ITEM"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      Minimum quantity of items
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Usage Limit
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <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 MuiFormControlLabel-label-id MuiTypography-body1-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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Limit to one use per customer
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Active Dates
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="Grid-root-id Grid-uniform-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="true"
                  >
                    Start Date
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="startDate"
                      type="date"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="true"
                  >
                    Start Hour
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="startTime"
                      type="time"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Set end date
                </span>
              </label>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Summary
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Code
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Applies to
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Value
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Start Date
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                End Date
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Min. Order Value
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Usage Limit
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </div>
            </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 ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Vouchers
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create voucher
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Vouchers
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Voucher"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <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 TableCellHeader-root-id VoucherList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Code
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colMinSpent-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Min. Spent
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colStart-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Starts
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colEnd-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Ends
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colValue-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Value
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colUses-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Uses
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="7"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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 VoucherList-tableRow-id MuiTableRow-hover-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 VoucherList-tableRow-id MuiTableRow-hover-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>
</div>
`;

exports[`Storyshots Views / Discounts / Voucher list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Vouchers
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create voucher
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Vouchers
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Voucher"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <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 TableCellHeader-root-id VoucherList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Code
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colMinSpent-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Min. Spent
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colStart-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Starts
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colEnd-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Ends
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colValue-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Value
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colUses-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Uses
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="7"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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>
</div>
`;

exports[`Storyshots Views / Discounts / Voucher list no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Vouchers
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create voucher
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Vouchers
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Voucher"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Code
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colMinSpent-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Min. Spent
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colStart-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Starts
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colEnd-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Ends
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colValue-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Value
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colUses-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Uses
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="7"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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>
</div>
`;

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

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

exports[`Storyshots Views / HomePage loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="HomeHeader-headerContainer-id"
      data-tc="home-header"
    >
      <div
        class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
      >
        <span
          class="Skeleton-skeleton-id"
          style="width:10em"
        >
          ‌
        </span>
      </div>
      <div
        class="MuiTypography-root-id HomeHeader-subtitle-id MuiTypography-body1-id"
      >
        <span
          class="Skeleton-skeleton-id"
          style="width:10em"
        >
          ‌
        </span>
      </div>
    </div>
    <div
      class="CardSpacer-spacer-id"
    />
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="HomePage-cardContainer-id"
        >
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
            >
              <div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-cardTitle-id MuiTypography-subtitle1-id"
                >
                  Sales
                </div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                >
                  Today
                </div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                    style="width:5em"
                  >
                    ‌
                  </span>
                </div>
              </div>
              <div
                class="HomeAnalyticsCard-iconBackground-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
                  focusable="false"
                  role="presentation"
                  viewBox="0 0 64 64"
                >
                  <path
                    clip-rule="evenodd"
                    d="M40.1974 14H49.7682V22.7732L45.9287 19.2537L35.0969 30.0855L25.1555 28.0973L15.5364 39.6402L14 38.3598L24.3809 25.9027L34.4395 27.9145L44.453 17.901L40.1974 14ZM21.2682 44H17.2682V49H21.2682V44ZM15.2682 42V51H23.2682V42H15.2682ZM26.2682 34H30.2682V49H26.2682V34ZM24.2682 51V32H32.2682V51H24.2682ZM39.2682 37H35.2682V49H39.2682V37ZM33.2682 35V51H41.2682V35H33.2682ZM44.2682 28H48.2682V49H44.2682V28ZM42.2682 51V26H50.2682V51H42.2682Z"
                    fill="#06847B"
                    fill-rule="evenodd"
                  />
                </svg>
              </div>
            </div>
          </div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
            >
              <div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-cardTitle-id MuiTypography-subtitle1-id"
                >
                  Orders
                </div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                >
                  Today
                </div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                    style="width:5em"
                  >
                    ‌
                  </span>
                </div>
              </div>
              <div
                class="HomeAnalyticsCard-iconBackground-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
                  focusable="false"
                  role="presentation"
                  viewBox="0 0 64 64"
                >
                  <path
                    clip-rule="evenodd"
                    d="M43 13H16V51H43V45.5H41V49H18V15H41V33.5H43V13ZM40 43.9142L48.2071 35.7071L46.7928 34.2929L40 41.0858L36.7071 37.7929L35.2928 39.2071L40 43.9142ZM22 19H25V22H22V19ZM36 19H27V22H36V19ZM22 25H25V28H22V25ZM36 25H27V28H36V25ZM22 31H25V34H22V31ZM36 31H27V34H36V31Z"
                    fill="#06847B"
                    fill-rule="evenodd"
                  />
                </svg>
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <tbody
                class="MuiTableBody-root-id HomeNotificationTable-tableRow-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    <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"
                      />
                    </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"
                      />
                    </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"
                      />
                    </svg>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Top Products
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id HomeProductListCard-avatarSpacing-id"
                  >
                    <div
                      class="TableCellAvatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id HomeProductListCard-avatarProps-id MuiAvatar-colorDefault-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"
                          />
                        </svg>
                      </div>
                      <div
                        class="TableCellAvatar-children-id"
                      />
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id HomeProductListCard-label-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                      >
                        ‌
                      </span>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Activity
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <ul
            class="MuiList-root-id MuiList-dense-id MuiList-padding-id"
          >
            <li
              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id HomeActivityCard-loadingProducts-id MuiListItemText-dense-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                  >
                    ‌
                  </span>
                </div>
              </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="HomeHeader-headerContainer-id"
      data-tc="home-header"
    >
      <div
        class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
      >
        Hello there, admin@example.com
      </div>
      <div
        class="MuiTypography-root-id HomeHeader-subtitle-id MuiTypography-body1-id"
      >
        Here is some information we gathered about your store
      </div>
    </div>
    <div
      class="CardSpacer-spacer-id"
    />
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="HomePage-cardContainer-id"
        >
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
            >
              <div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-cardTitle-id MuiTypography-subtitle1-id"
                >
                  Sales
                </div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                >
                  Today
                </div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
                >
                  $57.15
                </div>
              </div>
              <div
                class="HomeAnalyticsCard-iconBackground-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
                  focusable="false"
                  role="presentation"
                  viewBox="0 0 64 64"
                >
                  <path
                    clip-rule="evenodd"
                    d="M40.1974 14H49.7682V22.7732L45.9287 19.2537L35.0969 30.0855L25.1555 28.0973L15.5364 39.6402L14 38.3598L24.3809 25.9027L34.4395 27.9145L44.453 17.901L40.1974 14ZM21.2682 44H17.2682V49H21.2682V44ZM15.2682 42V51H23.2682V42H15.2682ZM26.2682 34H30.2682V49H26.2682V34ZM24.2682 51V32H32.2682V51H24.2682ZM39.2682 37H35.2682V49H39.2682V37ZM33.2682 35V51H41.2682V35H33.2682ZM44.2682 28H48.2682V49H44.2682V28ZM42.2682 51V26H50.2682V51H42.2682Z"
                    fill="#06847B"
                    fill-rule="evenodd"
                  />
                </svg>
              </div>
            </div>
          </div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
            >
              <div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-cardTitle-id MuiTypography-subtitle1-id"
                >
                  Orders
                </div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                >
                  Today
                </div>
                <div
                  class="MuiTypography-root-id HomeAnalyticsCard-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
                >
                  1
                </div>
              </div>
              <div
                class="HomeAnalyticsCard-iconBackground-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
                  focusable="false"
                  role="presentation"
                  viewBox="0 0 64 64"
                >
                  <path
                    clip-rule="evenodd"
                    d="M43 13H16V51H43V45.5H41V49H18V15H41V33.5H43V13ZM40 43.9142L48.2071 35.7071L46.7928 34.2929L40 41.0858L36.7071 37.7929L35.2928 39.2071L40 43.9142ZM22 19H25V22H22V19ZM36 19H27V22H36V19ZM22 25H25V28H22V25ZM36 25H27V28H36V25ZM22 31H25V34H22V31ZM36 31H27V34H36V31Z"
                    fill="#06847B"
                    fill-rule="evenodd"
                  />
                </svg>
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <tbody
                class="MuiTableBody-root-id HomeNotificationTable-tableRow-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <strong>
                        1
                      </strong>
                       Orders are ready to fulfill
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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"
                      />
                    </svg>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      No payments waiting for capture
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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"
                      />
                    </svg>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      No products out of stock
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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"
                      />
                    </svg>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Top Products
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id HomeProductListCard-noProducts-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      No products found
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Activity
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <ul
            class="MuiList-root-id MuiList-dense-id MuiList-padding-id"
          >
            <li
              class="MuiListItem-root-id HomeActivityCard-noProducts-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  No activities found
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
`;

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

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

exports[`Storyshots Views / HomePage product permissions 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="HomeHeader-headerContainer-id"
      data-tc="home-header"
    >
      <div
        class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
      >
        Hello there, admin@example.com
      </div>
      <div
        class="MuiTypography-root-id HomeHeader-subtitle-id MuiTypography-body1-id"
      >
        Here is some information we gathered about your store
      </div>
    </div>
    <div
      class="CardSpacer-spacer-id"
    />
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <tbody
                class="MuiTableBody-root-id HomeNotificationTable-tableRow-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      No products out of stock
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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"
                      />
                    </svg>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
      </div>
      <div />
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Navigation / Menu details default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-h5-id"
          >
            Navigation
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Creating the navigation structure is done by dragging and dropping. Simply create a new menu item and then drag it into its destined place. You can move items inside one another to create a tree structure and drag items up and down to create a hierarchy
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Menu Title
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="navbar"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Menu Items
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Undo
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MenuItems-container-id"
              style="min-height:224px;padding:;padding-top:"
            >
              <div
                class="rst__tree MenuItems-root-id"
              >
                <div
                  class="rst__node"
                  style="height:56px"
                >
                  <div
                    class="rst__lineBlock rst__lineHalfHorizontalRight rst__lineHalfVerticalBottom"
                    style="width:44px"
                  />
                  <div
                    class="rst__nodeContent"
                    style="left:44px"
                  >
                    <div
                      class="MenuItems-rowContainer-id"
                      style="margin-left:0"
                    >
                      <div
                        class="MuiPaper-root-id MuiPaper-elevation0-id MenuItems-row-id MuiPaper-rounded-id"
                      >
                        <div>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MenuItems-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>
                        <div
                          class="MuiTypography-root-id MenuItems-nodeTitle-id MuiTypography-body1-id"
                        >
                          Accessories
                        </div>
                        <div
                          class="MenuItems-spacer-id"
                        />
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Show
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              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 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                              />
                            </svg>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MenuItems-deleteButton-id MuiIconButton-colorPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              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"
                              />
                            </svg>
                          </span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="rst__node"
                  style="height:56px"
                >
                  <div
                    class="rst__lineBlock rst__lineFullVertical"
                    style="width:44px"
                  />
                  <div
                    class="rst__lineBlock rst__lineHalfHorizontalRight rst__lineFullVertical"
                    style="width:44px"
                  />
                  <div
                    class="rst__nodeContent"
                    style="left:88px"
                  >
                    <div
                      class="MenuItems-rowContainer-id"
                      style="margin-left:40px"
                    >
                      <div
                        class="MuiPaper-root-id MuiPaper-elevation0-id MenuItems-row-id MuiPaper-rounded-id"
                      >
                        <div>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MenuItems-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>
                        <div
                          class="MuiTypography-root-id MenuItems-nodeTitle-id MuiTypography-body1-id"
                        >
                          Jewelry
                        </div>
                        <div
                          class="MenuItems-spacer-id"
                        />
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Show
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              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 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                              />
                            </svg>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MenuItems-deleteButton-id MuiIconButton-colorPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              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"
                              />
                            </svg>
                          </span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="rst__node"
                  style="height:56px"
                >
                  <div
                    class="rst__lineBlock rst__lineFullVertical"
                    style="width:44px"
                  />
                  <div
                    class="rst__lineBlock rst__lineHalfVerticalTop rst__lineHalfHorizontalRight"
                    style="width:44px"
                  />
                  <div
                    class="rst__nodeContent"
                    style="left:88px"
                  >
                    <div
                      class="MenuItems-rowContainer-id"
                      style="margin-left:40px"
                    >
                      <div
                        class="MuiPaper-root-id MuiPaper-elevation0-id MenuItems-row-id MuiPaper-rounded-id"
                      >
                        <div>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MenuItems-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>
                        <div
                          class="MuiTypography-root-id MenuItems-nodeTitle-id MuiTypography-body1-id"
                        >
                          Glasses
                        </div>
                        <div
                          class="MenuItems-spacer-id"
                        />
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Show
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              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 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                              />
                            </svg>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MenuItems-deleteButton-id MuiIconButton-colorPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              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"
                              />
                            </svg>
                          </span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="rst__node"
                  style="height:56px"
                >
                  <div
                    class="rst__lineBlock rst__lineHalfHorizontalRight rst__lineFullVertical"
                    style="width:44px"
                  />
                  <div
                    class="rst__nodeContent"
                    style="left:44px"
                  >
                    <div
                      class="MenuItems-rowContainer-id"
                      style="margin-left:0"
                    >
                      <div
                        class="MuiPaper-root-id MuiPaper-elevation0-id MenuItems-row-id MuiPaper-rounded-id"
                      >
                        <div>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MenuItems-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>
                        <div
                          class="MuiTypography-root-id MenuItems-nodeTitle-id MuiTypography-body1-id"
                        >
                          Groceries
                        </div>
                        <div
                          class="MenuItems-spacer-id"
                        />
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Show
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              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 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                              />
                            </svg>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MenuItems-deleteButton-id MuiIconButton-colorPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              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"
                              />
                            </svg>
                          </span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="rst__node"
                  style="height:56px"
                >
                  <div
                    class="rst__lineBlock rst__lineHalfVerticalTop rst__lineHalfHorizontalRight"
                    style="width:44px"
                  />
                  <div
                    class="rst__nodeContent"
                    style="left:44px"
                  >
                    <div
                      class="MenuItems-rowContainer-id"
                      style="margin-left:0"
                    >
                      <div
                        class="MuiPaper-root-id MuiPaper-elevation0-id MenuItems-row-id MuiPaper-rounded-id"
                      >
                        <div>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MenuItems-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>
                        <div
                          class="MuiTypography-root-id MenuItems-nodeTitle-id MuiTypography-body1-id"
                        >
                          Apparel
                        </div>
                        <div
                          class="MenuItems-spacer-id"
                        />
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Show
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              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 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                              />
                            </svg>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MenuItems-deleteButton-id MuiIconButton-colorPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              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"
                              />
                            </svg>
                          </span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MenuItems-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Create new item
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Navigation / Menu details form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-h5-id"
          >
            Navigation
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Creating the navigation structure is done by dragging and dropping. Simply create a new menu item and then drag it into its destined place. You can move items inside one another to create a tree structure and drag items up and down to create a hierarchy
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Menu Title
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="navbar"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Invalid value
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Menu Items
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Undo
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MenuItems-container-id"
              style="min-height:224px;padding:;padding-top:"
            >
              <div
                class="rst__tree MenuItems-root-id"
              >
                <div
                  class="rst__node"
                  style="height:56px"
                >
                  <div
                    class="rst__lineBlock rst__lineHalfHorizontalRight rst__lineHalfVerticalBottom"
                    style="width:44px"
                  />
                  <div
                    class="rst__nodeContent"
                    style="left:44px"
                  >
                    <div
                      class="MenuItems-rowContainer-id"
                      style="margin-left:0"
                    >
                      <div
                        class="MuiPaper-root-id MuiPaper-elevation0-id MenuItems-row-id MuiPaper-rounded-id"
                      >
                        <div>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MenuItems-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>
                        <div
                          class="MuiTypography-root-id MenuItems-nodeTitle-id MuiTypography-body1-id"
                        >
                          Accessories
                        </div>
                        <div
                          class="MenuItems-spacer-id"
                        />
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Show
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              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 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                              />
                            </svg>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MenuItems-deleteButton-id MuiIconButton-colorPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              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"
                              />
                            </svg>
                          </span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="rst__node"
                  style="height:56px"
                >
                  <div
                    class="rst__lineBlock rst__lineFullVertical"
                    style="width:44px"
                  />
                  <div
                    class="rst__lineBlock rst__lineHalfHorizontalRight rst__lineFullVertical"
                    style="width:44px"
                  />
                  <div
                    class="rst__nodeContent"
                    style="left:88px"
                  >
                    <div
                      class="MenuItems-rowContainer-id"
                      style="margin-left:40px"
                    >
                      <div
                        class="MuiPaper-root-id MuiPaper-elevation0-id MenuItems-row-id MuiPaper-rounded-id"
                      >
                        <div>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MenuItems-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>
                        <div
                          class="MuiTypography-root-id MenuItems-nodeTitle-id MuiTypography-body1-id"
                        >
                          Jewelry
                        </div>
                        <div
                          class="MenuItems-spacer-id"
                        />
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Show
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              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 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                              />
                            </svg>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MenuItems-deleteButton-id MuiIconButton-colorPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              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"
                              />
                            </svg>
                          </span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="rst__node"
                  style="height:56px"
                >
                  <div
                    class="rst__lineBlock rst__lineFullVertical"
                    style="width:44px"
                  />
                  <div
                    class="rst__lineBlock rst__lineHalfVerticalTop rst__lineHalfHorizontalRight"
                    style="width:44px"
                  />
                  <div
                    class="rst__nodeContent"
                    style="left:88px"
                  >
                    <div
                      class="MenuItems-rowContainer-id"
                      style="margin-left:40px"
                    >
                      <div
                        class="MuiPaper-root-id MuiPaper-elevation0-id MenuItems-row-id MuiPaper-rounded-id"
                      >
                        <div>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MenuItems-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>
                        <div
                          class="MuiTypography-root-id MenuItems-nodeTitle-id MuiTypography-body1-id"
                        >
                          Glasses
                        </div>
                        <div
                          class="MenuItems-spacer-id"
                        />
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Show
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              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 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                              />
                            </svg>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MenuItems-deleteButton-id MuiIconButton-colorPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              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"
                              />
                            </svg>
                          </span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="rst__node"
                  style="height:56px"
                >
                  <div
                    class="rst__lineBlock rst__lineHalfHorizontalRight rst__lineFullVertical"
                    style="width:44px"
                  />
                  <div
                    class="rst__nodeContent"
                    style="left:44px"
                  >
                    <div
                      class="MenuItems-rowContainer-id"
                      style="margin-left:0"
                    >
                      <div
                        class="MuiPaper-root-id MuiPaper-elevation0-id MenuItems-row-id MuiPaper-rounded-id"
                      >
                        <div>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MenuItems-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>
                        <div
                          class="MuiTypography-root-id MenuItems-nodeTitle-id MuiTypography-body1-id"
                        >
                          Groceries
                        </div>
                        <div
                          class="MenuItems-spacer-id"
                        />
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Show
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              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 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                              />
                            </svg>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MenuItems-deleteButton-id MuiIconButton-colorPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              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"
                              />
                            </svg>
                          </span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="rst__node"
                  style="height:56px"
                >
                  <div
                    class="rst__lineBlock rst__lineHalfVerticalTop rst__lineHalfHorizontalRight"
                    style="width:44px"
                  />
                  <div
                    class="rst__nodeContent"
                    style="left:44px"
                  >
                    <div
                      class="MenuItems-rowContainer-id"
                      style="margin-left:0"
                    >
                      <div
                        class="MuiPaper-root-id MuiPaper-elevation0-id MenuItems-row-id MuiPaper-rounded-id"
                      >
                        <div>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MenuItems-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>
                        <div
                          class="MuiTypography-root-id MenuItems-nodeTitle-id MuiTypography-body1-id"
                        >
                          Apparel
                        </div>
                        <div
                          class="MenuItems-spacer-id"
                        />
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Show
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              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 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                              />
                            </svg>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MenuItems-deleteButton-id MuiIconButton-colorPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              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"
                              />
                            </svg>
                          </span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MenuItems-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Create new item
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Navigation / Menu details loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-h5-id"
          >
            Navigation
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Creating the navigation structure is done by dragging and dropping. Simply create a new menu item and then drag it into its destined place. You can move items inside one another to create a tree structure and drag items up and down to create a hierarchy
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Menu Title
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Menu Items
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Undo
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MenuItems-container-id"
              style="min-height:56px;padding:0 24px;padding-top:20px"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </div>
            <div
              class="MuiCardActions-root-id MenuItems-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Create new item
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

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

exports[`Storyshots Views / Navigation / Menu list default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Navigation
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Menu
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <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 TableCellHeader-root-id MenuList-colTitle-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Menu Title
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id MenuList-colItems-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Items
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id"
                scope="col"
              />
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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 MenuList-row-id MuiTableRow-hover-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"
                      />
                    </svg>
                  </span>
                </button>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MenuList-row-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <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"
                      />
                    </svg>
                  </span>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Navigation / Menu list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Navigation
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Menu
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 TableCellHeader-root-id MenuList-colTitle-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Menu Title
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id MenuList-colItems-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Items
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id"
                scope="col"
              />
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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 TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-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 Checkbox-root-id MuiButtonBase-disabled-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 MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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"
                      />
                    </svg>
                  </span>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Navigation / Menu list no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Navigation
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Menu
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id MenuList-colTitle-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Menu Title
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id MenuList-colItems-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Items
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id"
                scope="col"
              />
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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>
</div>
`;

exports[`Storyshots Views / Not found error page default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="NotFoundPage-root-id"
  >
    <div
      class="NotFoundPage-container-id"
    >
      <div
        class="NotFoundPage-innerContainer-id"
      >
        <div>
          <div
            class="MuiTypography-root-id NotFoundPage-header-id MuiTypography-h3-id"
          >
            Ooops!...
          </div>
          <div
            class="MuiTypography-root-id NotFoundPage-header-id MuiTypography-h4-id"
          >
            Something's missing
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Sorry, the page was not found
          </div>
        </div>
        <div>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id NotFoundPage-button-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Go back to dashboard
            </span>
          </button>
        </div>
      </div>
      <div>
        <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 ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Draft Orders
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create order
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Drafts
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Draft"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <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 TableCellHeader-root-id OrderDraftList-colNumber-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    No. of Order
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderDraftList-colDate-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Date
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderDraftList-colCustomer-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Customer
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderDraftList-colTotal-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Total
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="5"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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 OrderDraftList-link-id MuiTableRow-hover-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 OrderDraftList-colNumber-id"
              >
                #20
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658650376"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Laura Stone 1 2
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
              >
                $305.17
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-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 OrderDraftList-colNumber-id"
              >
                #19
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658650124"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Elizabeth Vaughn
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
              >
                $1,215.89
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-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 OrderDraftList-colNumber-id"
              >
                #18
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658650019"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                david.lawson@example.com
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
              >
                $321.71
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-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 OrderDraftList-colNumber-id"
              >
                #17
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658649864"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Aaron Randall
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
              >
                $271.95
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-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 OrderDraftList-colNumber-id"
              >
                #16
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658649610"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Laura Jensen
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
              >
                $335.84
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-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 OrderDraftList-colNumber-id"
              >
                #15
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658649336"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Jenna Villa
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
              >
                $1,042.15
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-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 OrderDraftList-colNumber-id"
              >
                #14
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658649103"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Wesley Davis
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
              >
                $213.69
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-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 OrderDraftList-colNumber-id"
              >
                #13
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658648921"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Anthony Gonzalez
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
              >
                $367.03
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-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 OrderDraftList-colNumber-id"
              >
                #12
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658648750"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Denise Freeman
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
              >
                $298.76
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-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 OrderDraftList-colNumber-id"
              >
                #11
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658648598"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                James Ball
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
              >
                $663.69
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-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 OrderDraftList-colNumber-id"
              >
                #10
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658648409"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Michael Martinez
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
              >
                $280.41
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-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 OrderDraftList-colNumber-id"
              >
                #9
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658648185"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Melissa Simon
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
              >
                $234.93
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-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 OrderDraftList-colNumber-id"
              >
                #8
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658647953"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Justin Mccoy
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
              >
                $485.19
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-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 OrderDraftList-colNumber-id"
              >
                #7
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658647828"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Anthony Gonzalez
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
              >
                $223.54
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-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 OrderDraftList-colNumber-id"
              >
                #6
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658647636"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Bradley Ford
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
              >
                $237.55
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-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 OrderDraftList-colNumber-id"
              >
                #5
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658647420"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                David Lawson
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
              >
                $453.55
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-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 OrderDraftList-colNumber-id"
              >
                #4
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658647230"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Lauren Watson
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
              >
                $812.67
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-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 OrderDraftList-colNumber-id"
              >
                #3
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658646972"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Mark Lee
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
              >
                $481.41
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-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 OrderDraftList-colNumber-id"
              >
                #2
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658646751"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Kara Murphy
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
              >
                $569.19
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-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 OrderDraftList-colNumber-id"
              >
                #1
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658646314"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                Curtis Bailey
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
              >
                $557.00
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Draft order list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Draft Orders
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
            disabled=""
            tabindex="-1"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create order
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Drafts
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Draft"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 TableCellHeader-root-id OrderDraftList-colNumber-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    No. of Order
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderDraftList-colDate-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Date
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderDraftList-colCustomer-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Customer
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderDraftList-colTotal-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Total
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="5"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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 TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-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 Checkbox-root-id MuiButtonBase-disabled-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 OrderDraftList-colNumber-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Draft order list when no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Draft Orders
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create order
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Drafts
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Draft"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderDraftList-colNumber-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    No. of Order
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderDraftList-colDate-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Date
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderDraftList-colCustomer-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Customer
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderDraftList-colTotal-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Total
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="5"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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>
</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"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        #9
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="OrderDetailsPage-date-id"
    >
      <div
        class="MuiTypography-root-id MuiTypography-caption-id"
      >
        <time
          class=""
          datetime="1536658648185"
          title="Sep 11, 2018 5:37 AM"
        >
          in a month
        </time>
      </div>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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"
          />
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderUnfulfilledItems-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderUnfulfilledItems-clickableRow-id MuiTableRow-hover-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 MuiAvatar-circle-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>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Fulfilled (1)
                <div
                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                >
                  #9-2
                </div>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderFulfillment-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderFulfillment-clickableRow-id MuiTableRow-hover-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-circle-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>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Fulfilled (1)
                <div
                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                >
                  #9-1
                </div>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderFulfillment-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderFulfillment-clickableRow-id MuiTableRow-hover-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-circle-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>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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"
        >
          <div
            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            Order History
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="Timeline-root-id"
          >
            <form>
              <div
                class="Timeline-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id Timeline-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-circle-id Timeline-avatar-id MuiAvatar-colorDefault-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <textarea
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="message"
                        placeholder="Leave your note here..."
                        rows="1"
                      />
                      <textarea
                        aria-hidden="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        readonly=""
                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                        tabindex="-1"
                      />
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id Timeline-button-id MuiButton-textPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
            </form>
            <div
              class="TimelineEvent-root-id"
            >
              <span
                class="TimelineEvent-dot-id"
              />
              <div
                class="TimelineEvent-noExpander-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Fulfilled 1 items
                </div>
                <div
                  class="MuiTypography-root-id TimelineEvent-date-id MuiTypography-body1-id"
                >
                  <time
                    class=""
                    datetime="1537190544376"
                    title="Sep 17, 2018 9:22 AM"
                  >
                    in a month
                  </time>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
            >
              melissa.simon@example.com
            </div>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Shipping Address
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Melissa Simon
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              487 Roberto Shores
              <br />
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              66272 West Patriciastad
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Wyspy Salomona
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            />
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Billing Address
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Same as shipping address
            </div>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Notes
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Lorem ipsum dolor sit amet
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</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"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        #9
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
              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="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      class="OrderDetailsPage-date-id"
    >
      <div
        class="MuiTypography-root-id MuiTypography-caption-id"
      >
        <time
          class=""
          datetime="1536658648185"
          title="Sep 11, 2018 5:37 AM"
        >
          in a month
        </time>
      </div>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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"
          />
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderUnfulfilledItems-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderUnfulfilledItems-clickableRow-id MuiTableRow-hover-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 MuiAvatar-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Fulfill
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <div
                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                >
                  #9-2
                </div>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                  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="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="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderFulfillment-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderFulfillment-clickableRow-id MuiTableRow-hover-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-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add tracking
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <div
                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                >
                  #9-1
                </div>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                  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="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="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderFulfillment-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderFulfillment-clickableRow-id MuiTableRow-hover-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-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add tracking
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Capture
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Refund
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Void
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Mark as paid
              </span>
            </button>
          </div>
        </div>
        <div
          class="OrderHistory-root-id"
        >
          <div
            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            Order History
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="Timeline-root-id"
          >
            <form>
              <div
                class="Timeline-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id Timeline-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-circle-id Timeline-avatar-id MuiAvatar-colorDefault-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <textarea
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="message"
                        placeholder="Leave your note here..."
                        rows="1"
                      />
                      <textarea
                        aria-hidden="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        readonly=""
                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                        tabindex="-1"
                      />
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id Timeline-button-id MuiButton-textPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
            </form>
            <div
              class="TimelineEvent-root-id"
            >
              <span
                class="TimelineEvent-dot-id"
              />
              <div
                class="TimelineEvent-noExpander-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Fulfilled 1 items
                </div>
                <div
                  class="MuiTypography-root-id TimelineEvent-date-id MuiTypography-body1-id"
                >
                  <time
                    class=""
                    datetime="1537190544376"
                    title="Sep 17, 2018 9:22 AM"
                  >
                    in a month
                  </time>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
            >
              melissa.simon@example.com
            </div>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Shipping Address
              </div>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Melissa Simon
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              487 Roberto Shores
              <br />
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              66272 West Patriciastad
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Wyspy Salomona
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            />
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Billing Address
              </div>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Same as shipping address
            </div>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Notes
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Lorem ipsum dolor sit amet
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</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"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        #9
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
              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="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      class="OrderDetailsPage-date-id"
    >
      <div
        class="MuiTypography-root-id MuiTypography-caption-id"
      >
        <time
          class=""
          datetime="1536658648185"
          title="Sep 11, 2018 5:37 AM"
        >
          in a month
        </time>
      </div>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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"
          />
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderUnfulfilledItems-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderUnfulfilledItems-clickableRow-id MuiTableRow-hover-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 MuiAvatar-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Fulfill
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <div
                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                >
                  #9-2
                </div>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                  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="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="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderFulfillment-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderFulfillment-clickableRow-id MuiTableRow-hover-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-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add tracking
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <div
                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                >
                  #9-1
                </div>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                  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="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="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderFulfillment-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderFulfillment-clickableRow-id MuiTableRow-hover-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-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add tracking
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Capture
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Refund
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Void
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Mark as paid
              </span>
            </button>
          </div>
        </div>
        <div
          class="OrderHistory-root-id"
        >
          <div
            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            Order History
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="Timeline-root-id"
          >
            <form>
              <div
                class="Timeline-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id Timeline-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-circle-id Timeline-avatar-id MuiAvatar-colorDefault-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <textarea
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="message"
                        placeholder="Leave your note here..."
                        rows="1"
                      />
                      <textarea
                        aria-hidden="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        readonly=""
                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                        tabindex="-1"
                      />
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id Timeline-button-id MuiButton-textPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
            </form>
            <div
              class="TimelineEvent-root-id"
            >
              <span
                class="TimelineEvent-dot-id"
              />
              <div
                class="TimelineEvent-noExpander-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Fulfilled 1 items
                </div>
                <div
                  class="MuiTypography-root-id TimelineEvent-date-id MuiTypography-body1-id"
                >
                  <time
                    class=""
                    datetime="1537190544376"
                    title="Sep 17, 2018 9:22 AM"
                  >
                    in a month
                  </time>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
            >
              melissa.simon@example.com
            </div>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Shipping Address
              </div>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Melissa Simon
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              487 Roberto Shores
              <br />
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              66272 West Patriciastad
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Wyspy Salomona
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            />
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Billing Address
              </div>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Same as shipping address
            </div>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Notes
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Lorem ipsum dolor sit amet
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</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"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        <span
          class="Skeleton-skeleton-id"
          style="width:10em"
        >
          ‌
        </span>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
              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="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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderFulfillment-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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-circle-id TableCellAvatar-avatar-id MuiAvatar-colorDefault-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"
                          />
                        </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>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </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"
        >
          <div
            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            Order History
          </div>
          <hr
            class="Hr-root-id"
          />
          <span
            class="Skeleton-skeleton-id"
          >
            ‌
          </span>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <span
              class="Skeleton-skeleton-id"
            >
              ‌
            </span>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Shipping Address
              </div>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  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"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Billing Address
              </div>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Notes
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <span
              class="Skeleton-skeleton-id"
            >
              ‌
            </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"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        #9
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
              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="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      class="OrderDetailsPage-date-id"
    >
      <div
        class="MuiTypography-root-id MuiTypography-caption-id"
      >
        <time
          class=""
          datetime="1536658648185"
          title="Sep 11, 2018 5:37 AM"
        >
          in a month
        </time>
      </div>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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"
          />
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderUnfulfilledItems-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderUnfulfilledItems-clickableRow-id MuiTableRow-hover-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 MuiAvatar-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Fulfill
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <div
                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                >
                  #9-2
                </div>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                  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="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="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderFulfillment-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderFulfillment-clickableRow-id MuiTableRow-hover-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-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add tracking
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <div
                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                >
                  #9-1
                </div>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                  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="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="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderFulfillment-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderFulfillment-clickableRow-id MuiTableRow-hover-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-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add tracking
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Capture
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Refund
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Void
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Mark as paid
              </span>
            </button>
          </div>
        </div>
        <div
          class="OrderHistory-root-id"
        >
          <div
            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            Order History
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="Timeline-root-id"
          >
            <form>
              <div
                class="Timeline-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id Timeline-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-circle-id Timeline-avatar-id MuiAvatar-colorDefault-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <textarea
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="message"
                        placeholder="Leave your note here..."
                        rows="1"
                      />
                      <textarea
                        aria-hidden="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        readonly=""
                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                        tabindex="-1"
                      />
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id Timeline-button-id MuiButton-textPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
            </form>
            <div
              class="TimelineEvent-root-id"
            >
              <span
                class="TimelineEvent-dot-id"
              />
              <div
                class="TimelineEvent-noExpander-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Fulfilled 1 items
                </div>
                <div
                  class="MuiTypography-root-id TimelineEvent-date-id MuiTypography-body1-id"
                >
                  <time
                    class=""
                    datetime="1537190544376"
                    title="Sep 17, 2018 9:22 AM"
                  >
                    in a month
                  </time>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
            >
              melissa.simon@example.com
            </div>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Shipping Address
              </div>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Melissa Simon
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              487 Roberto Shores
              <br />
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              66272 West Patriciastad
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Wyspy Salomona
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            />
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Billing Address
              </div>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Same as shipping address
            </div>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Notes
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              No notes from customer
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</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"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        #9
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
              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="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      class="OrderDetailsPage-date-id"
    >
      <div
        class="MuiTypography-root-id MuiTypography-caption-id"
      >
        <time
          class=""
          datetime="1536658648185"
          title="Sep 11, 2018 5:37 AM"
        >
          in a month
        </time>
      </div>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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"
          />
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderUnfulfilledItems-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderUnfulfilledItems-clickableRow-id MuiTableRow-hover-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 MuiAvatar-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Fulfill
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <div
                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                >
                  #9-2
                </div>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                  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="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="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderFulfillment-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderFulfillment-clickableRow-id MuiTableRow-hover-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-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add tracking
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <div
                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                >
                  #9-1
                </div>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                  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="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="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderFulfillment-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderFulfillment-clickableRow-id MuiTableRow-hover-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-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add tracking
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Capture
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Refund
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Void
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Mark as paid
              </span>
            </button>
          </div>
        </div>
        <div
          class="OrderHistory-root-id"
        >
          <div
            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            Order History
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="Timeline-root-id"
          >
            <form>
              <div
                class="Timeline-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id Timeline-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-circle-id Timeline-avatar-id MuiAvatar-colorDefault-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <textarea
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="message"
                        placeholder="Leave your note here..."
                        rows="1"
                      />
                      <textarea
                        aria-hidden="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        readonly=""
                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                        tabindex="-1"
                      />
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id Timeline-button-id MuiButton-textPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
            </form>
            <div
              class="TimelineEvent-root-id"
            >
              <span
                class="TimelineEvent-dot-id"
              />
              <div
                class="TimelineEvent-noExpander-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Fulfilled 1 items
                </div>
                <div
                  class="MuiTypography-root-id TimelineEvent-date-id MuiTypography-body1-id"
                >
                  <time
                    class=""
                    datetime="1537190544376"
                    title="Sep 17, 2018 9:22 AM"
                  >
                    in a month
                  </time>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
            >
              melissa.simon@example.com
            </div>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Shipping Address
              </div>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Melissa Simon
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              487 Roberto Shores
              <br />
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              66272 West Patriciastad
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Wyspy Salomona
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            />
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Billing Address
              </div>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Same as shipping address
            </div>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Notes
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Lorem ipsum dolor sit amet
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</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"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        #9
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
              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="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      class="OrderDetailsPage-date-id"
    >
      <div
        class="MuiTypography-root-id MuiTypography-caption-id"
      >
        <time
          class=""
          datetime="1536658648185"
          title="Sep 11, 2018 5:37 AM"
        >
          in a month
        </time>
      </div>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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"
          />
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderUnfulfilledItems-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderUnfulfilledItems-clickableRow-id MuiTableRow-hover-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 MuiAvatar-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Fulfill
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <div
                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                >
                  #9-2
                </div>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                  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="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="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderFulfillment-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderFulfillment-clickableRow-id MuiTableRow-hover-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-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add tracking
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <div
                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                >
                  #9-1
                </div>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                  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="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="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderFulfillment-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderFulfillment-clickableRow-id MuiTableRow-hover-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-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add tracking
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Capture
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Refund
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Void
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Mark as paid
              </span>
            </button>
          </div>
        </div>
        <div
          class="OrderHistory-root-id"
        >
          <div
            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            Order History
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="Timeline-root-id"
          >
            <form>
              <div
                class="Timeline-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id Timeline-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-circle-id Timeline-avatar-id MuiAvatar-colorDefault-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <textarea
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="message"
                        placeholder="Leave your note here..."
                        rows="1"
                      />
                      <textarea
                        aria-hidden="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        readonly=""
                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                        tabindex="-1"
                      />
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id Timeline-button-id MuiButton-textPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
            </form>
            <div
              class="TimelineEvent-root-id"
            >
              <span
                class="TimelineEvent-dot-id"
              />
              <div
                class="TimelineEvent-noExpander-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Fulfilled 1 items
                </div>
                <div
                  class="MuiTypography-root-id TimelineEvent-date-id MuiTypography-body1-id"
                >
                  <time
                    class=""
                    datetime="1537190544376"
                    title="Sep 17, 2018 9:22 AM"
                  >
                    in a month
                  </time>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
            >
              melissa.simon@example.com
            </div>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Shipping Address
              </div>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Not set
            </div>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Billing Address
              </div>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Melissa Simon
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              487 Roberto Shores
              <br />
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              66272 West Patriciastad
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Wyspy Salomona
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            />
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Notes
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Lorem ipsum dolor sit amet
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</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"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        #9
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
              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="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      class="OrderDetailsPage-date-id"
    >
      <div
        class="MuiTypography-root-id MuiTypography-caption-id"
      >
        <time
          class=""
          datetime="1536658648185"
          title="Sep 11, 2018 5:37 AM"
        >
          in a month
        </time>
      </div>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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"
          />
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderUnfulfilledItems-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderUnfulfilledItems-clickableRow-id MuiTableRow-hover-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 MuiAvatar-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Fulfill
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <div
                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                >
                  #9-2
                </div>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                  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="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="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderFulfillment-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderFulfillment-clickableRow-id MuiTableRow-hover-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-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add tracking
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <div
                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                >
                  #9-1
                </div>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                  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="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="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderFulfillment-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderFulfillment-clickableRow-id MuiTableRow-hover-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-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add tracking
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Capture
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Refund
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Void
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Mark as paid
              </span>
            </button>
          </div>
        </div>
        <div
          class="OrderHistory-root-id"
        >
          <div
            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            Order History
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="Timeline-root-id"
          >
            <form>
              <div
                class="Timeline-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id Timeline-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-circle-id Timeline-avatar-id MuiAvatar-colorDefault-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <textarea
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="message"
                        placeholder="Leave your note here..."
                        rows="1"
                      />
                      <textarea
                        aria-hidden="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        readonly=""
                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                        tabindex="-1"
                      />
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id Timeline-button-id MuiButton-textPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
            </form>
            <div
              class="TimelineEvent-root-id"
            >
              <span
                class="TimelineEvent-dot-id"
              />
              <div
                class="TimelineEvent-noExpander-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Fulfilled 1 items
                </div>
                <div
                  class="MuiTypography-root-id TimelineEvent-date-id MuiTypography-body1-id"
                >
                  <time
                    class=""
                    datetime="1537190544376"
                    title="Sep 17, 2018 9:22 AM"
                  >
                    in a month
                  </time>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
            >
              melissa.simon@example.com
            </div>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Shipping Address
              </div>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Melissa Simon
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              487 Roberto Shores
              <br />
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              66272 West Patriciastad
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Wyspy Salomona
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            />
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Billing Address
              </div>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Same as shipping address
            </div>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Notes
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Lorem ipsum dolor sit amet
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</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"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        #9
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
              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="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      class="OrderDetailsPage-date-id"
    >
      <div
        class="MuiTypography-root-id MuiTypography-caption-id"
      >
        <time
          class=""
          datetime="1536658648185"
          title="Sep 11, 2018 5:37 AM"
        >
          in a month
        </time>
      </div>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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"
          />
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderUnfulfilledItems-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderUnfulfilledItems-clickableRow-id MuiTableRow-hover-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 MuiAvatar-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Fulfill
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <div
                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                >
                  #9-2
                </div>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                  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="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="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderFulfillment-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderFulfillment-clickableRow-id MuiTableRow-hover-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-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add tracking
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <div
                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                >
                  #9-1
                </div>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                  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="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="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderFulfillment-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderFulfillment-clickableRow-id MuiTableRow-hover-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-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add tracking
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Capture
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Refund
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Void
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Mark as paid
              </span>
            </button>
          </div>
        </div>
        <div
          class="OrderHistory-root-id"
        >
          <div
            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            Order History
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="Timeline-root-id"
          >
            <form>
              <div
                class="Timeline-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id Timeline-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-circle-id Timeline-avatar-id MuiAvatar-colorDefault-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <textarea
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="message"
                        placeholder="Leave your note here..."
                        rows="1"
                      />
                      <textarea
                        aria-hidden="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        readonly=""
                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                        tabindex="-1"
                      />
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id Timeline-button-id MuiButton-textPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
            </form>
            <div
              class="TimelineEvent-root-id"
            >
              <span
                class="TimelineEvent-dot-id"
              />
              <div
                class="TimelineEvent-noExpander-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Fulfilled 1 items
                </div>
                <div
                  class="MuiTypography-root-id TimelineEvent-date-id MuiTypography-body1-id"
                >
                  <time
                    class=""
                    datetime="1537190544376"
                    title="Sep 17, 2018 9:22 AM"
                  >
                    in a month
                  </time>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
            >
              melissa.simon@example.com
            </div>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Shipping Address
              </div>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Melissa Simon
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              487 Roberto Shores
              <br />
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              66272 West Patriciastad
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Wyspy Salomona
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            />
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Billing Address
              </div>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Same as shipping address
            </div>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Notes
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Lorem ipsum dolor sit amet
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</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"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        #9
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
              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="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      class="OrderDetailsPage-date-id"
    >
      <div
        class="MuiTypography-root-id MuiTypography-caption-id"
      >
        <time
          class=""
          datetime="1536658648185"
          title="Sep 11, 2018 5:37 AM"
        >
          in a month
        </time>
      </div>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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"
          />
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderUnfulfilledItems-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderUnfulfilledItems-clickableRow-id MuiTableRow-hover-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 MuiAvatar-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Fulfill
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <div
                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                >
                  #9-2
                </div>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                  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="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="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderFulfillment-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderFulfillment-clickableRow-id MuiTableRow-hover-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-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add tracking
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <div
                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                >
                  #9-1
                </div>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                  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="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="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderFulfillment-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderFulfillment-clickableRow-id MuiTableRow-hover-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-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add tracking
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Capture
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Refund
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Void
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Mark as paid
              </span>
            </button>
          </div>
        </div>
        <div
          class="OrderHistory-root-id"
        >
          <div
            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            Order History
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="Timeline-root-id"
          >
            <form>
              <div
                class="Timeline-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id Timeline-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-circle-id Timeline-avatar-id MuiAvatar-colorDefault-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <textarea
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="message"
                        placeholder="Leave your note here..."
                        rows="1"
                      />
                      <textarea
                        aria-hidden="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        readonly=""
                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                        tabindex="-1"
                      />
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id Timeline-button-id MuiButton-textPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
            </form>
            <div
              class="TimelineEvent-root-id"
            >
              <span
                class="TimelineEvent-dot-id"
              />
              <div
                class="TimelineEvent-noExpander-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Fulfilled 1 items
                </div>
                <div
                  class="MuiTypography-root-id TimelineEvent-date-id MuiTypography-body1-id"
                >
                  <time
                    class=""
                    datetime="1537190544376"
                    title="Sep 17, 2018 9:22 AM"
                  >
                    in a month
                  </time>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
            >
              melissa.simon@example.com
            </div>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Shipping Address
              </div>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Melissa Simon
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              487 Roberto Shores
              <br />
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              66272 West Patriciastad
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Wyspy Salomona
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            />
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Billing Address
              </div>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Same as shipping address
            </div>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Notes
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Lorem ipsum dolor sit amet
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</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"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        #9
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
              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="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      class="OrderDetailsPage-date-id"
    >
      <div
        class="MuiTypography-root-id MuiTypography-caption-id"
      >
        <time
          class=""
          datetime="1536658648185"
          title="Sep 11, 2018 5:37 AM"
        >
          in a month
        </time>
      </div>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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"
          />
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderUnfulfilledItems-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderUnfulfilledItems-clickableRow-id MuiTableRow-hover-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 MuiAvatar-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Fulfill
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <div
                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                >
                  #9-2
                </div>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                  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="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="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderFulfillment-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderFulfillment-clickableRow-id MuiTableRow-hover-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-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add tracking
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <div
                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                >
                  #9-1
                </div>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                  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="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="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderFulfillment-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderFulfillment-clickableRow-id MuiTableRow-hover-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-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add tracking
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Capture
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Refund
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Void
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Mark as paid
              </span>
            </button>
          </div>
        </div>
        <div
          class="OrderHistory-root-id"
        >
          <div
            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            Order History
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="Timeline-root-id"
          >
            <form>
              <div
                class="Timeline-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id Timeline-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-circle-id Timeline-avatar-id MuiAvatar-colorDefault-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <textarea
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="message"
                        placeholder="Leave your note here..."
                        rows="1"
                      />
                      <textarea
                        aria-hidden="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        readonly=""
                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                        tabindex="-1"
                      />
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id Timeline-button-id MuiButton-textPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
            </form>
            <div
              class="TimelineEvent-root-id"
            >
              <span
                class="TimelineEvent-dot-id"
              />
              <div
                class="TimelineEvent-noExpander-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Fulfilled 1 items
                </div>
                <div
                  class="MuiTypography-root-id TimelineEvent-date-id MuiTypography-body1-id"
                >
                  <time
                    class=""
                    datetime="1537190544376"
                    title="Sep 17, 2018 9:22 AM"
                  >
                    in a month
                  </time>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
            >
              melissa.simon@example.com
            </div>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Shipping Address
              </div>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Melissa Simon
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              487 Roberto Shores
              <br />
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              66272 West Patriciastad
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Wyspy Salomona
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            />
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Billing Address
              </div>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Same as shipping address
            </div>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Notes
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Lorem ipsum dolor sit amet
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</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"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        #9
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
              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="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      class="OrderDetailsPage-date-id"
    >
      <div
        class="MuiTypography-root-id MuiTypography-caption-id"
      >
        <time
          class=""
          datetime="1536658648185"
          title="Sep 11, 2018 5:37 AM"
        >
          in a month
        </time>
      </div>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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"
          />
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderUnfulfilledItems-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderUnfulfilledItems-clickableRow-id MuiTableRow-hover-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 MuiAvatar-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Fulfill
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <div
                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                >
                  #9-2
                </div>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                  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="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="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderFulfillment-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderFulfillment-clickableRow-id MuiTableRow-hover-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-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add tracking
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <div
                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                >
                  #9-1
                </div>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                  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="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="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderFulfillment-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderFulfillment-clickableRow-id MuiTableRow-hover-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-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add tracking
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Capture
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Refund
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Void
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Mark as paid
              </span>
            </button>
          </div>
        </div>
        <div
          class="OrderHistory-root-id"
        >
          <div
            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            Order History
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="Timeline-root-id"
          >
            <form>
              <div
                class="Timeline-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id Timeline-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-circle-id Timeline-avatar-id MuiAvatar-colorDefault-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <textarea
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="message"
                        placeholder="Leave your note here..."
                        rows="1"
                      />
                      <textarea
                        aria-hidden="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        readonly=""
                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                        tabindex="-1"
                      />
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id Timeline-button-id MuiButton-textPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
            </form>
            <div
              class="TimelineEvent-root-id"
            >
              <span
                class="TimelineEvent-dot-id"
              />
              <div
                class="TimelineEvent-noExpander-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Fulfilled 1 items
                </div>
                <div
                  class="MuiTypography-root-id TimelineEvent-date-id MuiTypography-body1-id"
                >
                  <time
                    class=""
                    datetime="1537190544376"
                    title="Sep 17, 2018 9:22 AM"
                  >
                    in a month
                  </time>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
            >
              melissa.simon@example.com
            </div>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Shipping Address
              </div>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Melissa Simon
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              487 Roberto Shores
              <br />
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              66272 West Patriciastad
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Wyspy Salomona
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            />
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Billing Address
              </div>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Same as shipping address
            </div>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Notes
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Lorem ipsum dolor sit amet
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</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"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        #9
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
              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="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      class="OrderDetailsPage-date-id"
    >
      <div
        class="MuiTypography-root-id MuiTypography-caption-id"
      >
        <time
          class=""
          datetime="1536658648185"
          title="Sep 11, 2018 5:37 AM"
        >
          in a month
        </time>
      </div>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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"
          />
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderUnfulfilledItems-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderUnfulfilledItems-clickableRow-id MuiTableRow-hover-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 MuiAvatar-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Fulfill
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <div
                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                >
                  #9-2
                </div>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                  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="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="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderFulfillment-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderFulfillment-clickableRow-id MuiTableRow-hover-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-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add tracking
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <div
                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                >
                  #9-1
                </div>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                  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="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="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderFulfillment-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderFulfillment-clickableRow-id MuiTableRow-hover-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-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add tracking
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Capture
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Refund
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Void
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Mark as paid
              </span>
            </button>
          </div>
        </div>
        <div
          class="OrderHistory-root-id"
        >
          <div
            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            Order History
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="Timeline-root-id"
          >
            <form>
              <div
                class="Timeline-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id Timeline-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-circle-id Timeline-avatar-id MuiAvatar-colorDefault-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <textarea
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="message"
                        placeholder="Leave your note here..."
                        rows="1"
                      />
                      <textarea
                        aria-hidden="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        readonly=""
                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                        tabindex="-1"
                      />
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id Timeline-button-id MuiButton-textPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
            </form>
            <div
              class="TimelineEvent-root-id"
            >
              <span
                class="TimelineEvent-dot-id"
              />
              <div
                class="TimelineEvent-noExpander-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Fulfilled 1 items
                </div>
                <div
                  class="MuiTypography-root-id TimelineEvent-date-id MuiTypography-body1-id"
                >
                  <time
                    class=""
                    datetime="1537190544376"
                    title="Sep 17, 2018 9:22 AM"
                  >
                    in a month
                  </time>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
            >
              melissa.simon@example.com
            </div>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Shipping Address
              </div>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Melissa Simon
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              487 Roberto Shores
              <br />
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              66272 West Patriciastad
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Wyspy Salomona
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            />
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Billing Address
              </div>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Same as shipping address
            </div>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Notes
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Lorem ipsum dolor sit amet
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</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"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        #9
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
              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="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      class="OrderDetailsPage-date-id"
    >
      <div
        class="MuiTypography-root-id MuiTypography-caption-id"
      >
        <time
          class=""
          datetime="1536658648185"
          title="Sep 11, 2018 5:37 AM"
        >
          in a month
        </time>
      </div>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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"
          />
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderUnfulfilledItems-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderUnfulfilledItems-clickableRow-id MuiTableRow-hover-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 MuiAvatar-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Fulfill
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <div
                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                >
                  #9-2
                </div>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                  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="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="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderFulfillment-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderFulfillment-clickableRow-id MuiTableRow-hover-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-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add tracking
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <div
                  class="MuiTypography-root-id OrderFulfillment-orderNumber-id MuiTypography-body1-id"
                >
                  #9-1
                </div>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                  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="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="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderFulfillment-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id 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 OrderFulfillment-clickableRow-id MuiTableRow-hover-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-circle-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="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add tracking
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Capture
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Refund
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Void
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Mark as paid
              </span>
            </button>
          </div>
        </div>
        <div
          class="OrderHistory-root-id"
        >
          <div
            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            Order History
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="Timeline-root-id"
          >
            <form>
              <div
                class="Timeline-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id Timeline-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-circle-id Timeline-avatar-id MuiAvatar-colorDefault-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <textarea
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="message"
                        placeholder="Leave your note here..."
                        rows="1"
                      />
                      <textarea
                        aria-hidden="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        readonly=""
                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                        tabindex="-1"
                      />
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id Timeline-button-id MuiButton-textPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
            </form>
            <div
              class="TimelineEvent-root-id"
            >
              <span
                class="TimelineEvent-dot-id"
              />
              <div
                class="TimelineEvent-noExpander-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Fulfilled 1 items
                </div>
                <div
                  class="MuiTypography-root-id TimelineEvent-date-id MuiTypography-body1-id"
                >
                  <time
                    class=""
                    datetime="1537190544376"
                    title="Sep 17, 2018 9:22 AM"
                  >
                    in a month
                  </time>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
            >
              melissa.simon@example.com
            </div>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Shipping Address
              </div>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Melissa Simon
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              487 Roberto Shores
              <br />
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              66272 West Patriciastad
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Wyspy Salomona
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            />
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Billing Address
              </div>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Same as shipping address
            </div>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Notes
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Lorem ipsum dolor sit amet
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</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"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        #24
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
              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="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      class="OrderDraftPage-date-id"
    >
      <div
        class="MuiTypography-root-id MuiTypography-caption-id"
      >
        <time
          class=""
          datetime="1537485819811"
          title="Sep 20, 2018 7:23 PM"
        >
          in a month
        </time>
      </div>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Order Details
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add products
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderDraftDetailsProducts-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colName-id"
                    scope="col"
                  >
                    <span
                      class="OrderDraftDetailsProducts-colNameLabel-id"
                    >
                      Product
                    </span>
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colQuantity-id"
                    scope="col"
                  >
                    Quantity
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colPrice-id"
                    scope="col"
                  >
                    Price
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colTotal-id"
                    scope="col"
                  >
                    Total
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colAction-id"
                    scope="col"
                  />
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderDraftDetailsProducts-colName-id"
                  >
                    <div
                      class="TableCellAvatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder60x60.png"
                        />
                      </div>
                      <div
                        class="TableCellAvatar-children-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body2-id"
                        >
                          Davis Group (Hard)
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          58-1338
                        </div>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colQuantity-id"
                  >
                    <form>
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id OrderDraftDetailsProducts-quantityField-id MuiFormControl-fullWidth-id"
                      >
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="quantity"
                            type="number"
                            value="2"
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="PrivateNotchedOutline-legend-id"
                              style="width:0"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                        </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"
                          />
                        </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 MuiAvatar-circle-id TableCellAvatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder60x60.png"
                        />
                      </div>
                      <div
                        class="TableCellAvatar-children-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body2-id"
                        >
                          Anderson PLC (15-1337)
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          15-1337
                        </div>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colQuantity-id"
                  >
                    <form>
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id OrderDraftDetailsProducts-quantityField-id MuiFormControl-fullWidth-id"
                      >
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="quantity"
                            type="number"
                            value="2"
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="PrivateNotchedOutline-legend-id"
                              style="width:0"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                        </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"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <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"
        >
          <div
            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            Order History
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="Timeline-root-id"
          >
            <form>
              <div
                class="Timeline-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id Timeline-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-circle-id Timeline-avatar-id MuiAvatar-colorDefault-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <textarea
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="message"
                        placeholder="Leave your note here..."
                        rows="1"
                      />
                      <textarea
                        aria-hidden="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        readonly=""
                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                        tabindex="-1"
                      />
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id Timeline-button-id MuiButton-textPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Edit
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Anonymous user
            </div>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Shipping Address
              </div>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Not set
            </div>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Billing Address
              </div>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Not set
            </div>
          </div>
        </div>
      </div>
    </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"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        <span
          class="Skeleton-skeleton-id"
          style="width:10em"
        >
          ‌
        </span>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
              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="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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Order Details
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add products
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderDraftDetailsProducts-table-id"
            >
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderDraftDetailsProducts-colName-id"
                  >
                    <div
                      class="TableCellAvatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id MuiAvatar-colorDefault-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"
                          />
                        </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"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <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"
        >
          <div
            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            Order History
          </div>
          <hr
            class="Hr-root-id"
          />
          <span
            class="Skeleton-skeleton-id"
          >
            ‌
          </span>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                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"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Shipping Address
              </div>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  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"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Billing Address
              </div>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  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 no user permissions 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id OrderDraftPage-header-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        #24
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
              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="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      class="OrderDraftPage-date-id"
    >
      <div
        class="MuiTypography-root-id MuiTypography-caption-id"
      >
        <time
          class=""
          datetime="1537485819811"
          title="Sep 20, 2018 7:23 PM"
        >
          in a month
        </time>
      </div>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Order Details
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add products
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderDraftDetailsProducts-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colName-id"
                    scope="col"
                  >
                    <span
                      class="OrderDraftDetailsProducts-colNameLabel-id"
                    >
                      Product
                    </span>
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colQuantity-id"
                    scope="col"
                  >
                    Quantity
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colPrice-id"
                    scope="col"
                  >
                    Price
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colTotal-id"
                    scope="col"
                  >
                    Total
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colAction-id"
                    scope="col"
                  />
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderDraftDetailsProducts-colName-id"
                  >
                    <div
                      class="TableCellAvatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder60x60.png"
                        />
                      </div>
                      <div
                        class="TableCellAvatar-children-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body2-id"
                        >
                          Davis Group (Hard)
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          58-1338
                        </div>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colQuantity-id"
                  >
                    <form>
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id OrderDraftDetailsProducts-quantityField-id MuiFormControl-fullWidth-id"
                      >
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="quantity"
                            type="number"
                            value="2"
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="PrivateNotchedOutline-legend-id"
                              style="width:0"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                        </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"
                          />
                        </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 MuiAvatar-circle-id TableCellAvatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder60x60.png"
                        />
                      </div>
                      <div
                        class="TableCellAvatar-children-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body2-id"
                        >
                          Anderson PLC (15-1337)
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          15-1337
                        </div>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colQuantity-id"
                  >
                    <form>
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id OrderDraftDetailsProducts-quantityField-id MuiFormControl-fullWidth-id"
                      >
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="quantity"
                            type="number"
                            value="2"
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="PrivateNotchedOutline-legend-id"
                              style="width:0"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                        </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"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <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"
        >
          <div
            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            Order History
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="Timeline-root-id"
          >
            <form>
              <div
                class="Timeline-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id Timeline-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-circle-id Timeline-avatar-id MuiAvatar-colorDefault-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <textarea
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="message"
                        placeholder="Leave your note here..."
                        rows="1"
                      />
                      <textarea
                        aria-hidden="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        readonly=""
                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                        tabindex="-1"
                      />
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id Timeline-button-id MuiButton-textPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Anonymous user
            </div>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Shipping Address
              </div>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Not set
            </div>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Billing Address
              </div>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Not set
            </div>
          </div>
        </div>
      </div>
    </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"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        #24
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
              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="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      class="OrderDraftPage-date-id"
    >
      <div
        class="MuiTypography-root-id MuiTypography-caption-id"
      >
        <time
          class=""
          datetime="1537485819811"
          title="Sep 20, 2018 7:23 PM"
        >
          in a month
        </time>
      </div>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Order Details
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add products
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderDraftDetailsProducts-table-id"
            >
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                    colspan="5"
                  >
                    No Products added to Order
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div
          class="OrderHistory-root-id"
        >
          <div
            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            Order History
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="Timeline-root-id"
          >
            <form>
              <div
                class="Timeline-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id Timeline-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-circle-id Timeline-avatar-id MuiAvatar-colorDefault-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <textarea
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="message"
                        placeholder="Leave your note here..."
                        rows="1"
                      />
                      <textarea
                        aria-hidden="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        readonly=""
                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                        tabindex="-1"
                      />
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id Timeline-button-id MuiButton-textPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Edit
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Anonymous user
            </div>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Shipping Address
              </div>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Not set
            </div>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <div
                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
              >
                Billing Address
              </div>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Not set
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Order list default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Orders
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create order
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Orders
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Orders..."
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id 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 TableCellHeader-root-id OrderList-colNumber-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    No. of Order
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colDate-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Date
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colCustomer-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Customer
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colPayment-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Payment
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colFulfillment-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Fulfillment status
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colTotal-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Total
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="7"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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 OrderList-link-id MuiTableRow-hover-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 OrderList-colNumber-id"
              >
                #20
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658650376"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Laura Stone 1 2
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Fully paid
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                >
                  Cancelled
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                $305.17
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-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 OrderList-colNumber-id"
              >
                #19
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658650124"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Elizabeth Vaughn
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Fully paid
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                >
                  Cancelled
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                $1,215.89
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-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 OrderList-colNumber-id"
              >
                #18
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658650019"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                david.lawson@example.com
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                >
                  Unpaid
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                >
                  Draft
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                $321.71
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-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 OrderList-colNumber-id"
              >
                #17
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658649864"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Aaron Randall
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                >
                  Unpaid
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                >
                  Cancelled
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                $271.95
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-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 OrderList-colNumber-id"
              >
                #16
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658649610"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Laura Jensen
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                >
                  Unpaid
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                >
                  Cancelled
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                $335.84
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-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 OrderList-colNumber-id"
              >
                #15
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658649336"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Jenna Villa
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                >
                  Unpaid
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                >
                  Cancelled
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                $1,042.15
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-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 OrderList-colNumber-id"
              >
                #14
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658649103"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Wesley Davis
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                >
                  Unpaid
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                >
                  Cancelled
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                $213.69
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-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 OrderList-colNumber-id"
              >
                #13
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658648921"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Anthony Gonzalez
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                >
                  Unpaid
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                >
                  Cancelled
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                $367.03
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-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 OrderList-colNumber-id"
              >
                #12
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658648750"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Denise Freeman
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                >
                  Unpaid
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                >
                  Cancelled
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                $298.76
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-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 OrderList-colNumber-id"
              >
                #11
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658648598"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                James Ball
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Fully paid
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                >
                  Unfulfilled
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                $663.69
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-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 OrderList-colNumber-id"
              >
                #10
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658648409"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Michael Martinez
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                >
                  Unpaid
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                >
                  Cancelled
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                $280.41
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-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 OrderList-colNumber-id"
              >
                #9
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658648185"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Melissa Simon
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                >
                  Unpaid
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-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 OrderList-colTotal-id"
              >
                $234.93
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-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 OrderList-colNumber-id"
              >
                #8
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658647953"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Justin Mccoy
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                >
                  Unpaid
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-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 OrderList-colTotal-id"
              >
                $485.19
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-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 OrderList-colNumber-id"
              >
                #7
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658647828"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Anthony Gonzalez
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Fully paid
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-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 OrderList-colTotal-id"
              >
                $223.54
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-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 OrderList-colNumber-id"
              >
                #6
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658647636"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Bradley Ford
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                >
                  Unpaid
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Fulfilled
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                $237.55
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-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 OrderList-colNumber-id"
              >
                #5
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658647420"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                David Lawson
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                >
                  Unpaid
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-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 OrderList-colTotal-id"
              >
                $453.55
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-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 OrderList-colNumber-id"
              >
                #4
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658647230"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Lauren Watson
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                >
                  Unpaid
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-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 OrderList-colTotal-id"
              >
                $812.67
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-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 OrderList-colNumber-id"
              >
                #3
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658646972"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Mark Lee
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                >
                  Unpaid
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-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 OrderList-colTotal-id"
              >
                $481.41
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-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 OrderList-colNumber-id"
              >
                #2
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658646751"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Kara Murphy
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Fully paid
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-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 OrderList-colTotal-id"
              >
                $569.19
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-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 OrderList-colNumber-id"
              >
                #1
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <time
                  class=""
                  datetime="1536658646314"
                  title="Sep 11, 2018 5:37 AM"
                >
                  in a month
                </time>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                Curtis Bailey
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Fully paid
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-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 OrderList-colTotal-id"
              >
                $557.00
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Order list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Orders
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create order
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                All Orders
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Orders..."
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id FilterBar-tabActionButton-id MuiButton-textPrimary-id"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            Delete Search
          </span>
        </button>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 TableCellHeader-root-id OrderList-colNumber-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    No. of Order
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colDate-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Date
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colCustomer-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Customer
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colPayment-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Payment
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colFulfillment-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Fulfillment status
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colTotal-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Total
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="7"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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 TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-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 Checkbox-root-id MuiButtonBase-disabled-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 OrderList-colNumber-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Order list when no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Orders
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create order
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Orders
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Orders..."
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colNumber-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    No. of Order
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colDate-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Date
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colCustomer-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Customer
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colPayment-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Payment
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colFulfillment-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Fulfillment status
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderList-colTotal-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Total
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="7"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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>
</div>
`;

exports[`Storyshots Views / Pages / Page details default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          About
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id PageInfo-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Title
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="title"
                    type="text"
                    value="About"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="RichTextEditor-root-id RichTextEditor-scroll-id"
              >
                <div
                  class="RichTextEditor-input-id"
                >
                  <div
                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                  >
                    Content
                  </div>
                  <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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this page easier to find
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Slug
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="slug"
                    placeholder="About"
                    type="text"
                    value="about"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Visibility
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
              >
                <div
                  aria-label="isPublished"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="isPublished"
                          type="radio"
                          value="true"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      <p
                        class="VisibilityCard-label-id"
                      >
                        Visible
                      </p>
                      <span
                        class="VisibilityCard-secondLabel-id"
                      />
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="isPublished"
                          type="radio"
                          value="false"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      <p
                        class="VisibilityCard-label-id"
                      >
                        Hidden
                      </p>
                      <span
                        class="VisibilityCard-secondLabel-id"
                      />
                    </span>
                  </label>
                </div>
              </div>
              <div
                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
              >
                Set publication date
              </div>
              <div
                class="VisibilityCard-children-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 ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          About
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id PageInfo-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Title
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="title"
                    type="text"
                    value="About"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Invalid value
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="RichTextEditor-root-id RichTextEditor-scroll-id"
              >
                <div
                  class="RichTextEditor-input-id"
                >
                  <div
                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                  >
                    Content
                  </div>
                  <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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this page easier to find
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Slug
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="slug"
                    placeholder="About"
                    type="text"
                    value="about"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Invalid value
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Visibility
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
              >
                <div
                  aria-label="isPublished"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="isPublished"
                          type="radio"
                          value="true"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      <p
                        class="VisibilityCard-label-id"
                      >
                        Visible
                      </p>
                      <span
                        class="VisibilityCard-secondLabel-id"
                      />
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="isPublished"
                          type="radio"
                          value="false"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      <p
                        class="VisibilityCard-label-id"
                      >
                        Hidden
                      </p>
                      <span
                        class="VisibilityCard-secondLabel-id"
                      />
                    </span>
                  </label>
                </div>
              </div>
              <div
                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
              >
                Set publication date
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorError-id"
              />
              <div
                class="VisibilityCard-children-id"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Pages / Page details loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <span
            class="Skeleton-skeleton-id"
            style="width:10em"
          >
            ‌
          </span>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id PageInfo-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Title
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="title"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="RichTextEditor-root-id RichTextEditor-scroll-id"
              >
                <div
                  class="RichTextEditor-input-id"
                >
                  <div
                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                  >
                    Content
                  </div>
                  <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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this page easier to find
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Slug
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="slug"
                    placeholder=""
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Visibility
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
              >
                <div
                  aria-label="isPublished"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="isPublished"
                          type="radio"
                          value="true"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      <p
                        class="VisibilityCard-label-id"
                      >
                        Visible
                      </p>
                      <span
                        class="VisibilityCard-secondLabel-id"
                      />
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="isPublished"
                          type="radio"
                          value="false"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      <p
                        class="VisibilityCard-label-id"
                      >
                        Hidden
                      </p>
                      <span
                        class="VisibilityCard-secondLabel-id"
                      />
                    </span>
                  </label>
                </div>
              </div>
              <div
                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
              >
                Set publication date
              </div>
              <div
                class="VisibilityCard-children-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 ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Pages
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create page
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <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 TableCellHeader-root-id PageList-colTitle-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Title
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PageList-colSlug-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Slug
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PageList-colVisibility-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Visibility
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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 PageList-link-id MuiTableRow-hover-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 TableCellHeader-root-id PageList-colTitle-id"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    About
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colSlug-id"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    about
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colVisibility-id"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    <div
                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                    >
                      Published
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id PageList-link-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <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 TableCellHeader-root-id PageList-colTitle-id"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    About
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colSlug-id"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    about
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colVisibility-id"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    <div
                      class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                    >
                      Not Published
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id PageList-link-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <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 TableCellHeader-root-id PageList-colTitle-id"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    About
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colSlug-id"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    about
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colVisibility-id"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    <div
                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                    >
                      Published
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id PageList-link-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <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 TableCellHeader-root-id PageList-colTitle-id"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    About
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colSlug-id"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    about
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colVisibility-id"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    <div
                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                    >
                      Published
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Pages / Page list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Pages
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create page
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 TableCellHeader-root-id PageList-colTitle-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Title
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PageList-colSlug-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Slug
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PageList-colVisibility-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Visibility
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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 TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-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 Checkbox-root-id MuiButtonBase-disabled-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 TableCellHeader-root-id PageList-colTitle-id"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colSlug-id"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colVisibility-id"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Pages / Page list no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Pages
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create page
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PageList-colTitle-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Title
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PageList-colSlug-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Slug
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PageList-colVisibility-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Visibility
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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>
</div>
`;

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

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

exports[`Storyshots Views / Plugins / Plugin details default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Username or account Details
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-h6-id"
          >
            Plugin Information and Status
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            These are general information about your store. They define what is the URL of your store and what is shown in browsers taskbar.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Plugin Information and Status
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
            >
              Plugin Name
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Username or account
            </div>
            <div
              class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
            >
              Description
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna.
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiTypography-root-id PluginInfo-status-id MuiTypography-body1-id"
            >
              Status
            </div>
            <label
              class="MuiFormControlLabel-root-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id Checkbox-checked-id"
                  name="active"
                  type="checkbox"
                  value="true"
                />
              </button>
              <span
                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
              >
                Set plugin as Active
              </span>
            </label>
          </div>
        </div>
        <hr
          class="Hr-root-id PluginsDetailsPage-spacer-id"
        />
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-h6-id"
          >
            Plugin Settings
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            This adress will be used to generate invoices and calculate shipping rates. Email adress you provide here will be used as a contact adress for your customers.
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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="PluginSettings-item-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Username or account
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="Username or account"
                      type="text"
                      value="avatax_user"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                  >
                    Provide user or account details
                  </p>
                </div>
              </div>
              <div
                class="PluginSettings-item-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Password or license
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="Password or license"
                      type="text"
                      value="TEM8S2-2ET83-CGKP1-DPSI2-EPZO1"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                  >
                    Provide password or license details
                  </p>
                </div>
              </div>
              <div
                class="PluginSettings-item-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="Use sandbox"
                      type="checkbox"
                      value="true"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Use sandbox
                  </span>
                </label>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Authorization
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="PluginAuthorization-item-id"
              >
                <div>
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    API key
                  </div>
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    **** 9ab9
                  </div>
                </div>
                <div
                  class="PluginAuthorization-spacer-id"
                />
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Clear
                  </span>
                </button>
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id PluginAuthorization-button-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
              <hr
                class="Hr-root-id PluginAuthorization-hr-id"
              />
              <div
                class="PluginAuthorization-item-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Password
                </div>
                <div
                  class="PluginAuthorization-spacer-id"
                />
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Clear
                  </span>
                </button>
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id PluginAuthorization-button-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
              <hr
                class="Hr-root-id PluginAuthorization-hr-id"
              />
              <div
                class="PluginAuthorization-item-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Empty Password
                </div>
                <div
                  class="PluginAuthorization-spacer-id"
                />
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id PluginAuthorization-button-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create
                  </span>
                </button>
              </div>
            </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 ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Username or account Details
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-h6-id"
          >
            Plugin Information and Status
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            These are general information about your store. They define what is the URL of your store and what is shown in browsers taskbar.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Plugin Information and Status
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
            >
              Plugin Name
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Username or account
            </div>
            <div
              class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
            >
              Description
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna.
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiTypography-root-id PluginInfo-status-id MuiTypography-body1-id"
            >
              Status
            </div>
            <label
              class="MuiFormControlLabel-root-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id Checkbox-checked-id"
                  name="active"
                  type="checkbox"
                  value="true"
                />
              </button>
              <span
                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
              >
                Set plugin as Active
              </span>
            </label>
          </div>
        </div>
        <hr
          class="Hr-root-id PluginsDetailsPage-spacer-id"
        />
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-h6-id"
          >
            Plugin Settings
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            This adress will be used to generate invoices and calculate shipping rates. Email adress you provide here will be used as a contact adress for your customers.
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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="PluginSettings-item-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Username or account
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="Username or account"
                      type="text"
                      value="avatax_user"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                  >
                    Provide user or account details
                  </p>
                </div>
              </div>
              <div
                class="PluginSettings-item-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Password or license
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="Password or license"
                      type="text"
                      value="TEM8S2-2ET83-CGKP1-DPSI2-EPZO1"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                  >
                    Provide password or license details
                  </p>
                </div>
              </div>
              <div
                class="PluginSettings-item-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="Use sandbox"
                      type="checkbox"
                      value="true"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Use sandbox
                  </span>
                </label>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Authorization
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="PluginAuthorization-item-id"
              >
                <div>
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    API key
                  </div>
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    **** 9ab9
                  </div>
                </div>
                <div
                  class="PluginAuthorization-spacer-id"
                />
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Clear
                  </span>
                </button>
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id PluginAuthorization-button-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
              <hr
                class="Hr-root-id PluginAuthorization-hr-id"
              />
              <div
                class="PluginAuthorization-item-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Password
                </div>
                <div
                  class="PluginAuthorization-spacer-id"
                />
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Clear
                  </span>
                </button>
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id PluginAuthorization-button-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
              <hr
                class="Hr-root-id PluginAuthorization-hr-id"
              />
              <div
                class="PluginAuthorization-item-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Empty Password
                </div>
                <div
                  class="PluginAuthorization-spacer-id"
                />
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id PluginAuthorization-button-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create
                  </span>
                </button>
              </div>
            </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 ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          ... Details
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-h6-id"
          >
            Plugin Information and Status
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            These are general information about your store. They define what is the URL of your store and what is shown in browsers taskbar.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Plugin Information and Status
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
            >
              Plugin Name
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            />
            <div
              class="FormSpacer-spacer-id"
            />
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiTypography-root-id PluginInfo-status-id MuiTypography-body1-id"
            >
              Status
            </div>
            <label
              class="MuiFormControlLabel-root-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  name="active"
                  type="checkbox"
                  value="false"
                />
              </button>
              <span
                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
              >
                Set plugin as Active
              </span>
            </label>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Plugins / Plugin details not configurable 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Username or account Details
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-h6-id"
          >
            Plugin Information and Status
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            These are general information about your store. They define what is the URL of your store and what is shown in browsers taskbar.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Plugin Information and Status
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
            >
              Plugin Name
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Username or account
            </div>
            <div
              class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
            >
              Description
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna.
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiTypography-root-id PluginInfo-status-id MuiTypography-body1-id"
            >
              Status
            </div>
            <label
              class="MuiFormControlLabel-root-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id Checkbox-checked-id"
                  name="active"
                  type="checkbox"
                  value="true"
                />
              </button>
              <span
                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
              >
                Set plugin as Active
              </span>
            </label>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Plugins / Plugin list default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Plugins
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Plugins
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Plugins..."
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PluginsList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PluginsList-colActive-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Active
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id PluginsList-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 TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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 PluginsList-link-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PluginsList-colName-id"
              >
                Avalara
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PluginsList-colActive-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Yes
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PluginsList-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 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                    />
                  </svg>
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id PluginsList-link-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PluginsList-colName-id"
              >
                VatLayer
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PluginsList-colActive-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
                >
                  No
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PluginsList-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 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                    />
                  </svg>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Plugins / Plugin list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Plugins
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Plugins
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Plugins..."
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PluginsList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PluginsList-colActive-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Active
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id PluginsList-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 TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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 TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-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 PluginsList-colName-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PluginsList-colActive-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PluginsList-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 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                    />
                  </svg>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Plugins / Plugin list no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Plugins
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Plugins
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Plugins..."
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PluginsList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PluginsList-colActive-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Active
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id PluginsList-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 TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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>
</div>
`;

exports[`Storyshots Views / Product types / Create product type default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create product type
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductTypeDetails-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Product Type Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductTypeTaxes-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Taxes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="SingleAutocompleteSelectField-container-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Taxes
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div>
                      <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Shipping
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Is this product shippable?
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Product types / Create product type form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create product type
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductTypeDetails-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                  data-shrink="false"
                >
                  Product Type Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Generic form error
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductTypeTaxes-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Taxes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="SingleAutocompleteSelectField-container-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Taxes
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div>
                      <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Shipping
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Is this product shippable?
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Product types / Create product type loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <span
            class="Skeleton-skeleton-id"
            style="width:10em"
          >
            ‌
          </span>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductTypeDetails-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Product Type Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductTypeTaxes-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Taxes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="SingleAutocompleteSelectField-container-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Taxes
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      disabled=""
                      type="text"
                      value=""
                    />
                    <div>
                      <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Shipping
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Is this product shippable?
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Product types / Product type details default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          E-books
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductTypeDetails-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Product Type Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="E-books"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductTypeTaxes-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Taxes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="SingleAutocompleteSelectField-container-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Taxes
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="PH405458"
                    />
                    <div>
                      <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
            data-tc="product-attributes"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Product Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign attribute
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-dragRows-id MuiTableCell-paddingCheckbox-id"
                      scope="col"
                    >
                      <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 ProductTypeAttributes-link-id MuiTableRow-hover-id"
                    data-tc="id"
                    data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTo5"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-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"
                      data-tc="name"
                    >
                      Author
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
                      data-tc="slug"
                    >
                      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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductTypeAttributes-link-id MuiTableRow-hover-id"
                    data-tc="id"
                    data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToxMQ=="
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-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"
                      data-tc="name"
                    >
                      Language
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
                      data-tc="slug"
                    >
                      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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductTypeAttributes-link-id MuiTableRow-hover-id"
                    data-tc="id"
                    data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToxMA=="
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-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"
                      data-tc="name"
                    >
                      Publisher
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
                      data-tc="slug"
                    >
                      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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              class="MuiSwitch-root-id"
            >
              <span
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
              >
                <span
                  class="MuiIconButton-label-id"
                >
                  <input
                    class="PrivateSwitchBase-input-id MuiSwitch-input-id"
                    name="hasVariants"
                    type="checkbox"
                  />
                  <span
                    class="MuiSwitch-thumb-id"
                  />
                </span>
              </span>
              <span
                class="MuiSwitch-track-id"
              />
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              <div
                class="ControlledSwitch-label-id"
              >
                <span
                  class="ControlledSwitch-labelText-id"
                >
                  Product type uses Variant Attributes
                </span>
                <div />
              </div>
            </span>
          </label>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Shipping
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Is this product shippable?
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Product types / Product type details form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          E-books
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductTypeDetails-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Product Type Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="E-books"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Generic form error
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductTypeTaxes-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Taxes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="SingleAutocompleteSelectField-container-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Taxes
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="PH405458"
                    />
                    <div>
                      <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
            data-tc="product-attributes"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Product Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign attribute
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-dragRows-id MuiTableCell-paddingCheckbox-id"
                      scope="col"
                    >
                      <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 ProductTypeAttributes-link-id MuiTableRow-hover-id"
                    data-tc="id"
                    data-tc-id="UHJvZHVjdEF0dHJpYnV0ZTo5"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-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"
                      data-tc="name"
                    >
                      Author
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
                      data-tc="slug"
                    >
                      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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductTypeAttributes-link-id MuiTableRow-hover-id"
                    data-tc="id"
                    data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToxMQ=="
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-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"
                      data-tc="name"
                    >
                      Language
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
                      data-tc="slug"
                    >
                      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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductTypeAttributes-link-id MuiTableRow-hover-id"
                    data-tc="id"
                    data-tc-id="UHJvZHVjdEF0dHJpYnV0ZToxMA=="
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-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"
                      data-tc="name"
                    >
                      Publisher
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
                      data-tc="slug"
                    >
                      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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              class="MuiSwitch-root-id"
            >
              <span
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
              >
                <span
                  class="MuiIconButton-label-id"
                >
                  <input
                    class="PrivateSwitchBase-input-id MuiSwitch-input-id"
                    name="hasVariants"
                    type="checkbox"
                  />
                  <span
                    class="MuiSwitch-thumb-id"
                  />
                </span>
              </span>
              <span
                class="MuiSwitch-track-id"
              />
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              <div
                class="ControlledSwitch-label-id"
              >
                <span
                  class="ControlledSwitch-labelText-id"
                >
                  Product type uses Variant Attributes
                </span>
                <div />
              </div>
            </span>
          </label>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Shipping
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Is this product shippable?
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Product types / Product type details loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <span
            class="Skeleton-skeleton-id"
            style="width:10em"
          >
            ‌
          </span>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductTypeDetails-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Product Type Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductTypeTaxes-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Taxes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="SingleAutocompleteSelectField-container-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Taxes
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      disabled=""
                      type="text"
                      value=""
                    />
                    <div>
                      <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
            data-tc="product-attributes"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Product Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign attribute
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-dragRows-id MuiTableCell-paddingCheckbox-id"
                      scope="col"
                    >
                      <button
                        class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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"
                    data-tc="id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-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 MuiButtonBase-disabled-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"
                      data-tc="name"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                      >
                        ‌
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
                      data-tc="slug"
                    >
                      <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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <label
            class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
          >
            <span
              class="MuiSwitch-root-id"
            >
              <span
                aria-disabled="true"
                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id PrivateSwitchBase-disabled-id MuiSwitch-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                tabindex="-1"
              >
                <span
                  class="MuiIconButton-label-id"
                >
                  <input
                    class="PrivateSwitchBase-input-id MuiSwitch-input-id"
                    disabled=""
                    name="hasVariants"
                    type="checkbox"
                  />
                  <span
                    class="MuiSwitch-thumb-id"
                  />
                </span>
              </span>
              <span
                class="MuiSwitch-track-id"
              />
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
            >
              <div
                class="ControlledSwitch-label-id"
              >
                <span
                  class="ControlledSwitch-labelText-id"
                >
                  Product type uses Variant Attributes
                </span>
                <div />
              </div>
            </span>
          </label>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Shipping
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Is this product shippable?
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Product types / Product type details no attributes 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          E-books
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductTypeDetails-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Product Type Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="E-books"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductTypeTaxes-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Taxes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="SingleAutocompleteSelectField-container-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Taxes
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="PH405458"
                    />
                    <div>
                      <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
            data-tc="product-attributes"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Product Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign attribute
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <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>
          <div
            class="CardSpacer-spacer-id"
          />
          <label
            class="MuiFormControlLabel-root-id"
          >
            <span
              class="MuiSwitch-root-id"
            >
              <span
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
              >
                <span
                  class="MuiIconButton-label-id"
                >
                  <input
                    class="PrivateSwitchBase-input-id MuiSwitch-input-id"
                    name="hasVariants"
                    type="checkbox"
                  />
                  <span
                    class="MuiSwitch-thumb-id"
                  />
                </span>
              </span>
              <span
                class="MuiSwitch-track-id"
              />
            </span>
            <span
              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
            >
              <div
                class="ControlledSwitch-label-id"
              >
                <span
                  class="ControlledSwitch-labelText-id"
                >
                  Product type uses Variant Attributes
                </span>
                <div />
              </div>
            </span>
          </label>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Shipping
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Is this product shippable?
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Product types / Product types list default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Product Types
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              create product type
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Product Types
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Product Type"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <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 TableCellHeader-root-id ProductTypeList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Type Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductTypeList-colType-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Type
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeList-colTax-id"
                scope="col"
              >
                Tax
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  />
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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 ProductTypeList-link-id MuiTableRow-hover-id"
              data-tc="id"
              data-tc-id="UHJvZHVjdFR5cGU6NA=="
            >
              <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"
              >
                <span
                  data-tc="name"
                >
                  Candy
                </span>
                <div
                  class="MuiTypography-root-id MuiTypography-caption-id"
                >
                  Configurable
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colType-id"
              >
                Physical
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colTax-id"
              >
                PB100000
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id ProductTypeList-link-id MuiTableRow-hover-id"
              data-tc="id"
              data-tc-id="UHJvZHVjdFR5cGU6NQ=="
            >
              <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"
              >
                <span
                  data-tc="name"
                >
                  E-books
                </span>
                <div
                  class="MuiTypography-root-id MuiTypography-caption-id"
                >
                  Simple product
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colType-id"
              >
                Digital
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colTax-id"
              >
                PH403682
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id ProductTypeList-link-id MuiTableRow-hover-id"
              data-tc="id"
              data-tc-id="UHJvZHVjdFR5cGU6Mg=="
            >
              <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"
              >
                <span
                  data-tc="name"
                >
                  Mugs
                </span>
                <div
                  class="MuiTypography-root-id MuiTypography-caption-id"
                >
                  Simple product
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colType-id"
              >
                Physical
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colTax-id"
              >
                PC077426
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id ProductTypeList-link-id MuiTableRow-hover-id"
              data-tc="id"
              data-tc-id="UHJvZHVjdFR5cGU6Mw=="
            >
              <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"
              >
                <span
                  data-tc="name"
                >
                  Coffee
                </span>
                <div
                  class="MuiTypography-root-id MuiTypography-caption-id"
                >
                  Configurable
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colType-id"
              >
                Physical
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colTax-id"
              >
                PB100000
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id ProductTypeList-link-id MuiTableRow-hover-id"
              data-tc="id"
              data-tc-id="UHJvZHVjdFR5cGU6MQ=="
            >
              <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"
              >
                <span
                  data-tc="name"
                >
                  T-Shirt
                </span>
                <div
                  class="MuiTypography-root-id MuiTypography-caption-id"
                >
                  Configurable
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colType-id"
              >
                Physical
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colTax-id"
              >
                PH403970
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Product types / Product types list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Product Types
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              create product type
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Product Types
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Product Type"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
                scope="col"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 TableCellHeader-root-id ProductTypeList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Type Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductTypeList-colType-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Type
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeList-colTax-id"
                scope="col"
              >
                Tax
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  />
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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 TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-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"
              data-tc="id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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>
</div>
`;

exports[`Storyshots Views / Product types / Product types list no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Product Types
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              create product type
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Product Types
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Product Type"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductTypeList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Type Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductTypeList-colType-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Type
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeList-colTax-id"
                scope="col"
              >
                Tax
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  />
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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 product types found
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </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 multiple variants / summary default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;width:800px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div>
        <div
          class="ProductVariantCreateTabs-root-id"
        >
          <div
            class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabVisited-id"
          >
            <div
              class="MuiTypography-root-id ProductVariantCreateTabs-label-id MuiTypography-caption-id"
            >
              Select Values
            </div>
          </div>
          <div
            class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabVisited-id"
          >
            <div
              class="MuiTypography-root-id ProductVariantCreateTabs-label-id MuiTypography-caption-id"
            >
              Prices and SKU
            </div>
          </div>
          <div
            class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabActive-id ProductVariantCreateTabs-tabVisited-id"
          >
            <div
              class="MuiTypography-root-id ProductVariantCreateTabs-label-id MuiTypography-caption-id"
            >
              Summary
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreateContent-root-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-h5-id MuiTypography-colorTextSecondary-id"
          >
            You will create variants below
          </div>
          <hr
            class="Hr-root-id ProductVariantCreateSummary-hr-id"
          />
          <div>
            <div
              class="ProductVariantCreateSummary-row-id"
            >
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colHeader-id ProductVariantCreateSummary-colName-id"
              >
                Variant
              </div>
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colHeader-id ProductVariantCreateSummary-colPrice-id"
              >
                Price
              </div>
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colHeader-id ProductVariantCreateSummary-colStock-id"
              >
                Inventory
              </div>
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colHeader-id ProductVariantCreateSummary-colSku-id"
              >
                SKU
              </div>
            </div>
            <div
              class="ProductVariantCreateSummary-row-id"
            >
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colName-id"
              >
                <span
                  class="ProductVariantCreateSummary-attributeValue-id"
                  style="color:#1565c0"
                >
                  100g
                </span>
                <span
                  class="ProductVariantCreateSummary-attributeValue-id"
                  style="color:#00838f"
                >
                  Arabica
                </span>
                <span
                  class="ProductVariantCreateSummary-attributeValue-id"
                  style="color:#2e7d32"
                >
                  Round
                </span>
              </div>
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colPrice-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreateSummary-input-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min="0"
                      type="number"
                      value="4.00"
                    />
                    USD
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colStock-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreateSummary-input-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      type="number"
                      value="30"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colSku-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreateSummary-input-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="ProductVariantCreateSummary-col-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id ProductVariantCreateSummary-delete-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"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ProductVariantCreateSummary-row-id"
            >
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colName-id"
              >
                <span
                  class="ProductVariantCreateSummary-attributeValue-id"
                  style="color:#1565c0"
                >
                  100g
                </span>
                <span
                  class="ProductVariantCreateSummary-attributeValue-id"
                  style="color:#00838f"
                >
                  Arabica
                </span>
                <span
                  class="ProductVariantCreateSummary-attributeValue-id"
                  style="color:#2e7d32"
                >
                  Polo
                </span>
              </div>
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colPrice-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreateSummary-input-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min="0"
                      type="number"
                      value="4.00"
                    />
                    USD
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colStock-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreateSummary-input-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      type="number"
                      value="30"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colSku-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreateSummary-input-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="ProductVariantCreateSummary-col-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id ProductVariantCreateSummary-delete-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"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ProductVariantCreateSummary-row-id"
            >
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colName-id"
              >
                <span
                  class="ProductVariantCreateSummary-attributeValue-id"
                  style="color:#1565c0"
                >
                  500g
                </span>
                <span
                  class="ProductVariantCreateSummary-attributeValue-id"
                  style="color:#00838f"
                >
                  Arabica
                </span>
                <span
                  class="ProductVariantCreateSummary-attributeValue-id"
                  style="color:#2e7d32"
                >
                  Round
                </span>
              </div>
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colPrice-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreateSummary-input-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min="0"
                      type="number"
                      value="4.00"
                    />
                    USD
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colStock-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreateSummary-input-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      type="number"
                      value="30"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colSku-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreateSummary-input-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="ProductVariantCreateSummary-col-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id ProductVariantCreateSummary-delete-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"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ProductVariantCreateSummary-row-id"
            >
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colName-id"
              >
                <span
                  class="ProductVariantCreateSummary-attributeValue-id"
                  style="color:#1565c0"
                >
                  500g
                </span>
                <span
                  class="ProductVariantCreateSummary-attributeValue-id"
                  style="color:#00838f"
                >
                  Arabica
                </span>
                <span
                  class="ProductVariantCreateSummary-attributeValue-id"
                  style="color:#2e7d32"
                >
                  Polo
                </span>
              </div>
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colPrice-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreateSummary-input-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min="0"
                      type="number"
                      value="4.00"
                    />
                    USD
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colStock-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreateSummary-input-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      type="number"
                      value="30"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colSku-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreateSummary-input-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="ProductVariantCreateSummary-col-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id ProductVariantCreateSummary-delete-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"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Products / Create multiple variants / summary errors 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;width:800px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div>
        <div
          class="ProductVariantCreateTabs-root-id"
        >
          <div
            class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabVisited-id"
          >
            <div
              class="MuiTypography-root-id ProductVariantCreateTabs-label-id MuiTypography-caption-id"
            >
              Select Values
            </div>
          </div>
          <div
            class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabVisited-id"
          >
            <div
              class="MuiTypography-root-id ProductVariantCreateTabs-label-id MuiTypography-caption-id"
            >
              Prices and SKU
            </div>
          </div>
          <div
            class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabActive-id ProductVariantCreateTabs-tabVisited-id"
          >
            <div
              class="MuiTypography-root-id ProductVariantCreateTabs-label-id MuiTypography-caption-id"
            >
              Summary
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreateContent-root-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-h5-id MuiTypography-colorTextSecondary-id"
          >
            You will create variants below
          </div>
          <hr
            class="Hr-root-id ProductVariantCreateSummary-hr-id"
          />
          <div>
            <div
              class="ProductVariantCreateSummary-row-id"
            >
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colHeader-id ProductVariantCreateSummary-colName-id"
              >
                Variant
              </div>
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colHeader-id ProductVariantCreateSummary-colPrice-id"
              >
                Price
              </div>
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colHeader-id ProductVariantCreateSummary-colStock-id"
              >
                Inventory
              </div>
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colHeader-id ProductVariantCreateSummary-colSku-id"
              >
                SKU
              </div>
            </div>
            <div
              class="ProductVariantCreateSummary-row-id"
            >
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colName-id"
              >
                <span
                  class="ProductVariantCreateSummary-attributeValue-id"
                  style="color:#1565c0"
                >
                  100g
                </span>
                <span
                  class="ProductVariantCreateSummary-attributeValue-id"
                  style="color:#00838f"
                >
                  Arabica
                </span>
                <span
                  class="ProductVariantCreateSummary-attributeValue-id"
                  style="color:#2e7d32"
                >
                  Round
                </span>
              </div>
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colPrice-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreateSummary-input-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min="0"
                      type="number"
                      value="4.00"
                    />
                    USD
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colStock-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreateSummary-input-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      type="number"
                      value="30"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colSku-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreateSummary-input-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="ProductVariantCreateSummary-col-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id ProductVariantCreateSummary-delete-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"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ProductVariantCreateSummary-row-id"
            >
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colName-id"
              >
                <span
                  class="ProductVariantCreateSummary-attributeValue-id"
                  style="color:#1565c0"
                >
                  100g
                </span>
                <span
                  class="ProductVariantCreateSummary-attributeValue-id"
                  style="color:#00838f"
                >
                  Arabica
                </span>
                <span
                  class="ProductVariantCreateSummary-attributeValue-id"
                  style="color:#2e7d32"
                >
                  Polo
                </span>
              </div>
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colPrice-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreateSummary-input-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min="0"
                      type="number"
                      value="4.00"
                    />
                    USD
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colStock-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreateSummary-input-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      type="number"
                      value="30"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colSku-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreateSummary-input-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="ProductVariantCreateSummary-col-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id ProductVariantCreateSummary-delete-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"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ProductVariantCreateSummary-row-id"
            >
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colName-id"
              >
                <span
                  class="ProductVariantCreateSummary-attributeValue-id"
                  style="color:#1565c0"
                >
                  500g
                </span>
                <span
                  class="ProductVariantCreateSummary-attributeValue-id"
                  style="color:#00838f"
                >
                  Arabica
                </span>
                <span
                  class="ProductVariantCreateSummary-attributeValue-id"
                  style="color:#2e7d32"
                >
                  Round
                </span>
              </div>
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colPrice-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreateSummary-input-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min="0"
                      type="number"
                      value="4.00"
                    />
                    USD
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colStock-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreateSummary-input-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      type="number"
                      value="30"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colSku-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreateSummary-input-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="ProductVariantCreateSummary-col-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id ProductVariantCreateSummary-delete-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"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ProductVariantCreateSummary-row-id ProductVariantCreateSummary-errorRow-id"
            >
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colName-id"
              >
                <span
                  class="ProductVariantCreateSummary-attributeValue-id"
                  style="color:#1565c0"
                >
                  500g
                </span>
                <span
                  class="ProductVariantCreateSummary-attributeValue-id"
                  style="color:#00838f"
                >
                  Arabica
                </span>
                <span
                  class="ProductVariantCreateSummary-attributeValue-id"
                  style="color:#2e7d32"
                >
                  Polo
                </span>
              </div>
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colPrice-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreateSummary-input-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min="0"
                      type="number"
                      value="4.00"
                    />
                    USD
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colStock-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreateSummary-input-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      type="number"
                      value="30"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="ProductVariantCreateSummary-col-id ProductVariantCreateSummary-colSku-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreateSummary-input-id MuiFormControl-fullWidth-id"
                >
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    SKUs must be unique
                  </p>
                </div>
              </div>
              <div
                class="ProductVariantCreateSummary-col-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id ProductVariantCreateSummary-delete-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"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Products / Create multiple variants choose values 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;width:800px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div>
        <div
          class="ProductVariantCreateTabs-root-id"
        >
          <div
            class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabActive-id ProductVariantCreateTabs-tabVisited-id"
          >
            <div
              class="MuiTypography-root-id ProductVariantCreateTabs-label-id MuiTypography-caption-id"
            >
              Select Values
            </div>
          </div>
          <div
            class="ProductVariantCreateTabs-tab-id"
          >
            <div
              class="MuiTypography-root-id ProductVariantCreateTabs-label-id MuiTypography-caption-id"
            >
              Prices and SKU
            </div>
          </div>
          <div
            class="ProductVariantCreateTabs-tab-id"
          >
            <div
              class="MuiTypography-root-id ProductVariantCreateTabs-label-id MuiTypography-caption-id"
            >
              Summary
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreateContent-root-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-h5-id MuiTypography-colorTextSecondary-id"
          >
            Box Size
          </div>
          <hr
            class="Hr-root-id ProductVariantCreateValues-hr-id"
          />
          <div
            class="ProductVariantCreateValues-valueContainer-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="value:100g"
                  type="checkbox"
                  value="true"
                />
              </button>
              <span
                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
              >
                100g
              </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="value:250g"
                  type="checkbox"
                  value="false"
                />
              </button>
              <span
                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
              >
                250g
              </span>
            </label>
            <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="value:500g"
                  type="checkbox"
                  value="true"
                />
              </button>
              <span
                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
              >
                500g
              </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="value:1kg"
                  type="checkbox"
                  value="false"
                />
              </button>
              <span
                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
              >
                1kg
              </span>
            </label>
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-h5-id MuiTypography-colorTextSecondary-id"
          >
            Coffee Genre
          </div>
          <hr
            class="Hr-root-id ProductVariantCreateValues-hr-id"
          />
          <div
            class="ProductVariantCreateValues-valueContainer-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="value:arabica"
                  type="checkbox"
                  value="true"
                />
              </button>
              <span
                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
              >
                Arabica
              </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="value:robusta"
                  type="checkbox"
                  value="false"
                />
              </button>
              <span
                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
              >
                Robusta
              </span>
            </label>
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-h5-id MuiTypography-colorTextSecondary-id"
          >
            Collar
          </div>
          <hr
            class="Hr-root-id ProductVariantCreateValues-hr-id"
          />
          <div
            class="ProductVariantCreateValues-valueContainer-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="value:round"
                  type="checkbox"
                  value="true"
                />
              </button>
              <span
                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
              >
                Round
              </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="value:v-neck"
                  type="checkbox"
                  value="false"
                />
              </button>
              <span
                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
              >
                V-Neck
              </span>
            </label>
            <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="value:polo"
                  type="checkbox"
                  value="true"
                />
              </button>
              <span
                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
              >
                Polo
              </span>
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

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

exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    style="margin:auto;overflow:visible;width:800px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div>
        <div
          class="ProductVariantCreateTabs-root-id"
        >
          <div
            class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabVisited-id"
          >
            <div
              class="MuiTypography-root-id ProductVariantCreateTabs-label-id MuiTypography-caption-id"
            >
              Select Values
            </div>
          </div>
          <div
            class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabActive-id ProductVariantCreateTabs-tabVisited-id"
          >
            <div
              class="MuiTypography-root-id ProductVariantCreateTabs-label-id MuiTypography-caption-id"
            >
              Prices and SKU
            </div>
          </div>
          <div
            class="ProductVariantCreateTabs-tab-id"
          >
            <div
              class="MuiTypography-root-id ProductVariantCreateTabs-label-id MuiTypography-caption-id"
            >
              Summary
            </div>
          </div>
        </div>
        <div
          class="ProductVariantCreateContent-root-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-h5-id MuiTypography-colorTextSecondary-id"
          >
            Price
          </div>
          <hr
            class="Hr-root-id ProductVariantCreatePrices-hr-id"
          />
          <div
            class="MuiFormGroup-root-id"
            role="radiogroup"
          >
            <label
              class="MuiFormControlLabel-root-id"
            >
              <span
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
              >
                <span
                  class="MuiIconButton-label-id"
                >
                  <input
                    class="PrivateSwitchBase-input-id"
                    type="radio"
                    value="applyToAll"
                  />
                  <div
                    class="PrivateRadioButtonIcon-root-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>
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                      />
                    </svg>
                  </div>
                </span>
              </span>
              <span
                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
              >
                Apply single price to all SKUs
              </span>
            </label>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatePrices-shortInput-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Price
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  min="0"
                  type="number"
                  value="2.79"
                />
                USD
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <label
              class="MuiFormControlLabel-root-id"
            >
              <span
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
              >
                <span
                  class="MuiIconButton-label-id"
                >
                  <input
                    checked=""
                    class="PrivateSwitchBase-input-id"
                    type="radio"
                    value="applyToAttribute"
                  />
                  <div
                    class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-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>
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                      />
                    </svg>
                  </div>
                </span>
              </span>
              <span
                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
              >
                Apply unique prices by attribute to each SKU
              </span>
            </label>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="Grid-root-id Grid-uniform-id"
          >
            <div
              class="ProductVariantCreatePrices-label-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Choose attribute
              </div>
            </div>
            <div>
              <div
                class="MuiFormControl-root-id SingleSelectField-formControl-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Attribute
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <div
                    aria-haspopup="listbox"
                    aria-labelledby=" "
                    class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputSelect-id MuiOutlinedInput-inputSelect-id"
                    role="button"
                    tabindex="0"
                  >
                    Coffee Genre
                  </div>
                  <input
                    type="hidden"
                    value="UHJvZHVjdEF0dHJpYnV0ZTo1"
                  />
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:143px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <hr
            class="Hr-root-id ProductVariantCreatePrices-hrAttribute-id"
          />
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="Grid-root-id Grid-uniform-id"
          >
            <div
              class="ProductVariantCreatePrices-label-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Arabica
              </div>
            </div>
            <div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Price
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    type="number"
                    value="4.00"
                  />
                  USD
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="MuiTypography-root-id MuiTypography-h5-id MuiTypography-colorTextSecondary-id"
          >
            Stock
          </div>
          <hr
            class="Hr-root-id ProductVariantCreatePrices-hr-id"
          />
          <div
            class="MuiFormGroup-root-id"
            role="radiogroup"
          >
            <label
              class="MuiFormControlLabel-root-id"
            >
              <span
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
              >
                <span
                  class="MuiIconButton-label-id"
                >
                  <input
                    class="PrivateSwitchBase-input-id"
                    type="radio"
                    value="applyToAll"
                  />
                  <div
                    class="PrivateRadioButtonIcon-root-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>
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                      />
                    </svg>
                  </div>
                </span>
              </span>
              <span
                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
              >
                Apply single stock to all SKUs
              </span>
            </label>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiTextField-root-id ProductVariantCreatePrices-shortInput-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Stock
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  min="0"
                  type="number"
                  value="8"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <label
              class="MuiFormControlLabel-root-id"
            >
              <span
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
              >
                <span
                  class="MuiIconButton-label-id"
                >
                  <input
                    checked=""
                    class="PrivateSwitchBase-input-id"
                    type="radio"
                    value="applyToAttribute"
                  />
                  <div
                    class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-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>
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                      />
                    </svg>
                  </div>
                </span>
              </span>
              <span
                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
              >
                Apply unique stock by attribute to each SKU
              </span>
            </label>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="Grid-root-id Grid-uniform-id"
          >
            <div
              class="ProductVariantCreatePrices-label-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Choose attribute
              </div>
            </div>
            <div>
              <div
                class="MuiFormControl-root-id SingleSelectField-formControl-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Attribute
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <div
                    aria-haspopup="listbox"
                    aria-labelledby=" "
                    class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputSelect-id MuiOutlinedInput-inputSelect-id"
                    role="button"
                    tabindex="0"
                  >
                    Coffee Genre
                  </div>
                  <input
                    type="hidden"
                    value="UHJvZHVjdEF0dHJpYnV0ZTo1"
                  />
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:143px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <hr
            class="Hr-root-id ProductVariantCreatePrices-hrAttribute-id"
          />
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="Grid-root-id Grid-uniform-id"
          >
            <div
              class="ProductVariantCreatePrices-label-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Arabica
              </div>
            </div>
            <div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Stock
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    type="text"
                    value="30"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Products / Create product When loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Add product
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="RichTextEditor-root-id RichTextEditor-scroll-id"
              >
                <div
                  class="RichTextEditor-input-id"
                >
                  <div
                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                  >
                    Description
                  </div>
                  <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="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            >
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    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"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      disabled=""
                      min="0"
                      name="basePrice"
                      type="number"
                      value="0"
                    />
                    <div
                      class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                      >
                        USD
                      </div>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Inventory
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductStock-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    SKU (Stock Keeping Unit)
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="sku"
                      type="text"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Inventory
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="stockQuantity"
                      type="number"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this product easier to find
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductOrganization-card-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Organize Product
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="SingleAutocompleteSelectField-container-id"
                data-tc="product-type"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Product Type
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      disabled=""
                      type="text"
                      value=""
                    />
                    <div>
                      <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="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 MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Category
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      disabled=""
                      type="text"
                      value=""
                    />
                    <div>
                      <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="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 MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Collections
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div>
                      <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                  >
                    *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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Visibility
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
              >
                <div
                  aria-label="isPublished"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="isPublished"
                          type="radio"
                          value="true"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      <p
                        class="VisibilityCard-label-id"
                      >
                        Visible
                      </p>
                      <span
                        class="VisibilityCard-secondLabel-id"
                      />
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="isPublished"
                          type="radio"
                          value="false"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      <p
                        class="VisibilityCard-label-id"
                      >
                        Hidden
                      </p>
                      <span
                        class="VisibilityCard-secondLabel-id"
                      />
                    </span>
                  </label>
                </div>
              </div>
              <div
                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
              >
                Set publication date
              </div>
              <div
                class="VisibilityCard-children-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 ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Add product
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="RichTextEditor-root-id RichTextEditor-scroll-id"
              >
                <div
                  class="RichTextEditor-input-id"
                >
                  <div
                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                  >
                    Description
                  </div>
                  <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="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            >
              <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 MuiFormControlLabel-label-id MuiTypography-body1-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Price
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min="0"
                      name="basePrice"
                      type="number"
                      value="0"
                    />
                    <div
                      class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                      >
                        USD
                      </div>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Inventory
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductStock-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    SKU (Stock Keeping Unit)
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="sku"
                      type="text"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <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"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="stockQuantity"
                      type="number"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this product easier to find
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductOrganization-card-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Organize Product
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="SingleAutocompleteSelectField-container-id"
                data-tc="product-type"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Product Type
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div>
                      <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="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 MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Category
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div>
                      <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="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 MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Collections
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div>
                      <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                  >
                    *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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Visibility
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
              >
                <div
                  aria-label="isPublished"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="isPublished"
                          type="radio"
                          value="true"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      <p
                        class="VisibilityCard-label-id"
                      >
                        Visible
                      </p>
                      <span
                        class="VisibilityCard-secondLabel-id"
                      />
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="isPublished"
                          type="radio"
                          value="false"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      <p
                        class="VisibilityCard-label-id"
                      >
                        Hidden
                      </p>
                      <span
                        class="VisibilityCard-secondLabel-id"
                      />
                    </span>
                  </label>
                </div>
              </div>
              <div
                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
              >
                Set publication date
              </div>
              <div
                class="VisibilityCard-children-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 ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Add product
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                  data-shrink="false"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Invalid value
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="RichTextEditor-root-id RichTextEditor-scroll-id"
              >
                <div
                  class="RichTextEditor-input-id"
                >
                  <div
                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                  >
                    Description
                  </div>
                  <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="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            >
              <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 MuiFormControlLabel-label-id MuiTypography-body1-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Price
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min="0"
                      name="basePrice"
                      type="number"
                      value="0"
                    />
                    <div
                      class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                      >
                        USD
                      </div>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Inventory
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductStock-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                    data-shrink="false"
                  >
                    SKU (Stock Keeping Unit)
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="sku"
                      type="text"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Invalid value
                  </p>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Inventory
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="stockQuantity"
                      type="number"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this product easier to find
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductOrganization-card-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Organize Product
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="SingleAutocompleteSelectField-container-id"
                data-tc="product-type"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-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"
                  >
                    <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Invalid value
                  </p>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="SingleAutocompleteSelectField-container-id"
                data-tc="category"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                    data-shrink="false"
                  >
                    Category
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="true"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div>
                      <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Invalid value
                  </p>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MultiAutocompleteSelectField-container-id"
                data-tc="collections"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Collections
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div>
                      <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                  >
                    *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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Visibility
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
              >
                <div
                  aria-label="isPublished"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="isPublished"
                          type="radio"
                          value="true"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      <p
                        class="VisibilityCard-label-id"
                      >
                        Visible
                      </p>
                      <span
                        class="VisibilityCard-secondLabel-id"
                      />
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="isPublished"
                          type="radio"
                          value="false"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      <p
                        class="VisibilityCard-label-id"
                      >
                        Hidden
                      </p>
                      <span
                        class="VisibilityCard-secondLabel-id"
                      />
                    </span>
                  </label>
                </div>
              </div>
              <div
                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
              >
                Set publication date
              </div>
              <div
                class="VisibilityCard-children-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 ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Add variant
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-tabActive-id"
                    >
                      <div
                        class="TableCellAvatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id MuiAvatar-colorDefault-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>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-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"
                    >
                      <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>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductVariantPrice-grid-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      Selling price override
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="priceOverride"
                        type="number"
                        value=""
                      />
                      <div
                        class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                        >
                          USD
                        </div>
                      </div>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                    >
                      Optional
                    </p>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      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"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="costPrice"
                        type="number"
                        value=""
                      />
                      <div
                        class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                        >
                          USD
                        </div>
                      </div>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                    >
                      Optional
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                      data-shrink="true"
                    >
                      Inventory
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="quantity"
                        type="text"
                        value="0"
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      SKU (Stock Keeping Unit)
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="sku"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Products / Create product variant default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Add variant
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                    >
                      <div
                        class="TableCellAvatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-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 ProductVariantNavigation-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                    >
                      <div
                        class="TableCellAvatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-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-circle-id TableCellAvatar-avatar-id MuiAvatar-colorDefault-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>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-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"
                    >
                      <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>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductVariantPrice-grid-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      Selling price override
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="priceOverride"
                        type="number"
                        value=""
                      />
                      <div
                        class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                        >
                          USD
                        </div>
                      </div>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                    >
                      Optional
                    </p>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      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"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="costPrice"
                        type="number"
                        value=""
                      />
                      <div
                        class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                        >
                          USD
                        </div>
                      </div>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                    >
                      Optional
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                      data-shrink="true"
                    >
                      Inventory
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="quantity"
                        type="text"
                        value="0"
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      SKU (Stock Keeping Unit)
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="sku"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Products / Create product variant when loading data 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Add variant
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id ProductVariantNavigation-link-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                    >
                      <div
                        class="TableCellAvatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id MuiAvatar-colorDefault-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"
                            />
                          </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-circle-id TableCellAvatar-avatar-id MuiAvatar-colorDefault-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>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductVariantPrice-grid-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                      data-shrink="false"
                    >
                      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"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        disabled=""
                        name="priceOverride"
                        type="number"
                        value=""
                      />
                      <div
                        class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                        >
                          USD
                        </div>
                      </div>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
                    >
                      Optional
                    </p>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        disabled=""
                        name="costPrice"
                        type="number"
                        value=""
                      />
                      <div
                        class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                        >
                          USD
                        </div>
                      </div>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
                    >
                      Optional
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                      data-shrink="true"
                    >
                      Inventory
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                        disabled=""
                        name="quantity"
                        type="text"
                        value="0"
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                      data-shrink="false"
                    >
                      SKU (Stock Keeping Unit)
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                        disabled=""
                        name="sku"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Products / Create product variant with errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Add variant
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                    >
                      <div
                        class="TableCellAvatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-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 ProductVariantNavigation-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                    >
                      <div
                        class="TableCellAvatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-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-circle-id TableCellAvatar-avatar-id MuiAvatar-colorDefault-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>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-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"
                    >
                      <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>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorError-id"
              >
                All attributes should have value
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorError-id"
              >
                This variant already exists
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductVariantPrice-grid-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      Selling price override
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="priceOverride"
                        type="number"
                        value=""
                      />
                      <div
                        class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                        >
                          USD
                        </div>
                      </div>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                    >
                      Optional
                    </p>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      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"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="costPrice"
                        type="number"
                        value=""
                      />
                      <div
                        class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                        >
                          USD
                        </div>
                      </div>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                    >
                      Optional
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                      data-shrink="true"
                    >
                      Inventory
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="quantity"
                        type="text"
                        value="0"
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                      data-shrink="false"
                    >
                      SKU (Stock Keeping Unit)
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="sku"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                    >
                      Unknown error
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Products / Product edit form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Ergonomic Plastic Bacon
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Ergonomic Plastic Bacon"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Invalid value
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="RichTextEditor-root-id RichTextEditor-scroll-id"
              >
                <div
                  class="RichTextEditor-input-id"
                >
                  <div
                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                  >
                    Description
                  </div>
                  <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-elevation0-id MuiCard-root-id ProductImages-card-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Images
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-tc="button-upload-image"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload image
                  </span>
                </button>
                <input
                  accept="image/*"
                  class="ProductImages-fileField-id"
                  id="fileUpload"
                  multiple=""
                  type="file"
                />
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ProductImages-imageGridContainer-id"
            >
              <div
                class="ProductImages-imageUpload-id ImageUpload-photosIconContainer-id"
                tabindex="0"
              >
                <div
                  class="ProductImages-imageUploadIcon-id"
                >
                  <input
                    accept="image/*"
                    autocomplete="off"
                    class="ImageUpload-fileField-id"
                    multiple=""
                    style="display:none"
                    tabindex="-1"
                    type="file"
                  />
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id ImageUpload-photosIcon-id"
                    focusable="false"
                    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
                    class="MuiTypography-root-id ImageUpload-uploadText-id MuiTypography-body1-id"
                  >
                    Drop here to upload
                  </div>
                </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-elevation0-id MuiCard-root-id ProductAttributes-card-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id ProductAttributes-cardContent-id"
            >
              <div
                class="ProductAttributes-expansionBar-id"
              >
                <div
                  class="ProductAttributes-expansionBarLabelContainer-id"
                >
                  <div
                    class="MuiTypography-root-id ProductAttributes-expansionBarLabel-id MuiTypography-caption-id"
                  >
                    2 Attributes
                  </div>
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id ProductAttributes-expansionBarButton-id"
                  data-tc="product-attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id ProductAttributes-expansionBarButtonIcon-id ProductAttributes-rotate-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="ProductAttributes-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="ProductAttributes-attributeSectionLabel-id"
                  data-tc="product-attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Borders
                  </div>
                </div>
                <div
                  data-tc="product-attribute-value"
                >
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                        data-shrink="true"
                      >
                        Value
                      </label>
                      <div
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value="portals"
                        />
                        <div>
                          <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>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="ProductAttributes-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="ProductAttributes-attributeSectionLabel-id"
                  data-tc="product-attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Legacy
                  </div>
                </div>
                <div
                  data-tc="product-attribute-value"
                >
                  <div
                    class="MultiAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Values
                      </label>
                      <div
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value=""
                        />
                        <div>
                          <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>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                  <div
                    class="MultiAutocompleteSelectField-chipContainer-id"
                  >
                    <div
                      class="MultiAutocompleteSelectField-chip-id"
                    >
                      <div
                        class="MultiAutocompleteSelectField-chipInner-id"
                      >
                        <div
                          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                        >
                          Auto Loan Account
                        </div>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                          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"
                              />
                            </svg>
                          </span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            >
              <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 MuiFormControlLabel-label-id MuiTypography-body1-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Price
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min="0"
                      name="basePrice"
                      type="number"
                      value="339.39"
                    />
                    <div
                      class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                      >
                        NZD
                      </div>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                  >
                    Invalid value
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-tc="button-add-variant"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create variant
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <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 ProductVariants-link-id MuiTableRow-hover-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"
                      data-tc="name"
                    >
                      Cordoba Oro
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colStatus-id"
                      data-tc="isAvailable"
                      data-tc-is-available="true"
                    >
                      <div
                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                      >
                        Available
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-tc="sku"
                    >
                      87192-94370
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductVariants-link-id MuiTableRow-hover-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"
                      data-tc="name"
                    >
                      silver
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colStatus-id"
                      data-tc="isAvailable"
                      data-tc-is-available="true"
                    >
                      <div
                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                      >
                        Available
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-tc="sku"
                    >
                      69055-15190
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this product easier to find
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductOrganization-card-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Organize Product
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Versatile
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Configurable
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="SingleAutocompleteSelectField-container-id"
                data-tc="category"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Category
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="true"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="Apparel"
                    />
                    <div>
                      <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                  >
                    Invalid value
                  </p>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MultiAutocompleteSelectField-container-id"
                data-tc="collections"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                    data-shrink="false"
                  >
                    Collections
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="true"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div>
                      <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Invalid value
                  </p>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              >
                <div
                  class="MultiAutocompleteSelectField-chip-id"
                >
                  <div
                    class="MultiAutocompleteSelectField-chipInner-id"
                  >
                    <div
                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                    >
                      Winter sale
                    </div>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                      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"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Visibility
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
              >
                <div
                  aria-label="isPublished"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="isPublished"
                          type="radio"
                          value="true"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      <p
                        class="VisibilityCard-label-id"
                      >
                        Visible
                      </p>
                      <span
                        class="VisibilityCard-secondLabel-id"
                      >
                        since Aug 25, 2018
                      </span>
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="isPublished"
                          type="radio"
                          value="false"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      <p
                        class="VisibilityCard-label-id"
                      >
                        Hidden
                      </p>
                      <span
                        class="VisibilityCard-secondLabel-id"
                      />
                    </span>
                  </label>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorError-id"
              />
              <div
                class="VisibilityCard-children-id"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Products / Product edit no product attributes 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Ergonomic Plastic Bacon
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Ergonomic Plastic Bacon"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="RichTextEditor-root-id RichTextEditor-scroll-id"
              >
                <div
                  class="RichTextEditor-input-id"
                >
                  <div
                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                  >
                    Description
                  </div>
                  <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-elevation0-id MuiCard-root-id ProductImages-card-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Images
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-tc="button-upload-image"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload image
                  </span>
                </button>
                <input
                  accept="image/*"
                  class="ProductImages-fileField-id"
                  id="fileUpload"
                  multiple=""
                  type="file"
                />
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ProductImages-imageGridContainer-id"
            >
              <div
                class="ProductImages-imageUpload-id ImageUpload-photosIconContainer-id"
                tabindex="0"
              >
                <div
                  class="ProductImages-imageUploadIcon-id"
                >
                  <input
                    accept="image/*"
                    autocomplete="off"
                    class="ImageUpload-fileField-id"
                    multiple=""
                    style="display:none"
                    tabindex="-1"
                    type="file"
                  />
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id ImageUpload-photosIcon-id"
                    focusable="false"
                    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
                    class="MuiTypography-root-id ImageUpload-uploadText-id MuiTypography-body1-id"
                  >
                    Drop here to upload
                  </div>
                </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="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            >
              <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 MuiFormControlLabel-label-id MuiTypography-body1-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Price
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min="0"
                      name="basePrice"
                      type="number"
                      value="339.39"
                    />
                    <div
                      class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                      >
                        NZD
                      </div>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-tc="button-add-variant"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create variant
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <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 ProductVariants-link-id MuiTableRow-hover-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"
                      data-tc="name"
                    >
                      Cordoba Oro
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colStatus-id"
                      data-tc="isAvailable"
                      data-tc-is-available="true"
                    >
                      <div
                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                      >
                        Available
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-tc="sku"
                    >
                      87192-94370
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductVariants-link-id MuiTableRow-hover-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"
                      data-tc="name"
                    >
                      silver
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colStatus-id"
                      data-tc="isAvailable"
                      data-tc-is-available="true"
                    >
                      <div
                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                      >
                        Available
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-tc="sku"
                    >
                      69055-15190
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this product easier to find
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductOrganization-card-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Organize Product
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Versatile
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Configurable
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="SingleAutocompleteSelectField-container-id"
                data-tc="category"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Category
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="Apparel"
                    />
                    <div>
                      <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MultiAutocompleteSelectField-container-id"
                data-tc="collections"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Collections
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div>
                      <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                  >
                    *Optional. Adding product to collection helps users find it.
                  </p>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              >
                <div
                  class="MultiAutocompleteSelectField-chip-id"
                >
                  <div
                    class="MultiAutocompleteSelectField-chipInner-id"
                  >
                    <div
                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                    >
                      Winter sale
                    </div>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                      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"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Visibility
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
              >
                <div
                  aria-label="isPublished"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="isPublished"
                          type="radio"
                          value="true"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      <p
                        class="VisibilityCard-label-id"
                      >
                        Visible
                      </p>
                      <span
                        class="VisibilityCard-secondLabel-id"
                      >
                        since Aug 25, 2018
                      </span>
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="isPublished"
                          type="radio"
                          value="false"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      <p
                        class="VisibilityCard-label-id"
                      >
                        Hidden
                      </p>
                      <span
                        class="VisibilityCard-secondLabel-id"
                      />
                    </span>
                  </label>
                </div>
              </div>
              <div
                class="VisibilityCard-children-id"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Products / Product edit no variants 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Ergonomic Plastic Bacon
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Ergonomic Plastic Bacon"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="RichTextEditor-root-id RichTextEditor-scroll-id"
              >
                <div
                  class="RichTextEditor-input-id"
                >
                  <div
                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                  >
                    Description
                  </div>
                  <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-elevation0-id MuiCard-root-id ProductImages-card-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Images
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-tc="button-upload-image"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload image
                  </span>
                </button>
                <input
                  accept="image/*"
                  class="ProductImages-fileField-id"
                  id="fileUpload"
                  multiple=""
                  type="file"
                />
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ProductImages-imageGridContainer-id"
            >
              <div
                class="ProductImages-imageUpload-id ImageUpload-photosIconContainer-id"
                tabindex="0"
              >
                <div
                  class="ProductImages-imageUploadIcon-id"
                >
                  <input
                    accept="image/*"
                    autocomplete="off"
                    class="ImageUpload-fileField-id"
                    multiple=""
                    style="display:none"
                    tabindex="-1"
                    type="file"
                  />
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id ImageUpload-photosIcon-id"
                    focusable="false"
                    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
                    class="MuiTypography-root-id ImageUpload-uploadText-id MuiTypography-body1-id"
                  >
                    Drop here to upload
                  </div>
                </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-elevation0-id MuiCard-root-id ProductAttributes-card-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id ProductAttributes-cardContent-id"
            >
              <div
                class="ProductAttributes-expansionBar-id"
              >
                <div
                  class="ProductAttributes-expansionBarLabelContainer-id"
                >
                  <div
                    class="MuiTypography-root-id ProductAttributes-expansionBarLabel-id MuiTypography-caption-id"
                  >
                    2 Attributes
                  </div>
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id ProductAttributes-expansionBarButton-id"
                  data-tc="product-attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id ProductAttributes-expansionBarButtonIcon-id ProductAttributes-rotate-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="ProductAttributes-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="ProductAttributes-attributeSectionLabel-id"
                  data-tc="product-attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Borders
                  </div>
                </div>
                <div
                  data-tc="product-attribute-value"
                >
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                        data-shrink="true"
                      >
                        Value
                      </label>
                      <div
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value="portals"
                        />
                        <div>
                          <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>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="ProductAttributes-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="ProductAttributes-attributeSectionLabel-id"
                  data-tc="product-attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Legacy
                  </div>
                </div>
                <div
                  data-tc="product-attribute-value"
                >
                  <div
                    class="MultiAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Values
                      </label>
                      <div
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value=""
                        />
                        <div>
                          <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>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                  <div
                    class="MultiAutocompleteSelectField-chipContainer-id"
                  >
                    <div
                      class="MultiAutocompleteSelectField-chip-id"
                    >
                      <div
                        class="MultiAutocompleteSelectField-chipInner-id"
                      >
                        <div
                          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                        >
                          Auto Loan Account
                        </div>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                          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"
                              />
                            </svg>
                          </span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            >
              <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 MuiFormControlLabel-label-id MuiTypography-body1-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Price
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min="0"
                      name="basePrice"
                      type="number"
                      value="339.39"
                    />
                    <div
                      class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                      >
                        NZD
                      </div>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-tc="button-add-variant"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create variant
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <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 ProductVariants-link-id MuiTableRow-hover-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"
                      data-tc="name"
                    >
                      Cordoba Oro
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colStatus-id"
                      data-tc="isAvailable"
                      data-tc-is-available="true"
                    >
                      <div
                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                      >
                        Available
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-tc="sku"
                    >
                      87192-94370
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductVariants-link-id MuiTableRow-hover-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"
                      data-tc="name"
                    >
                      silver
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colStatus-id"
                      data-tc="isAvailable"
                      data-tc-is-available="true"
                    >
                      <div
                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                      >
                        Available
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-tc="sku"
                    >
                      69055-15190
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this product easier to find
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductOrganization-card-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Organize Product
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Versatile
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Configurable
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="SingleAutocompleteSelectField-container-id"
                data-tc="category"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Category
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="Apparel"
                    />
                    <div>
                      <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MultiAutocompleteSelectField-container-id"
                data-tc="collections"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Collections
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div>
                      <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                  >
                    *Optional. Adding product to collection helps users find it.
                  </p>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              >
                <div
                  class="MultiAutocompleteSelectField-chip-id"
                >
                  <div
                    class="MultiAutocompleteSelectField-chipInner-id"
                  >
                    <div
                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                    >
                      Winter sale
                    </div>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                      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"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Visibility
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
              >
                <div
                  aria-label="isPublished"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="isPublished"
                          type="radio"
                          value="true"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      <p
                        class="VisibilityCard-label-id"
                      >
                        Visible
                      </p>
                      <span
                        class="VisibilityCard-secondLabel-id"
                      >
                        since Aug 25, 2018
                      </span>
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="isPublished"
                          type="radio"
                          value="false"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      <p
                        class="VisibilityCard-label-id"
                      >
                        Hidden
                      </p>
                      <span
                        class="VisibilityCard-secondLabel-id"
                      />
                    </span>
                  </label>
                </div>
              </div>
              <div
                class="VisibilityCard-children-id"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Ergonomic Plastic Bacon
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Ergonomic Plastic Bacon"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="RichTextEditor-root-id RichTextEditor-scroll-id"
              >
                <div
                  class="RichTextEditor-input-id"
                >
                  <div
                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                  >
                    Description
                  </div>
                  <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-elevation0-id MuiCard-root-id ProductImages-card-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Images
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-tc="button-upload-image"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload image
                  </span>
                </button>
                <input
                  accept="image/*"
                  class="ProductImages-fileField-id"
                  id="fileUpload"
                  multiple=""
                  type="file"
                />
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ProductImages-imageGridContainer-id"
            >
              <div
                class="ProductImages-imageUpload-id ImageUpload-photosIconContainer-id"
                tabindex="0"
              >
                <div
                  class="ProductImages-imageUploadIcon-id"
                >
                  <input
                    accept="image/*"
                    autocomplete="off"
                    class="ImageUpload-fileField-id"
                    multiple=""
                    style="display:none"
                    tabindex="-1"
                    type="file"
                  />
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id ImageUpload-photosIcon-id"
                    focusable="false"
                    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
                    class="MuiTypography-root-id ImageUpload-uploadText-id MuiTypography-body1-id"
                  >
                    Drop here to upload
                  </div>
                </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-elevation0-id MuiCard-root-id ProductAttributes-card-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id ProductAttributes-cardContent-id"
            >
              <div
                class="ProductAttributes-expansionBar-id"
              >
                <div
                  class="ProductAttributes-expansionBarLabelContainer-id"
                >
                  <div
                    class="MuiTypography-root-id ProductAttributes-expansionBarLabel-id MuiTypography-caption-id"
                  >
                    2 Attributes
                  </div>
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id ProductAttributes-expansionBarButton-id"
                  data-tc="product-attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id ProductAttributes-expansionBarButtonIcon-id ProductAttributes-rotate-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="ProductAttributes-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="ProductAttributes-attributeSectionLabel-id"
                  data-tc="product-attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Borders
                  </div>
                </div>
                <div
                  data-tc="product-attribute-value"
                >
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                        data-shrink="true"
                      >
                        Value
                      </label>
                      <div
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value="portals"
                        />
                        <div>
                          <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>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="ProductAttributes-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="ProductAttributes-attributeSectionLabel-id"
                  data-tc="product-attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Legacy
                  </div>
                </div>
                <div
                  data-tc="product-attribute-value"
                >
                  <div
                    class="MultiAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Values
                      </label>
                      <div
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value=""
                        />
                        <div>
                          <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>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                  <div
                    class="MultiAutocompleteSelectField-chipContainer-id"
                  >
                    <div
                      class="MultiAutocompleteSelectField-chip-id"
                    >
                      <div
                        class="MultiAutocompleteSelectField-chipInner-id"
                      >
                        <div
                          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                        >
                          Auto Loan Account
                        </div>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                          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"
                              />
                            </svg>
                          </span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            >
              <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 MuiFormControlLabel-label-id MuiTypography-body1-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Price
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min="0"
                      name="basePrice"
                      type="number"
                      value="339.39"
                    />
                    <div
                      class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                      >
                        NZD
                      </div>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-tc="button-add-variant"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create variant
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <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 ProductVariants-link-id MuiTableRow-hover-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"
                      data-tc="name"
                    >
                      Cordoba Oro
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colStatus-id"
                      data-tc="isAvailable"
                      data-tc-is-available="true"
                    >
                      <div
                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                      >
                        Available
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-tc="sku"
                    >
                      87192-94370
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductVariants-link-id MuiTableRow-hover-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"
                      data-tc="name"
                    >
                      silver
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colStatus-id"
                      data-tc="isAvailable"
                      data-tc-is-available="true"
                    >
                      <div
                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                      >
                        Available
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-tc="sku"
                    >
                      69055-15190
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this product easier to find
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductOrganization-card-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Organize Product
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Versatile
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Configurable
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="SingleAutocompleteSelectField-container-id"
                data-tc="category"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Category
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="Apparel"
                    />
                    <div>
                      <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MultiAutocompleteSelectField-container-id"
                data-tc="collections"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Collections
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div>
                      <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                  >
                    *Optional. Adding product to collection helps users find it.
                  </p>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              >
                <div
                  class="MultiAutocompleteSelectField-chip-id"
                >
                  <div
                    class="MultiAutocompleteSelectField-chipInner-id"
                  >
                    <div
                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                    >
                      Winter sale
                    </div>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                      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"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Visibility
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
              >
                <div
                  aria-label="isPublished"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="isPublished"
                          type="radio"
                          value="true"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      <p
                        class="VisibilityCard-label-id"
                      >
                        Visible
                      </p>
                      <span
                        class="VisibilityCard-secondLabel-id"
                      >
                        since Aug 25, 2018
                      </span>
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="isPublished"
                          type="radio"
                          value="false"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      <p
                        class="VisibilityCard-label-id"
                      >
                        Hidden
                      </p>
                      <span
                        class="VisibilityCard-secondLabel-id"
                      />
                    </span>
                  </label>
                </div>
              </div>
              <div
                class="VisibilityCard-children-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 ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <span
            class="Skeleton-skeleton-id"
            style="width:10em"
          >
            ‌
          </span>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="RichTextEditor-root-id RichTextEditor-scroll-id"
              >
                <div
                  class="RichTextEditor-input-id"
                >
                  <div
                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                  >
                    Description
                  </div>
                  <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-elevation0-id MuiCard-root-id ProductImages-card-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Images
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-tc="button-upload-image"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload image
                  </span>
                </button>
                <input
                  accept="image/*"
                  class="ProductImages-fileField-id"
                  id="fileUpload"
                  multiple=""
                  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="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            >
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    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"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      disabled=""
                      min="0"
                      name="basePrice"
                      type="number"
                      value="0"
                    />
                    <span />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Inventory
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductStock-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    SKU (Stock Keeping Unit)
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="sku"
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Inventory
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="stockQuantity"
                      type="number"
                      value="0"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this product easier to find
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductOrganization-card-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Organize Product
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                ...
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                ...
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="SingleAutocompleteSelectField-container-id"
                data-tc="category"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Category
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      disabled=""
                      type="text"
                      value=""
                    />
                    <div>
                      <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="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 MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Collections
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div>
                      <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                  >
                    *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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Visibility
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
              >
                <div
                  aria-label="isPublished"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="isPublished"
                          type="radio"
                          value="true"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      <p
                        class="VisibilityCard-label-id"
                      >
                        Visible
                      </p>
                      <span
                        class="VisibilityCard-secondLabel-id"
                      />
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      aria-disabled="true"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          disabled=""
                          name="isPublished"
                          type="radio"
                          value="false"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                    >
                      <p
                        class="VisibilityCard-label-id"
                      >
                        Hidden
                      </p>
                      <span
                        class="VisibilityCard-secondLabel-id"
                      />
                    </span>
                  </label>
                </div>
              </div>
              <div
                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
              >
                Set publication date
              </div>
              <div
                class="VisibilityCard-children-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 ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Ergonomic Plastic Bacon
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Ergonomic Plastic Bacon"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="RichTextEditor-root-id RichTextEditor-scroll-id"
              >
                <div
                  class="RichTextEditor-input-id"
                >
                  <div
                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                  >
                    Description
                  </div>
                  <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-elevation0-id MuiCard-root-id ProductImages-card-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Images
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-tc="button-upload-image"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload image
                  </span>
                </button>
                <input
                  accept="image/*"
                  class="ProductImages-fileField-id"
                  id="fileUpload"
                  multiple=""
                  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
                    accept="image/*"
                    autocomplete="off"
                    class="ImageUpload-fileField-id"
                    multiple=""
                    style="display:none"
                    tabindex="-1"
                    type="file"
                  />
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id ImageUpload-photosIcon-id"
                    focusable="false"
                    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
                    class="MuiTypography-root-id ImageUpload-uploadText-id MuiTypography-body1-id"
                  >
                    Drop here to upload
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductAttributes-card-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id ProductAttributes-cardContent-id"
            >
              <div
                class="ProductAttributes-expansionBar-id"
              >
                <div
                  class="ProductAttributes-expansionBarLabelContainer-id"
                >
                  <div
                    class="MuiTypography-root-id ProductAttributes-expansionBarLabel-id MuiTypography-caption-id"
                  >
                    2 Attributes
                  </div>
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id ProductAttributes-expansionBarButton-id"
                  data-tc="product-attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id ProductAttributes-expansionBarButtonIcon-id ProductAttributes-rotate-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="ProductAttributes-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="ProductAttributes-attributeSectionLabel-id"
                  data-tc="product-attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Borders
                  </div>
                </div>
                <div
                  data-tc="product-attribute-value"
                >
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                        data-shrink="true"
                      >
                        Value
                      </label>
                      <div
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value="portals"
                        />
                        <div>
                          <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>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="ProductAttributes-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="ProductAttributes-attributeSectionLabel-id"
                  data-tc="product-attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Legacy
                  </div>
                </div>
                <div
                  data-tc="product-attribute-value"
                >
                  <div
                    class="MultiAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Values
                      </label>
                      <div
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value=""
                        />
                        <div>
                          <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>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                  <div
                    class="MultiAutocompleteSelectField-chipContainer-id"
                  >
                    <div
                      class="MultiAutocompleteSelectField-chip-id"
                    >
                      <div
                        class="MultiAutocompleteSelectField-chipInner-id"
                      >
                        <div
                          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                        >
                          Auto Loan Account
                        </div>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                          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"
                              />
                            </svg>
                          </span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            >
              <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 MuiFormControlLabel-label-id MuiTypography-body1-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Price
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min="0"
                      name="basePrice"
                      type="number"
                      value="339.39"
                    />
                    <div
                      class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                      >
                        NZD
                      </div>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-tc="button-add-variant"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create variant
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <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 ProductVariants-link-id MuiTableRow-hover-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"
                      data-tc="name"
                    >
                      Cordoba Oro
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colStatus-id"
                      data-tc="isAvailable"
                      data-tc-is-available="true"
                    >
                      <div
                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                      >
                        Available
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-tc="sku"
                    >
                      87192-94370
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductVariants-link-id MuiTableRow-hover-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"
                      data-tc="name"
                    >
                      silver
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colStatus-id"
                      data-tc="isAvailable"
                      data-tc-is-available="true"
                    >
                      <div
                        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                      >
                        Available
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-tc="sku"
                    >
                      69055-15190
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this product easier to find
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductOrganization-card-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Organize Product
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Versatile
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Configurable
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="SingleAutocompleteSelectField-container-id"
                data-tc="category"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Category
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="Apparel"
                    />
                    <div>
                      <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MultiAutocompleteSelectField-container-id"
                data-tc="collections"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Collections
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div>
                      <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                  >
                    *Optional. Adding product to collection helps users find it.
                  </p>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              >
                <div
                  class="MultiAutocompleteSelectField-chip-id"
                >
                  <div
                    class="MultiAutocompleteSelectField-chipInner-id"
                  >
                    <div
                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                    >
                      Winter sale
                    </div>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                      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"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Visibility
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
              >
                <div
                  aria-label="isPublished"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="isPublished"
                          type="radio"
                          value="true"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      <p
                        class="VisibilityCard-label-id"
                      >
                        Visible
                      </p>
                      <span
                        class="VisibilityCard-secondLabel-id"
                      >
                        since Aug 25, 2018
                      </span>
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="isPublished"
                          type="radio"
                          value="false"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      <p
                        class="VisibilityCard-label-id"
                      >
                        Hidden
                      </p>
                      <span
                        class="VisibilityCard-secondLabel-id"
                      />
                    </span>
                  </label>
                </div>
              </div>
              <div
                class="VisibilityCard-children-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 ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Ergonomic Plastic Bacon
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Ergonomic Plastic Bacon"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="RichTextEditor-root-id RichTextEditor-scroll-id"
              >
                <div
                  class="RichTextEditor-input-id"
                >
                  <div
                    class="MuiTypography-root-id RichTextEditor-label-id MuiTypography-caption-id MuiTypography-colorPrimary-id"
                  >
                    Description
                  </div>
                  <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-elevation0-id MuiCard-root-id ProductImages-card-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Images
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-tc="button-upload-image"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload image
                  </span>
                </button>
                <input
                  accept="image/*"
                  class="ProductImages-fileField-id"
                  id="fileUpload"
                  multiple=""
                  type="file"
                />
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ProductImages-imageGridContainer-id"
            >
              <div
                class="ProductImages-imageUpload-id ImageUpload-photosIconContainer-id"
                tabindex="0"
              >
                <div
                  class="ProductImages-imageUploadIcon-id"
                >
                  <input
                    accept="image/*"
                    autocomplete="off"
                    class="ImageUpload-fileField-id"
                    multiple=""
                    style="display:none"
                    tabindex="-1"
                    type="file"
                  />
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id ImageUpload-photosIcon-id"
                    focusable="false"
                    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
                    class="MuiTypography-root-id ImageUpload-uploadText-id MuiTypography-body1-id"
                  >
                    Drop here to upload
                  </div>
                </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-elevation0-id MuiCard-root-id ProductAttributes-card-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id ProductAttributes-cardContent-id"
            >
              <div
                class="ProductAttributes-expansionBar-id"
              >
                <div
                  class="ProductAttributes-expansionBarLabelContainer-id"
                >
                  <div
                    class="MuiTypography-root-id ProductAttributes-expansionBarLabel-id MuiTypography-caption-id"
                  >
                    2 Attributes
                  </div>
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id ProductAttributes-expansionBarButton-id"
                  data-tc="product-attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id ProductAttributes-expansionBarButtonIcon-id ProductAttributes-rotate-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="ProductAttributes-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="ProductAttributes-attributeSectionLabel-id"
                  data-tc="product-attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Borders
                  </div>
                </div>
                <div
                  data-tc="product-attribute-value"
                >
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                        data-shrink="true"
                      >
                        Value
                      </label>
                      <div
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value="portals"
                        />
                        <div>
                          <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>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="ProductAttributes-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="ProductAttributes-attributeSectionLabel-id"
                  data-tc="product-attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Legacy
                  </div>
                </div>
                <div
                  data-tc="product-attribute-value"
                >
                  <div
                    class="MultiAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                        data-shrink="false"
                      >
                        Values
                      </label>
                      <div
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value=""
                        />
                        <div>
                          <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>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="PrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                      </div>
                    </div>
                  </div>
                  <div
                    class="MultiAutocompleteSelectField-chipContainer-id"
                  >
                    <div
                      class="MultiAutocompleteSelectField-chip-id"
                    >
                      <div
                        class="MultiAutocompleteSelectField-chipInner-id"
                      >
                        <div
                          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                        >
                          Auto Loan Account
                        </div>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                          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"
                              />
                            </svg>
                          </span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            >
              <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 MuiFormControlLabel-label-id MuiTypography-body1-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Price
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      min="0"
                      name="basePrice"
                      type="number"
                      value="339.39"
                    />
                    <div
                      class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                      >
                        NZD
                      </div>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Inventory
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductStock-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    SKU (Stock Keeping Unit)
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="sku"
                      type="text"
                      value="87192-94370"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Inventory
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="stockQuantity"
                      type="number"
                      value="12"
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Add search engine title and description to make this product easier to find
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductOrganization-card-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Organize Product
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Versatile
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Simple
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="SingleAutocompleteSelectField-container-id"
                data-tc="category"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Category
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="Apparel"
                    />
                    <div>
                      <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MultiAutocompleteSelectField-container-id"
                data-tc="collections"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Collections
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div>
                      <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                  >
                    *Optional. Adding product to collection helps users find it.
                  </p>
                </div>
              </div>
              <div
                class="MultiAutocompleteSelectField-chipContainer-id"
              >
                <div
                  class="MultiAutocompleteSelectField-chip-id"
                >
                  <div
                    class="MultiAutocompleteSelectField-chipInner-id"
                  >
                    <div
                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
                    >
                      Winter sale
                    </div>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                      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"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Visibility
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
              >
                <div
                  aria-label="isPublished"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          checked=""
                          class="PrivateSwitchBase-input-id"
                          name="isPublished"
                          type="radio"
                          value="true"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      <p
                        class="VisibilityCard-label-id"
                      >
                        Visible
                      </p>
                      <span
                        class="VisibilityCard-secondLabel-id"
                      >
                        since Aug 25, 2018
                      </span>
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          name="isPublished"
                          type="radio"
                          value="false"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                    >
                      <p
                        class="VisibilityCard-label-id"
                      >
                        Hidden
                      </p>
                      <span
                        class="VisibilityCard-secondLabel-id"
                      />
                    </span>
                  </label>
                </div>
              </div>
              <div
                class="VisibilityCard-children-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 ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Edit Photo
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductImageNavigation-card-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Description
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    name="description"
                    rows="1"
                  >
                    Lorem ipsum
                  </textarea>
                  <textarea
                    aria-hidden="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    readonly=""
                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                    tabindex="-1"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                >
                  Optional
                </p>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Edit Photo
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ProductImageNavigation-card-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Description
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <textarea
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    disabled=""
                    name="description"
                    rows="1"
                  />
                  <textarea
                    aria-hidden="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                    readonly=""
                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
                    tabindex="-1"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
                >
                  Optional
                </p>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Products
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div
            class="ProductListPage-columnPicker-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ColumnPickerButton-root-id MuiButton-outlinedPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Columns
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id ColumnPickerButton-icon-id MuiSvgIcon-colorPrimary-id"
                  focusable="false"
                  role="presentation"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M7 10l5 5 5-5z"
                  />
                </svg>
              </span>
            </button>
          </div>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-tc="add-product"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Product
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Products
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Products..."
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ProductList-tableContainer-id"
      >
        <div
          class="ResponsiveTable-root-id"
        >
          <table
            class="MuiTable-root-id ProductList-table-id"
          >
            <colgroup>
              <col />
              <col
                class="ProductList-colName-id"
              />
              <col
                class="ProductList-colType-id"
              />
              <col
                class="ProductList-colPublished-id"
              />
              <col
                class="ProductList-colPrice-id"
              />
            </colgroup>
            <thead
              class="MuiTableHead-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-head-id"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
                  scope="col"
                >
                  <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 TableCellHeader-root-id ProductList-colName-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      <span
                        class="ProductList-colNameHeader-id"
                      >
                        Name
                      </span>
                    </div>
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="24"
                        width="24"
                      />
                      <path
                        clip-rule="evenodd"
                        d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                        fill="currentColor"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colType-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Type
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPublished-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Published
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPrice-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Price
                    </div>
                  </div>
                </th>
              </tr>
            </thead>
            <tfoot
              class="MuiTableFooter-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-footer-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                  colspan="5"
                >
                  <div
                    class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                  >
                    <div
                      class="TablePagination-spacer-id"
                    >
                      <div>
                        <span
                          class="RowNumberSelect-label-id"
                        >
                          No of Rows:
                        </span>
                        <div
                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        >
                          <div
                            aria-haspopup="listbox"
                            aria-labelledby=" "
                            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                      class="TablePaginationActions-root-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        data-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 ProductList-link-id MuiTableRow-hover-id"
                data-tc="id"
                data-tc-id="UHJvZHVjdDo2MQ=="
              >
                <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"
                  data-tc="name"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-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"
                  data-tc="product-type"
                >
                  Paint
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-tc="isPublished"
                  data-tc-is-published="true"
                >
                  <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 ProductList-link-id MuiTableRow-hover-id"
                data-tc="id"
                data-tc-id="UHJvZHVjdDo2NA=="
              >
                <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"
                  data-tc="name"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-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"
                  data-tc="product-type"
                >
                  Paint
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-tc="isPublished"
                  data-tc-is-published="true"
                >
                  <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 ProductList-link-id MuiTableRow-hover-id"
                data-tc="id"
                data-tc-id="UHJvZHVjdDo2NQ=="
              >
                <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"
                  data-tc="name"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-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"
                  data-tc="product-type"
                >
                  Paint
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-tc="isPublished"
                  data-tc-is-published="true"
                >
                  <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 ProductList-link-id MuiTableRow-hover-id"
                data-tc="id"
                data-tc-id="UHJvZHVjdDo3NQ=="
              >
                <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"
                  data-tc="name"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-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"
                  data-tc="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-tc="isPublished"
                  data-tc-is-published="true"
                >
                  <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 ProductList-link-id MuiTableRow-hover-id"
                data-tc="id"
                data-tc-id="UHJvZHVjdDo3Ng=="
              >
                <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"
                  data-tc="name"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-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"
                  data-tc="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-tc="isPublished"
                  data-tc-is-published="true"
                >
                  <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 ProductList-link-id MuiTableRow-hover-id"
                data-tc="id"
                data-tc-id="UHJvZHVjdDo3Mg=="
              >
                <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"
                  data-tc="name"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-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"
                  data-tc="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-tc="isPublished"
                  data-tc-is-published="true"
                >
                  <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 ProductList-link-id MuiTableRow-hover-id"
                data-tc="id"
                data-tc-id="UHJvZHVjdDo3MQ=="
              >
                <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"
                  data-tc="name"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-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"
                  data-tc="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-tc="isPublished"
                  data-tc-is-published="true"
                >
                  <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 ProductList-link-id MuiTableRow-hover-id"
                data-tc="id"
                data-tc-id="UHJvZHVjdDo3NA=="
              >
                <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"
                  data-tc="name"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-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"
                  data-tc="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-tc="isPublished"
                  data-tc-is-published="true"
                >
                  <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 ProductList-link-id MuiTableRow-hover-id"
                data-tc="id"
                data-tc-id="UHJvZHVjdDo3OQ=="
              >
                <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"
                  data-tc="name"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-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"
                  data-tc="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-tc="isPublished"
                  data-tc-is-published="true"
                >
                  <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 ProductList-link-id MuiTableRow-hover-id"
                data-tc="id"
                data-tc-id="UHJvZHVjdDo3Mw=="
              >
                <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"
                  data-tc="name"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-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"
                  data-tc="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-tc="isPublished"
                  data-tc-is-published="true"
                >
                  <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 ProductList-link-id MuiTableRow-hover-id"
                data-tc="id"
                data-tc-id="UHJvZHVjdDo3OA=="
              >
                <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"
                  data-tc="name"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-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"
                  data-tc="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-tc="isPublished"
                  data-tc-is-published="true"
                >
                  <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 ProductList-link-id MuiTableRow-hover-id"
                data-tc="id"
                data-tc-id="UHJvZHVjdDo4OQ=="
              >
                <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"
                  data-tc="name"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-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"
                  data-tc="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-tc="isPublished"
                  data-tc-is-published="true"
                >
                  <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 ProductList-link-id MuiTableRow-hover-id"
                data-tc="id"
                data-tc-id="UHJvZHVjdDoxMDc="
              >
                <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"
                  data-tc="name"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-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"
                  data-tc="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-tc="isPublished"
                  data-tc-is-published="true"
                >
                  <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 ProductList-link-id MuiTableRow-hover-id"
                data-tc="id"
                data-tc-id="UHJvZHVjdDoxMDg="
              >
                <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"
                  data-tc="name"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-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"
                  data-tc="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-tc="isPublished"
                  data-tc-is-published="true"
                >
                  <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 ProductList-link-id MuiTableRow-hover-id"
                data-tc="id"
                data-tc-id="UHJvZHVjdDoxMDk="
              >
                <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"
                  data-tc="name"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-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"
                  data-tc="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-tc="isPublished"
                  data-tc-is-published="true"
                >
                  <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 ProductList-link-id MuiTableRow-hover-id"
                data-tc="id"
                data-tc-id="UHJvZHVjdDoxMTA="
              >
                <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"
                  data-tc="name"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-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"
                  data-tc="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-tc="isPublished"
                  data-tc-is-published="true"
                >
                  <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 ProductList-link-id MuiTableRow-hover-id"
                data-tc="id"
                data-tc-id="UHJvZHVjdDoxMTU="
              >
                <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"
                  data-tc="name"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-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"
                  data-tc="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-tc="isPublished"
                  data-tc-is-published="true"
                >
                  <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 ProductList-link-id MuiTableRow-hover-id"
                data-tc="id"
                data-tc-id="UHJvZHVjdDoxMTY="
              >
                <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"
                  data-tc="name"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-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"
                  data-tc="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-tc="isPublished"
                  data-tc-is-published="true"
                >
                  <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 ProductList-link-id MuiTableRow-hover-id"
                data-tc="id"
                data-tc-id="UHJvZHVjdDoxMTc="
              >
                <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"
                  data-tc="name"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-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"
                  data-tc="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-tc="isPublished"
                  data-tc-is-published="true"
                >
                  <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 ProductList-link-id MuiTableRow-hover-id"
                data-tc="id"
                data-tc-id="UHJvZHVjdDo4NQ=="
              >
                <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"
                  data-tc="name"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-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"
                  data-tc="product-type"
                >
                  Cushion
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-tc="isPublished"
                  data-tc-is-published="true"
                >
                  <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>
</div>
`;

exports[`Storyshots Views / Products / Product list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Products
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div
            class="ProductListPage-columnPicker-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ColumnPickerButton-root-id MuiButton-outlinedPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Columns
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id ColumnPickerButton-icon-id MuiSvgIcon-colorPrimary-id"
                  focusable="false"
                  role="presentation"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M7 10l5 5 5-5z"
                  />
                </svg>
              </span>
            </button>
          </div>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-tc="add-product"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Product
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                All Products
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Products..."
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id FilterBar-tabActionButton-id MuiButton-textPrimary-id"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            Delete Search
          </span>
        </button>
      </div>
      <div
        class="ProductList-tableContainer-id"
      >
        <div
          class="ResponsiveTable-root-id"
        >
          <table
            class="MuiTable-root-id ProductList-table-id"
          >
            <colgroup>
              <col />
              <col
                class="ProductList-colName-id"
              />
              <col
                class="ProductList-colType-id"
              />
              <col
                class="ProductList-colPublished-id"
              />
              <col
                class="ProductList-colPrice-id"
              />
            </colgroup>
            <thead
              class="MuiTableHead-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-head-id"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
                  scope="col"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 TableCellHeader-root-id ProductList-colName-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      <span
                        class="ProductList-colNameHeader-id"
                      >
                        Name
                      </span>
                    </div>
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="24"
                        width="24"
                      />
                      <path
                        clip-rule="evenodd"
                        d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                        fill="currentColor"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colType-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Type
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPublished-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Published
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPrice-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Price
                    </div>
                  </div>
                </th>
              </tr>
            </thead>
            <tfoot
              class="MuiTableFooter-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-footer-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                  colspan="5"
                >
                  <div
                    class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                  >
                    <div
                      class="TablePagination-spacer-id"
                    >
                      <div>
                        <span
                          class="RowNumberSelect-label-id"
                        >
                          No of Rows:
                        </span>
                        <div
                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        >
                          <div
                            aria-haspopup="listbox"
                            aria-labelledby=" "
                            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                      class="TablePaginationActions-root-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        data-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 TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-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"
                data-tc="id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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"
                  data-tc="name"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id MuiAvatar-colorDefault-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"
                        />
                      </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"
                  data-tc="product-type"
                >
                  <span
                    class="Skeleton-skeleton-id"
                  >
                    ‌
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-tc="isPublished"
                >
                  <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>
</div>
`;

exports[`Storyshots Views / Products / Product list no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Products
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div
            class="ProductListPage-columnPicker-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ColumnPickerButton-root-id MuiButton-outlinedPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Columns
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id ColumnPickerButton-icon-id MuiSvgIcon-colorPrimary-id"
                  focusable="false"
                  role="presentation"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M7 10l5 5 5-5z"
                  />
                </svg>
              </span>
            </button>
          </div>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-tc="add-product"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Product
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Products
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Products..."
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ProductList-tableContainer-id"
      >
        <div
          class="ResponsiveTable-root-id"
        >
          <table
            class="MuiTable-root-id ProductList-table-id"
          >
            <colgroup>
              <col />
              <col
                class="ProductList-colName-id"
              />
              <col
                class="ProductList-colType-id"
              />
              <col
                class="ProductList-colPublished-id"
              />
              <col
                class="ProductList-colPrice-id"
              />
            </colgroup>
            <thead
              class="MuiTableHead-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-head-id"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colName-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      <span
                        class="ProductList-colNameHeader-id"
                      >
                        Name
                      </span>
                    </div>
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <rect
                        fill="transparent"
                        height="24"
                        width="24"
                      />
                      <path
                        clip-rule="evenodd"
                        d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                        fill="currentColor"
                        fill-rule="evenodd"
                      />
                    </svg>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colType-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Type
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPublished-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Published
                    </div>
                  </div>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPrice-id"
                  scope="col"
                >
                  <div
                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
                  >
                    <div
                      class="TableCellHeader-label-id"
                    >
                      Price
                    </div>
                  </div>
                </th>
              </tr>
            </thead>
            <tfoot
              class="MuiTableFooter-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-footer-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                  colspan="5"
                >
                  <div
                    class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                  >
                    <div
                      class="TablePagination-spacer-id"
                    >
                      <div>
                        <span
                          class="RowNumberSelect-label-id"
                        >
                          No of Rows:
                        </span>
                        <div
                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        >
                          <div
                            aria-haspopup="listbox"
                            aria-labelledby=" "
                            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                      class="TablePaginationActions-root-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        data-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>
</div>
`;

exports[`Storyshots Views / Products / Product variant details attribute errors 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Extended Hard
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <form>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-tabActive-id"
                    >
                      <div
                        class="TableCellAvatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-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 ProductVariantNavigation-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                    >
                      <div
                        class="TableCellAvatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-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 ProductVariantNavigation-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                    >
                      <div
                        class="TableCellAvatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-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 ProductVariantNavigation-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                    >
                      <div
                        class="TableCellAvatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-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"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Add variant
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-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"
                    >
                      <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>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
                <div
                  class="SingleAutocompleteSelectField-container-id"
                  data-tc="variant-attribute-input"
                >
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                      data-shrink="true"
                    >
                      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"
                    >
                      <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>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorError-id"
              >
                All attributes should have value
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorError-id"
              >
                This variant already exists
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Images
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Choose 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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductVariantPrice-grid-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                      data-shrink="true"
                    >
                      Selling price override
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="priceOverride"
                        type="number"
                        value="100"
                      />
                      <div
                        class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                        >
                          USD
                        </div>
                      </div>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                    >
                      Optional
                    </p>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-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"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="costPrice"
                        type="number"
                        value="12"
                      />
                      <div
                        class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                        >
                          USD
                        </div>
                      </div>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                      data-shrink="true"
                    >
                      Inventory
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="quantity"
                        type="text"
                        value="19"
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                    >
                      Allocated: 12
                    </p>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                      data-shrink="true"
                    >
                      SKU (Stock Keeping Unit)
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="sku"
                        type="text"
                        value="1230959124123"
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                    >
                      Unknown error
                    </p>
                  </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 ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Extended Hard
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <form>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-tabActive-id"
                    >
                      <div
                        class="TableCellAvatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-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 ProductVariantNavigation-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                    >
                      <div
                        class="TableCellAvatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-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 ProductVariantNavigation-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                    >
                      <div
                        class="TableCellAvatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-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 ProductVariantNavigation-link-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                    >
                      <div
                        class="TableCellAvatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-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"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Add variant
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-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"
                    >
                      <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>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
                <div
                  class="SingleAutocompleteSelectField-container-id"
                  data-tc="variant-attribute-input"
                >
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                      data-shrink="true"
                    >
                      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"
                    >
                      <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>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Images
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Choose 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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductVariantPrice-grid-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                      data-shrink="true"
                    >
                      Selling price override
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="priceOverride"
                        type="number"
                        value="100"
                      />
                      <div
                        class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                        >
                          USD
                        </div>
                      </div>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                    >
                      Optional
                    </p>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-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"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="costPrice"
                        type="number"
                        value="12"
                      />
                      <div
                        class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                        >
                          USD
                        </div>
                      </div>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                      data-shrink="true"
                    >
                      Inventory
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="quantity"
                        type="text"
                        value="19"
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                    >
                      Allocated: 12
                    </p>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                      data-shrink="true"
                    >
                      SKU (Stock Keeping Unit)
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="sku"
                        type="text"
                        value="1230959124123"
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </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 ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        <span
          class="Skeleton-skeleton-id"
          style="width:10em"
        >
          ‌
        </span>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <form>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id ProductVariantNavigation-link-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                    >
                      <div
                        class="TableCellAvatar-content-id"
                      >
                        <div
                          class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id MuiAvatar-colorDefault-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"
                            />
                          </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"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Add variant
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Images
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Choose 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-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductVariantPrice-grid-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                      data-shrink="false"
                    >
                      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"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        disabled=""
                        name="priceOverride"
                        type="number"
                        value=""
                      />
                      <span />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
                    >
                      Optional
                    </p>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        disabled=""
                        name="costPrice"
                        type="number"
                        value=""
                      />
                      <span />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
                    >
                      Optional
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                      data-shrink="true"
                    >
                      Inventory
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                        disabled=""
                        name="quantity"
                        type="text"
                        value="0"
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                      data-shrink="false"
                    >
                      SKU (Stock Keeping Unit)
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                        disabled=""
                        name="sku"
                        type="text"
                        value=""
                      />
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="PrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
`;

exports[`Storyshots Views / Services / Create service default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create New Account
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Service Account Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Account Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Permissions
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Expand or restrict user's permissions to access certain part of saleor system.
            </div>
            <div
              class="AccountPermissions-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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  User has full access to the store
                </span>
              </label>
            </div>
          </div>
          <hr
            class="AccountPermissions-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="MANAGE_DISCOUNTS"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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"
                    name="MANAGE_MENUS"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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"
                    name="MANAGE_ORDERS"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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"
                    name="MANAGE_PAGES"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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"
                    name="MANAGE_PRODUCTS"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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"
                    name="MANAGE_SETTINGS"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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"
                    name="MANAGE_SHIPPING"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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"
                    name="MANAGE_STAFF"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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"
                    name="MANAGE_USERS"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Manage 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"
                    name="MANAGE_PLUGINS"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Manage plugins
                </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"
                    name="MANAGE_SERVICE_ACCOUNTS"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Manage service accounts
                </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"
                    name="MANAGE_WEBHOOKS"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Manage webhooks
                </span>
              </label>
            </div>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              If you want to disable this account uncheck the box below
            </div>
            <label
              class="MuiFormControlLabel-root-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  name="isActive"
                  type="checkbox"
                  value="false"
                />
              </button>
              <span
                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
              >
                Service account is active
              </span>
            </label>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Services / Create service form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create New Account
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Service Account Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                  data-shrink="false"
                >
                  Account Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Invalid value
                </p>
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Permissions
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Expand or restrict user's permissions to access certain part of saleor system.
            </div>
            <div
              class="AccountPermissions-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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  User has full access to the store
                </span>
              </label>
            </div>
          </div>
          <hr
            class="AccountPermissions-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="MANAGE_DISCOUNTS"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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"
                    name="MANAGE_MENUS"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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"
                    name="MANAGE_ORDERS"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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"
                    name="MANAGE_PAGES"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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"
                    name="MANAGE_PRODUCTS"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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"
                    name="MANAGE_SETTINGS"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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"
                    name="MANAGE_SHIPPING"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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"
                    name="MANAGE_STAFF"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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"
                    name="MANAGE_USERS"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Manage 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"
                    name="MANAGE_PLUGINS"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Manage plugins
                </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"
                    name="MANAGE_SERVICE_ACCOUNTS"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Manage service accounts
                </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"
                    name="MANAGE_WEBHOOKS"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Manage webhooks
                </span>
              </label>
            </div>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              If you want to disable this account uncheck the box below
            </div>
            <label
              class="MuiFormControlLabel-root-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  name="isActive"
                  type="checkbox"
                  value="false"
                />
              </button>
              <span
                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
              >
                Service account is active
              </span>
            </label>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Services / Create service loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create New Account
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Service Account Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Account Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Permissions
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Expand or restrict user's permissions to access certain part of saleor system.
            </div>
            <div
              class="AccountPermissions-checkboxContainer-id"
            >
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  User has full access to the store
                </span>
              </label>
            </div>
          </div>
          <hr
            class="AccountPermissions-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div>
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Manage sales and vouchers
                </span>
              </label>
            </div>
            <div>
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Manage navigation
                </span>
              </label>
            </div>
            <div>
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Manage orders
                </span>
              </label>
            </div>
            <div>
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Manage pages
                </span>
              </label>
            </div>
            <div>
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Manage products
                </span>
              </label>
            </div>
            <div>
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Manage settings
                </span>
              </label>
            </div>
            <div>
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Manage shipping
                </span>
              </label>
            </div>
            <div>
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Manage staff
                </span>
              </label>
            </div>
            <div>
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Manage customers
                </span>
              </label>
            </div>
            <div>
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-disabled-id"
                    disabled=""
                    name="MANAGE_PLUGINS"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Manage plugins
                </span>
              </label>
            </div>
            <div>
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-disabled-id"
                    disabled=""
                    name="MANAGE_SERVICE_ACCOUNTS"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Manage service accounts
                </span>
              </label>
            </div>
            <div>
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-disabled-id"
                    disabled=""
                    name="MANAGE_WEBHOOKS"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Manage webhooks
                </span>
              </label>
            </div>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              If you want to disable this account uncheck the box below
            </div>
            <label
              class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
              >
                Service account is active
              </span>
            </label>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

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

exports[`Storyshots Views / Services / Service details default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Magento Importer
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Service Account Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Account Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Magento Importer"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Service Account Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create Token
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ServiceTokens-colNote-id"
                      scope="col"
                    >
                      Token Note
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ServiceTokens-colKey-id"
                      scope="col"
                    >
                      Key
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ServiceTokens-colActions-id"
                      scope="col"
                    >
                      Actions
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ServiceTokens-colNote-id"
                    >
                      default
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ServiceTokens-colKey-id"
                    >
                      **** AK05
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ServiceTokens-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Permissions
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Expand or restrict user's permissions to access certain part of saleor system.
              </div>
              <div
                class="AccountPermissions-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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    User has full access to the store
                  </span>
                </label>
              </div>
            </div>
            <hr
              class="AccountPermissions-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="MANAGE_DISCOUNTS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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"
                      name="MANAGE_MENUS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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"
                      name="MANAGE_ORDERS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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"
                      name="MANAGE_PAGES"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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 MuiFormControlLabel-label-id MuiTypography-body1-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"
                      name="MANAGE_SETTINGS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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"
                      name="MANAGE_SHIPPING"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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"
                      name="MANAGE_STAFF"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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"
                      name="MANAGE_USERS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Manage 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"
                      name="MANAGE_PLUGINS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Manage plugins
                  </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"
                      name="MANAGE_SERVICE_ACCOUNTS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Manage service accounts
                  </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"
                      name="MANAGE_WEBHOOKS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Manage webhooks
                  </span>
                </label>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                If you want to disable this account uncheck the box below
              </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="isActive"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Service account is active
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Services / Service details default token 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Magento Importer
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ServiceTokenCreateDialog-root-id MuiPaper-rounded-id"
          >
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ServiceTokenCreateDialog-content-id"
              >
                <div>
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    We’ve created your default token. Make sure to copy your new personal access token now. You won’t be able to see it again.
                  </div>
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    This token gives you access to your shop's API, which you'll find here: 
                    <a
                      class="MuiTypography-root-id Link-root-id Link-primary-id MuiTypography-body1-id"
                      href="https://example.com/graphql/"
                    >
                      https://example.com/graphql/
                    </a>
                  </div>
                </div>
                <div
                  class="ServiceTokenCreateDialog-closeContainer-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="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
              <div
                class="MuiPaper-root-id MuiPaper-elevation0-id ServiceTokenCreateDialog-paper-id MuiPaper-rounded-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-caption-id"
                >
                  Generated Token
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  93B4AF3D7E9FD7C61C4C9B32FF82F
                </div>
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id ServiceTokenCreateDialog-copy-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Copy token
                  </span>
                </button>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Service Account Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Account Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Magento Importer"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Service Account Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create Token
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ServiceTokens-colNote-id"
                      scope="col"
                    >
                      Token Note
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ServiceTokens-colKey-id"
                      scope="col"
                    >
                      Key
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ServiceTokens-colActions-id"
                      scope="col"
                    >
                      Actions
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ServiceTokens-colNote-id"
                    >
                      default
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ServiceTokens-colKey-id"
                    >
                      **** AK05
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ServiceTokens-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Permissions
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Expand or restrict user's permissions to access certain part of saleor system.
              </div>
              <div
                class="AccountPermissions-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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    User has full access to the store
                  </span>
                </label>
              </div>
            </div>
            <hr
              class="AccountPermissions-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="MANAGE_DISCOUNTS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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"
                      name="MANAGE_MENUS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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"
                      name="MANAGE_ORDERS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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"
                      name="MANAGE_PAGES"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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 MuiFormControlLabel-label-id MuiTypography-body1-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"
                      name="MANAGE_SETTINGS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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"
                      name="MANAGE_SHIPPING"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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"
                      name="MANAGE_STAFF"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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"
                      name="MANAGE_USERS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Manage 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"
                      name="MANAGE_PLUGINS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Manage plugins
                  </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"
                      name="MANAGE_SERVICE_ACCOUNTS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Manage service accounts
                  </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"
                      name="MANAGE_WEBHOOKS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Manage webhooks
                  </span>
                </label>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                If you want to disable this account uncheck the box below
              </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="isActive"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Service account is active
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Services / Service details form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Magento Importer
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Service Account Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Account Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Magento Importer"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Invalid value
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Service Account Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create Token
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ServiceTokens-colNote-id"
                      scope="col"
                    >
                      Token Note
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ServiceTokens-colKey-id"
                      scope="col"
                    >
                      Key
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ServiceTokens-colActions-id"
                      scope="col"
                    >
                      Actions
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ServiceTokens-colNote-id"
                    >
                      default
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ServiceTokens-colKey-id"
                    >
                      **** AK05
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ServiceTokens-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Permissions
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Expand or restrict user's permissions to access certain part of saleor system.
              </div>
              <div
                class="AccountPermissions-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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    User has full access to the store
                  </span>
                </label>
              </div>
            </div>
            <hr
              class="AccountPermissions-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="MANAGE_DISCOUNTS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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"
                      name="MANAGE_MENUS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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"
                      name="MANAGE_ORDERS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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"
                      name="MANAGE_PAGES"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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 MuiFormControlLabel-label-id MuiTypography-body1-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"
                      name="MANAGE_SETTINGS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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"
                      name="MANAGE_SHIPPING"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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"
                      name="MANAGE_STAFF"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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"
                      name="MANAGE_USERS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Manage 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"
                      name="MANAGE_PLUGINS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Manage plugins
                  </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"
                      name="MANAGE_SERVICE_ACCOUNTS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Manage service accounts
                  </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"
                      name="MANAGE_WEBHOOKS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Manage webhooks
                  </span>
                </label>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                If you want to disable this account uncheck the box below
              </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="isActive"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Service account is active
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Services / Service details loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <span
            class="Skeleton-skeleton-id"
            style="width:10em"
          >
            ‌
          </span>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Service Account Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Account Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Service Account Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create Token
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ServiceTokens-colNote-id"
                      scope="col"
                    >
                      Token Note
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ServiceTokens-colKey-id"
                      scope="col"
                    >
                      Key
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ServiceTokens-colActions-id"
                      scope="col"
                    >
                      Actions
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ServiceTokens-colNote-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                      >
                        ‌
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ServiceTokens-colKey-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                      >
                        ‌
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ServiceTokens-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Permissions
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Expand or restrict user's permissions to access certain part of saleor system.
              </div>
              <div
                class="AccountPermissions-checkboxContainer-id"
              >
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    User has full access to the store
                  </span>
                </label>
              </div>
            </div>
            <hr
              class="AccountPermissions-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Manage sales and vouchers
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Manage navigation
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Manage orders
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Manage pages
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Manage products
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Manage settings
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Manage shipping
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Manage staff
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Manage customers
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      name="MANAGE_PLUGINS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Manage plugins
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      name="MANAGE_SERVICE_ACCOUNTS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Manage service accounts
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      name="MANAGE_WEBHOOKS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Manage webhooks
                  </span>
                </label>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                If you want to disable this account uncheck the box below
              </div>
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Service account is active
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Services / Service list default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Service Accounts
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create account
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Service Accounts
              </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 FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Service Accounts"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id ServiceList-table-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ServiceList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id"
                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="2"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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 ServiceList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ServiceList-colName-id"
              >
                <span
                  data-tc="name"
                >
                  Slack
                </span>
                <div
                  class="MuiTypography-root-id MuiTypography-caption-id"
                  data-tc="isActive"
                >
                  active
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ServiceList-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                      />
                    </svg>
                  </span>
                </button>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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"
                      />
                    </svg>
                  </span>
                </button>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id ServiceList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ServiceList-colName-id"
              >
                <span
                  data-tc="name"
                >
                  Facebook Market
                </span>
                <div
                  class="MuiTypography-root-id MuiTypography-caption-id"
                  data-tc="isActive"
                >
                  active
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ServiceList-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                      />
                    </svg>
                  </span>
                </button>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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"
                      />
                    </svg>
                  </span>
                </button>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id ServiceList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ServiceList-colName-id"
              >
                <span
                  data-tc="name"
                >
                  Magento Importer
                </span>
                <div
                  class="MuiTypography-root-id MuiTypography-caption-id"
                  data-tc="isActive"
                >
                  inactive
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ServiceList-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                      />
                    </svg>
                  </span>
                </button>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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"
                      />
                    </svg>
                  </span>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Services / Service list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Service Accounts
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create account
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Service Accounts
              </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 FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Service Accounts"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id ServiceList-table-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ServiceList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id"
                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="2"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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 TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-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 ServiceList-colName-id"
              >
                <span
                  data-tc="name"
                >
                  <span
                    class="Skeleton-skeleton-id"
                  >
                    ‌
                  </span>
                </span>
                <div
                  class="MuiTypography-root-id MuiTypography-caption-id"
                  data-tc="isActive"
                />
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ServiceList-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                      />
                    </svg>
                  </span>
                </button>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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"
                      />
                    </svg>
                  </span>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Services / Service list no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Service Accounts
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create account
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Service Accounts
              </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 FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Service Accounts"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id ServiceList-table-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ServiceList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id"
                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="2"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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="2"
              >
                No service accounts found
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

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

exports[`Storyshots Views / Shipping / Create shipping zone default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create New Shipping Zone
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Shipping Zone Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Countries
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign countries
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id CountryList-root-id"
            >
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id"
                >
                  <tbody
                    class="MuiTableBody-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id CountryList-pointer-id"
                    >
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id CountryList-wideColumn-id CountryList-toLeft-id"
                      >
                        0 Countries
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id CountryList-iconCell-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </svg>
                          </span>
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Shipping / Create shipping zone form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create New Shipping Zone
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                  data-shrink="false"
                >
                  Shipping Zone Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Invalid value
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Countries
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign countries
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id CountryList-root-id"
            >
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id"
                >
                  <tbody
                    class="MuiTableBody-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id CountryList-pointer-id"
                    >
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id CountryList-wideColumn-id CountryList-toLeft-id"
                      >
                        0 Countries
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id CountryList-iconCell-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </svg>
                          </span>
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Shipping / Create shipping zone loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create New Shipping Zone
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Shipping Zone Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Countries
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign countries
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id CountryList-root-id"
            >
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id"
                >
                  <tbody
                    class="MuiTableBody-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id CountryList-pointer-id"
                    >
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id CountryList-wideColumn-id CountryList-toLeft-id"
                      >
                        0 Countries
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id CountryList-iconCell-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </svg>
                          </span>
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Europe
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Shipping Zone Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Europe"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Countries
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign countries
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id CountryList-root-id"
            >
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id"
                >
                  <tbody
                    class="MuiTableBody-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id CountryList-pointer-id"
                    >
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id CountryList-wideColumn-id CountryList-toLeft-id"
                      >
                        51 Countries
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id CountryList-iconCell-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </svg>
                          </span>
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id CardTitle-constantHeight-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Price Based Rates
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create rate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                      scope="col"
                    >
                      Name
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-valueColumn-id"
                      scope="col"
                    >
                      Value Range
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      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 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
                    >
                      <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"
                            />
                          </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 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
                    >
                      <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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id CardTitle-constantHeight-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Weight Based Rates
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create rate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                      scope="col"
                    >
                      Name
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-valueColumn-id"
                      scope="col"
                    >
                      Weight Range
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      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 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
                    >
                      <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"
                            />
                          </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 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
                    >
                      <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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Europe
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Shipping Zone Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Europe"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Invalid value
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Countries
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign countries
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id CountryList-root-id"
            >
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id"
                >
                  <tbody
                    class="MuiTableBody-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id CountryList-pointer-id"
                    >
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id CountryList-wideColumn-id CountryList-toLeft-id"
                      >
                        51 Countries
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id CountryList-iconCell-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </svg>
                          </span>
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id CardTitle-constantHeight-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Price Based Rates
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create rate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                      scope="col"
                    >
                      Name
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-valueColumn-id"
                      scope="col"
                    >
                      Value Range
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      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 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
                    >
                      <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"
                            />
                          </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 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
                    >
                      <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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id CardTitle-constantHeight-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Weight Based Rates
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create rate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                      scope="col"
                    >
                      Name
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-valueColumn-id"
                      scope="col"
                    >
                      Weight Range
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      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 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
                    >
                      <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"
                            />
                          </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 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
                    >
                      <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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          ...
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Shipping Zone Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Countries
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign countries
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id CountryList-root-id"
            >
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id"
                >
                  <tbody
                    class="MuiTableBody-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id CountryList-pointer-id"
                    >
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id CountryList-wideColumn-id CountryList-toLeft-id"
                      >
                        ... Countries
                      </td>
                      <td
                        class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id CountryList-iconCell-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </svg>
                          </span>
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id CardTitle-constantHeight-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Price Based Rates
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create rate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                      scope="col"
                    >
                      Name
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-valueColumn-id"
                      scope="col"
                    >
                      Value Range
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      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 MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id CardTitle-constantHeight-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Weight Based Rates
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create rate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                      scope="col"
                    >
                      Name
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-valueColumn-id"
                      scope="col"
                    >
                      Weight Range
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
                      scope="col"
                    >
                      Price
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      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 MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            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"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Shipping / Shipping zones list default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Shipping
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id CardTitle-constantHeight-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Shipping By Zone
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Create shipping zone
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
                    scope="col"
                  >
                    <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 TablePagination-toolbar-id MuiToolbar-gutters-id"
                    >
                      <div
                        class="TablePagination-spacer-id"
                      >
                        <div>
                          <span
                            class="RowNumberSelect-label-id"
                          >
                            No of Rows:
                          </span>
                          <div
                            class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                          >
                            <div
                              aria-haspopup="listbox"
                              aria-labelledby=" "
                              class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                        class="TablePaginationActions-root-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                          data-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 ShippingZonesList-row-id MuiTableRow-hover-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"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <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"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <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"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <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"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <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"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div>
        <form>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Configuration
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id SingleSelectField-formControl-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Shipping Weight Unit
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <div
                    aria-haspopup="listbox"
                    aria-labelledby=" mui-component-select-unit"
                    class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputSelect-id MuiOutlinedInput-inputSelect-id"
                    id="mui-component-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 MuiSelect-iconOutlined-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:143px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                >
                  This unit will be used as default shipping weight
                </p>
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Save
                </span>
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Shipping / Shipping zones list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Shipping
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id CardTitle-constantHeight-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Shipping By Zone
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Create shipping zone
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
                    scope="col"
                  >
                    <button
                      class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 TablePagination-toolbar-id MuiToolbar-gutters-id"
                    >
                      <div
                        class="TablePagination-spacer-id"
                      >
                        <div>
                          <span
                            class="RowNumberSelect-label-id"
                          >
                            No of Rows:
                          </span>
                          <div
                            class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                          >
                            <div
                              aria-haspopup="listbox"
                              aria-labelledby=" "
                              class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                        class="TablePaginationActions-root-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                          data-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 TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-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 Checkbox-root-id MuiButtonBase-disabled-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 MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          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"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div>
        <form>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Configuration
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id SingleSelectField-formControl-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Shipping Weight Unit
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <div
                    aria-haspopup="listbox"
                    aria-labelledby=" mui-component-select-unit"
                    class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputSelect-id MuiOutlinedInput-inputSelect-id MuiSelect-disabled-id"
                    id="mui-component-select-unit"
                    role="button"
                  >
                    KG
                  </div>
                  <input
                    name="unit"
                    type="hidden"
                    value="KG"
                  />
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:143px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id MuiFormHelperText-filled-id"
                >
                  This unit will be used as default shipping weight
                </p>
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Save
                </span>
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Shipping / Shipping zones list no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Shipping
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id CardTitle-constantHeight-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Shipping By Zone
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Create shipping zone
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colName-id"
                    scope="col"
                  >
                    Name
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colCountries-id"
                    scope="col"
                  >
                    Countries
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id"
                    scope="col"
                  />
                </tr>
              </thead>
              <tfoot
                class="MuiTableFooter-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-footer-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                    colspan="4"
                  >
                    <div
                      class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                    >
                      <div
                        class="TablePagination-spacer-id"
                      >
                        <div>
                          <span
                            class="RowNumberSelect-label-id"
                          >
                            No of Rows:
                          </span>
                          <div
                            class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                          >
                            <div
                              aria-haspopup="listbox"
                              aria-labelledby=" "
                              class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                        class="TablePaginationActions-root-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                          data-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>
      <div>
        <form>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Configuration
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id SingleSelectField-formControl-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Shipping Weight Unit
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <div
                    aria-haspopup="listbox"
                    aria-labelledby=" mui-component-select-unit"
                    class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputSelect-id MuiOutlinedInput-inputSelect-id"
                    id="mui-component-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 MuiSelect-iconOutlined-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:143px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                >
                  This unit will be used as default shipping weight
                </p>
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Save
                </span>
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Shipping / Shipping zones list no site settings permissions 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Shipping
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id CardTitle-constantHeight-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Shipping By Zone
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Create shipping zone
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
                    scope="col"
                  >
                    <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 TablePagination-toolbar-id MuiToolbar-gutters-id"
                    >
                      <div
                        class="TablePagination-spacer-id"
                      >
                        <div>
                          <span
                            class="RowNumberSelect-label-id"
                          >
                            No of Rows:
                          </span>
                          <div
                            class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                          >
                            <div
                              aria-haspopup="listbox"
                              aria-labelledby=" "
                              class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                        class="TablePaginationActions-root-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                          data-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 ShippingZonesList-row-id MuiTableRow-hover-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"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <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"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <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"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <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"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <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"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div />
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Site settings / Page default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          General Informations
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Site Settings
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            These are general information about your store. They define what is the URL of your store and what is shown in browsers taskbar.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Name of your store
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="name"
                  type="text"
                  value="Saleor e-commerce"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
              >
                Name of your store is shown on tab in web browser
              </p>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                URL of your online store
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="domain"
                  type="text"
                  value="localhost:8000"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Store Description
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="description"
                  type="text"
                  value="Lorem ipsum dolor sit amet"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
              >
                Store description is shown on taskbar after your store name
              </p>
            </div>
          </div>
        </div>
        <hr
          class="Hr-root-id SiteSettingsPage-hr-id"
        />
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Mailing Configuration
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            This where you will find all of the settings determining your stores e-mails. You can determine main email address and some of the contents of your emails.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Mailing 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="MuiTypography-root-id SiteSettingsMailing-cardHelperText-id MuiTypography-body1-id"
            >
              Mailing Configuration
            </div>
            <div
              class="MuiTypography-root-id SiteSettingsMailing-cardHelperTextCaption-id MuiTypography-body2-id"
            >
              Configurate your email address from which all automatic emails will be sent to your customers.
            </div>
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Mailing email address
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="defaultMailSenderAddress"
                  type="text"
                  value="noreply@example.com"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Mailing email sender
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="defaultMailSenderName"
                  type="text"
                  value="Saleor"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
              >
                This will be visible as "from" name
              </p>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <hr
              class="Hr-root-id"
            />
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Customer password reset URL
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="customerSetPasswordUrl"
                  placeholder="URL address"
                  type="text"
                  value="https://example.com/reset-password"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
              >
                This URL will be used as a main URL for password resets. It will be sent via email.
              </p>
            </div>
          </div>
        </div>
        <hr
          class="Hr-root-id SiteSettingsPage-hr-id"
        />
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Company Information
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            This adress will be used to generate invoices and calculate shipping rates.Email adress you provide here will be used as a contact adress for your customers.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id SiteSettingsAddress-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Store Information
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Company
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="companyName"
                  type="text"
                  value="Saleor e-commerce"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Address line 1
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="streetAddress1"
                  type="text"
                  value="01419 Bernhard Plain"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                data-shrink="false"
              >
                Address line 2
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="streetAddress2"
                  type="text"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="Grid-root-id Grid-default-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  City
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="city"
                    type="text"
                    value="Kenstad"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  ZIP / Postal code
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="postalCode"
                    type="text"
                    value="89880-6342"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </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 MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Country
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Country area
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="countryArea"
                    type="text"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Phone
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="phone"
                  type="text"
                  value="+41 876-373-9137"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
        </div>
        <hr
          class="Hr-root-id SiteSettingsPage-hr-id"
        />
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Authentication Methods
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            Authentication method defines additional ways that customers can log in to your ecommerce.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Authentication Keys
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add key
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id"
                    scope="col"
                  >
                    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"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Site settings / Page form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          General Informations
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Site Settings
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            These are general information about your store. They define what is the URL of your store and what is shown in browsers taskbar.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Name of your store
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="true"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="name"
                  type="text"
                  value="Saleor e-commerce"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
              >
                Invalid value
              </p>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                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"
              >
                <input
                  aria-invalid="true"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="domain"
                  type="text"
                  value="localhost:8000"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
              >
                Invalid value
              </p>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Store Description
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="true"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="description"
                  type="text"
                  value="Lorem ipsum dolor sit amet"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
              >
                Invalid value
              </p>
            </div>
          </div>
        </div>
        <hr
          class="Hr-root-id SiteSettingsPage-hr-id"
        />
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Mailing Configuration
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            This where you will find all of the settings determining your stores e-mails. You can determine main email address and some of the contents of your emails.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Mailing 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="MuiTypography-root-id SiteSettingsMailing-cardHelperText-id MuiTypography-body1-id"
            >
              Mailing Configuration
            </div>
            <div
              class="MuiTypography-root-id SiteSettingsMailing-cardHelperTextCaption-id MuiTypography-body2-id"
            >
              Configurate your email address from which all automatic emails will be sent to your customers.
            </div>
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Mailing email address
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="true"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="defaultMailSenderAddress"
                  type="text"
                  value="noreply@example.com"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
              >
                Invalid value
              </p>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Mailing email sender
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="true"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="defaultMailSenderName"
                  type="text"
                  value="Saleor"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
              >
                Invalid value
              </p>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <hr
              class="Hr-root-id"
            />
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Customer password reset URL
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="true"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="customerSetPasswordUrl"
                  placeholder="URL address"
                  type="text"
                  value="https://example.com/reset-password"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
              >
                Invalid value
              </p>
            </div>
          </div>
        </div>
        <hr
          class="Hr-root-id SiteSettingsPage-hr-id"
        />
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Company Information
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            This adress will be used to generate invoices and calculate shipping rates.Email adress you provide here will be used as a contact adress for your customers.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id SiteSettingsAddress-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Store Information
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Company
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="companyName"
                  type="text"
                  value="Saleor e-commerce"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Address line 1
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="streetAddress1"
                  type="text"
                  value="01419 Bernhard Plain"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                data-shrink="false"
              >
                Address line 2
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="streetAddress2"
                  type="text"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="Grid-root-id Grid-default-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  City
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="city"
                    type="text"
                    value="Kenstad"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  ZIP / Postal code
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="postalCode"
                    type="text"
                    value="89880-6342"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </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 MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Country
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Country area
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="countryArea"
                    type="text"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Phone
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="phone"
                  type="text"
                  value="+41 876-373-9137"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
        </div>
        <hr
          class="Hr-root-id SiteSettingsPage-hr-id"
        />
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Authentication Methods
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            Authentication method defines additional ways that customers can log in to your ecommerce.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Authentication Keys
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add key
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id"
                    scope="col"
                  >
                    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"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Site settings / Page loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          General Informations
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Site Settings
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            These are general information about your store. They define what is the URL of your store and what is shown in browsers taskbar.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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 MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                data-shrink="false"
              >
                Name of your store
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                  disabled=""
                  name="name"
                  type="text"
                  value=""
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
              >
                Name of your store is shown on tab in web browser
              </p>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                data-shrink="false"
              >
                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"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                  disabled=""
                  name="domain"
                  type="text"
                  value=""
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                data-shrink="false"
              >
                Store Description
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                  disabled=""
                  name="description"
                  type="text"
                  value=""
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
              >
                Store description is shown on taskbar after your store name
              </p>
            </div>
          </div>
        </div>
        <hr
          class="Hr-root-id SiteSettingsPage-hr-id"
        />
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Mailing Configuration
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            This where you will find all of the settings determining your stores e-mails. You can determine main email address and some of the contents of your emails.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Mailing 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="MuiTypography-root-id SiteSettingsMailing-cardHelperText-id MuiTypography-body1-id"
            >
              Mailing Configuration
            </div>
            <div
              class="MuiTypography-root-id SiteSettingsMailing-cardHelperTextCaption-id MuiTypography-body2-id"
            >
              Configurate your email address from which all automatic emails will be sent to your customers.
            </div>
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                data-shrink="false"
              >
                Mailing email address
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                  disabled=""
                  name="defaultMailSenderAddress"
                  type="text"
                  value=""
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                data-shrink="false"
              >
                Mailing email sender
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                  disabled=""
                  name="defaultMailSenderName"
                  type="text"
                  value=""
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
              >
                This will be visible as "from" name
              </p>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <hr
              class="Hr-root-id"
            />
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                data-shrink="false"
              >
                Customer password reset URL
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                  disabled=""
                  name="customerSetPasswordUrl"
                  placeholder="URL address"
                  type="text"
                  value=""
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
              >
                This URL will be used as a main URL for password resets. It will be sent via email.
              </p>
            </div>
          </div>
        </div>
        <hr
          class="Hr-root-id SiteSettingsPage-hr-id"
        />
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Company Information
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            This adress will be used to generate invoices and calculate shipping rates.Email adress you provide here will be used as a contact adress for your customers.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id SiteSettingsAddress-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Store Information
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                data-shrink="false"
              >
                Company
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                  disabled=""
                  name="companyName"
                  type="text"
                  value=""
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                data-shrink="false"
              >
                Address line 1
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                  disabled=""
                  name="streetAddress1"
                  type="text"
                  value=""
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                data-shrink="false"
              >
                Address line 2
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                  disabled=""
                  name="streetAddress2"
                  type="text"
                  value=""
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="Grid-root-id Grid-default-id"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  City
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="city"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  ZIP / Postal code
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="postalCode"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </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 MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Country
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Country area
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="countryArea"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                data-shrink="false"
              >
                Phone
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                  disabled=""
                  name="phone"
                  type="text"
                  value=""
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="PrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
        </div>
        <hr
          class="Hr-root-id SiteSettingsPage-hr-id"
        />
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Authentication Methods
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            Authentication method defines additional ways that customers can log in to your ecommerce.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Authentication Keys
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                disabled=""
                tabindex="-1"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add key
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id"
                    scope="col"
                  >
                    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"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Staff / Staff member details default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Jacob Smith
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Staff Member Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="StaffProperties-root-id"
              >
                <div>
                  <div
                    class="StaffProperties-avatar-id"
                  >
                    <img
                      class="StaffProperties-avatarImage-id"
                      src="avatar1.png"
                    />
                  </div>
                </div>
                <div>
                  <div
                    class="StaffProperties-propGrid-id"
                  >
                    <div
                      class="StaffProperties-prop-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                          data-shrink="true"
                        >
                          First Name
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="firstName"
                            type="text"
                            value="Jacob"
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="PrivateNotchedOutline-legend-id"
                              style="width:0"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </div>
                    <div
                      class="StaffProperties-prop-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                          data-shrink="true"
                        >
                          Last Name
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="lastName"
                            type="text"
                            value="Smith"
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="PrivateNotchedOutline-legend-id"
                              style="width:0"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </div>
                    <div
                      class="StaffProperties-prop-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                          data-shrink="true"
                        >
                          E-mail Address
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="email"
                            type="text"
                            value="admin@example.com"
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="PrivateNotchedOutline-legend-id"
                              style="width:0"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Permissions
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Expand or restrict user's permissions to access certain part of saleor system.
              </div>
              <div
                class="AccountPermissions-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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    User has full access to the store
                  </span>
                </label>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                If you want to disable this account uncheck the box below
              </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="isActive"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  User is active
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Staff / Staff member details himself 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Jacob Smith
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Staff Member Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="StaffProperties-root-id"
              >
                <div>
                  <div
                    class="StaffProperties-avatar-id"
                  >
                    <img
                      class="StaffProperties-avatarImage-id"
                      src="avatar1.png"
                    />
                    <div
                      class="StaffProperties-avatarHover-id"
                    >
                      <span
                        class="isvg pending"
                      />
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Change photo
                      </div>
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Delete photo
                      </div>
                      <input
                        class="StaffProperties-fileField-id"
                        id="fileUpload"
                        type="file"
                      />
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="StaffProperties-propGrid-id"
                  >
                    <div
                      class="StaffProperties-prop-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                          data-shrink="true"
                        >
                          First Name
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="firstName"
                            type="text"
                            value="Jacob"
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="PrivateNotchedOutline-legend-id"
                              style="width:0"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </div>
                    <div
                      class="StaffProperties-prop-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                          data-shrink="true"
                        >
                          Last Name
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="lastName"
                            type="text"
                            value="Smith"
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="PrivateNotchedOutline-legend-id"
                              style="width:0"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </div>
                    <div
                      class="StaffProperties-prop-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                          data-shrink="true"
                        >
                          E-mail Address
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="email"
                            type="text"
                            value="admin@example.com"
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="PrivateNotchedOutline-legend-id"
                              style="width:0"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Password
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Change your password
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                You should change your password every month to avoid security issues.
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Preferences
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="SingleAutocompleteSelectField-container-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Preferred Language
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="English"
                    />
                    <div>
                      <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                  >
                    Selecting this will change the language of your dashboard
                  </p>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Please note, while all currency and date adjustments are complete, language translations are at varying degrees of completion.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <span
            class="Skeleton-skeleton-id"
            style="width:10em"
          >
            ‌
          </span>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Staff Member Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="StaffProperties-root-id"
              >
                <div>
                  <div
                    class="StaffProperties-avatar-id"
                  >
                    <div
                      class="StaffProperties-avatarDefault-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      />
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="StaffProperties-propGrid-id"
                  >
                    <div
                      class="StaffProperties-prop-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          First Name
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="firstName"
                            type="text"
                            value=""
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="PrivateNotchedOutline-legend-id"
                              style="width:0.01px"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </div>
                    <div
                      class="StaffProperties-prop-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          Last Name
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="lastName"
                            type="text"
                            value=""
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="PrivateNotchedOutline-legend-id"
                              style="width:0.01px"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </div>
                    <div
                      class="StaffProperties-prop-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                          data-shrink="false"
                        >
                          E-mail Address
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="email"
                            type="text"
                            value=""
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="PrivateNotchedOutline-legend-id"
                              style="width:0.01px"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Permissions
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Expand or restrict user's permissions to access certain part of saleor system.
              </div>
              <div
                class="AccountPermissions-checkboxContainer-id"
              >
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    User has full access to the store
                  </span>
                </label>
              </div>
            </div>
            <hr
              class="AccountPermissions-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Manage sales and vouchers
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Manage navigation
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Manage orders
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Manage pages
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Manage products
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Manage settings
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Manage shipping
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Manage staff
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Manage customers
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      name="MANAGE_PLUGINS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Manage plugins
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      name="MANAGE_SERVICE_ACCOUNTS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Manage service accounts
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      name="MANAGE_WEBHOOKS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Manage webhooks
                  </span>
                </label>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                If you want to disable this account uncheck the box below
              </div>
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  User is active
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Jacob Smith
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Staff Member Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="StaffProperties-root-id"
              >
                <div>
                  <div
                    class="StaffProperties-avatar-id"
                  >
                    <img
                      class="StaffProperties-avatarImage-id"
                      src="avatar1.png"
                    />
                  </div>
                </div>
                <div>
                  <div
                    class="StaffProperties-propGrid-id"
                  >
                    <div
                      class="StaffProperties-prop-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                          data-shrink="true"
                        >
                          First Name
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="firstName"
                            type="text"
                            value="Jacob"
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="PrivateNotchedOutline-legend-id"
                              style="width:0"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </div>
                    <div
                      class="StaffProperties-prop-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                          data-shrink="true"
                        >
                          Last Name
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="lastName"
                            type="text"
                            value="Smith"
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="PrivateNotchedOutline-legend-id"
                              style="width:0"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </div>
                    <div
                      class="StaffProperties-prop-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                          data-shrink="true"
                        >
                          E-mail Address
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="email"
                            type="text"
                            value="admin@example.com"
                          />
                          <fieldset
                            aria-hidden="true"
                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="PrivateNotchedOutline-legend-id"
                              style="width:0"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Permissions
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Expand or restrict user's permissions to access certain part of saleor system.
              </div>
              <div
                class="AccountPermissions-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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    User has full access to the store
                  </span>
                </label>
              </div>
            </div>
            <hr
              class="AccountPermissions-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="MANAGE_DISCOUNTS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-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 MuiFormControlLabel-label-id MuiTypography-body1-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 MuiFormControlLabel-label-id MuiTypography-body1-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 MuiFormControlLabel-label-id MuiTypography-body1-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 MuiFormControlLabel-label-id MuiTypography-body1-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 MuiFormControlLabel-label-id MuiTypography-body1-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 MuiFormControlLabel-label-id MuiTypography-body1-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 MuiFormControlLabel-label-id MuiTypography-body1-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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Manage 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_PLUGINS"
                      type="checkbox"
                      value="true"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Manage plugins
                  </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_SERVICE_ACCOUNTS"
                      type="checkbox"
                      value="true"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Manage service accounts
                  </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_WEBHOOKS"
                      type="checkbox"
                      value="true"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Manage webhooks
                  </span>
                </label>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                If you want to disable this account uncheck the box below
              </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="isActive"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  User is active
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Staff / Staff members default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Staff Members
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Invite staff member
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Staff Members
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Staff Member"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id StaffList-wideColumn-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Email Address
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="3"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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 StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Chris Cooper
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Active
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Inactive
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Active
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Active
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Active
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Active
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Inactive
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Active
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Active
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Inactive
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Inactive
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <div
                  class="StaffList-avatar-id"
                >
                  <img
                    class="StaffList-avatarImage-id"
                    src="avatar1.png"
                  />
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Jacob Smith
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  Active
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                admin@example.com
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Staff / Staff members when loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Staff Members
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Invite staff member
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Staff Members
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Staff Member"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id StaffList-wideColumn-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Email Address
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="3"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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 TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-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"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    />
                  </div>
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                  >
                    ‌
                  </span>
                </div>
                <div
                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                  >
                    ‌
                  </span>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Taxes / Country List default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Taxes
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Configuration
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id TaxConfiguration-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    name="includeTax"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  All products prices are entered with tax included
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-checked-id"
                    name="showGross"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Show gross prices to customers in the storefront
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    name="chargeTaxesOnShipping"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Charge taxes on shipping rates
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Fetch taxes
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Country Code
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Country Name
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CountryList-textRight-id"
                      scope="col"
                    >
                      Reduced Tax Rates
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      AT
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Austria
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      8
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      BE
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Belgia
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      10
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      BG
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Bułgaria
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      1
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      CY
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Cypr
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      11
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      CZ
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Czechy
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      11
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      DE
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Niemcy
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      8
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      DK
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Dania
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      0
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      EE
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Estonia
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      4
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      ES
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Hiszpania
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      8
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      FI
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Finlandia
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      10
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      FR
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Francja
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      13
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      GB
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Wielka Brytania
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      8
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      GR
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Grecja
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      9
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      HR
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Chorwacja
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      2
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      HU
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Węgry
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      5
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      IE
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Irlandia
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      10
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      IT
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Włochy
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      10
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      LT
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Litwa
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      3
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      LU
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Luksemburg
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      17
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      LV
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Łotwa
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      5
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      MT
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Malta
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      8
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      NL
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Holandia
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      9
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      PL
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Polska
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      10
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      PT
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Portugalia
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      8
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      RO
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Rumunia
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      9
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      SE
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Szwecja
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      2
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      SI
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Słowenia
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      9
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id CountryList-tableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      SK
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      Słowacja
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                    >
                      6
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Taxes / Country List loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Taxes
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Configuration
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id TaxConfiguration-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-disabled-id"
                    disabled=""
                    name="includeTax"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  All products prices are entered with tax included
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-disabled-id"
                    disabled=""
                    name="showGross"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Show gross prices to customers in the storefront
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-disabled-id"
                    disabled=""
                    name="chargeTaxesOnShipping"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Charge taxes on shipping rates
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                disabled=""
                tabindex="-1"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Fetch taxes
                </span>
              </button>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Country Code
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    >
                      Country Name
                    </th>
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id CountryList-textRight-id"
                      scope="col"
                    >
                      Reduced Tax Rates
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                      >
                        ‌
                      </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>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Taxes / Reduced Tax Categories default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Tax Rates in Austria
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
        >
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id CountryTaxesPage-wideColumn-id"
                    scope="col"
                  >
                    Category
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id"
                    scope="col"
                  >
                    Tax Rate
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    Admission to cultural events
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    10
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    Admission to entertainment events
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    10
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    Books
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    10
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    Foodstuffs
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    10
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    Hotels
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    10
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    Newspapers
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    10
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    Passenger transport
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    10
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    Pharmaceuticals
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    10
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

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

exports[`Storyshots Views / Translations / Entity list default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Translations to English
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Categories
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Collections
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                Products
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Sales
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Vouchers
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Pages
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
              >
                Product Types
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterActions-root-id"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Product"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TranslationsEntitiesList-wideColumn-id"
                scope="col"
              >
                Name
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TranslationsEntitiesList-textRight-id"
                scope="col"
              >
                Completed Translations
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="2"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  />
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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 TranslationsEntitiesList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                White Hoodie
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TranslationsEntitiesList-textRight-id"
              >
                1 of 3
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id TranslationsEntitiesList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
              >
                Brown Supreme Hoodie
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TranslationsEntitiesList-textRight-id"
              >
                2 of 3
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

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

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

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

exports[`Storyshots Views / Webhooks / Create webhook default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create Webhook
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Webhook Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
              >
                General Informations
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Webhook Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
              >
                Webhook specific information
              </div>
              <div
                class="SingleAutocompleteSelectField-container-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Assign to Service Account
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div>
                      <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Target URL
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="targetUrl"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                >
                  This URL will receive webhook POST requests
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Secrect Key
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="secretKey"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                >
                  secret key is used to create a hash signature with each payload. *optional field
                </p>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Events
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Expand or restrict webhooks permissions to register certain events in Saleor system.
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    name="allEvents"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  All events
                </span>
              </label>
              <hr
                class="Hr-root-id"
              />
              <div>
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id"
                    tabindex="0"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id"
                      name="CHECKOUT_QUANTITY_CHANGED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Changed quantity in checkout
                  </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"
                      name="CUSTOMER_CREATED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Customer created
                  </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"
                      name="FULFILLMENT_CREATED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Fulfillment created
                  </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"
                      name="ORDER_CANCELLED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order cancelled
                  </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"
                      name="ORDER_CREATED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order created
                  </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"
                      name="ORDER_FULFILLED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order fulfilled
                  </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"
                      name="ORDER_FULLY_PAID"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order fully paid
                  </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"
                      name="ORDER_UPDATED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order updated
                  </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"
                      name="PRODUCT_CREATED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product created
                  </span>
                </label>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Webhook Status
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                If you want to disable this webhook please uncheck the box below.
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    name="isActive"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Webhook is active
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Webhooks / Create webhook form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create Webhook
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Webhook Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
              >
                General Informations
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                  data-shrink="false"
                >
                  Webhook Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Invalid value
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
              >
                Webhook specific information
              </div>
              <div
                class="SingleAutocompleteSelectField-container-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                    data-shrink="false"
                  >
                    Assign to Service Account
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="true"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div>
                      <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Invalid value
                  </p>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                  data-shrink="false"
                >
                  Target URL
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="targetUrl"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Invalid value
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
                  data-shrink="false"
                >
                  Secrect Key
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="secretKey"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Invalid value
                </p>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Events
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Expand or restrict webhooks permissions to register certain events in Saleor system.
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    name="allEvents"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  All events
                </span>
              </label>
              <hr
                class="Hr-root-id"
              />
              <div>
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id"
                    tabindex="0"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id"
                      name="CHECKOUT_QUANTITY_CHANGED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Changed quantity in checkout
                  </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"
                      name="CUSTOMER_CREATED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Customer created
                  </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"
                      name="FULFILLMENT_CREATED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Fulfillment created
                  </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"
                      name="ORDER_CANCELLED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order cancelled
                  </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"
                      name="ORDER_CREATED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order created
                  </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"
                      name="ORDER_FULFILLED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order fulfilled
                  </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"
                      name="ORDER_FULLY_PAID"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order fully paid
                  </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"
                      name="ORDER_UPDATED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order updated
                  </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"
                      name="PRODUCT_CREATED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product created
                  </span>
                </label>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Webhook Status
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                If you want to disable this webhook please uncheck the box below.
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    name="isActive"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Webhook is active
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Webhooks / Create webhook loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create Webhook
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Webhook Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
              >
                General Informations
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Webhook Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
              >
                Webhook specific information
              </div>
              <div
                class="SingleAutocompleteSelectField-container-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Assign to Service Account
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      disabled=""
                      type="text"
                      value=""
                    />
                    <div>
                      <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Target URL
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="targetUrl"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
                >
                  This URL will receive webhook POST requests
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Secrect Key
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="secretKey"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
                >
                  secret key is used to create a hash signature with each payload. *optional field
                </p>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Events
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Expand or restrict webhooks permissions to register certain events in Saleor system.
              </div>
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-disabled-id"
                    disabled=""
                    name="allEvents"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  All events
                </span>
              </label>
              <hr
                class="Hr-root-id"
              />
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      name="CHECKOUT_QUANTITY_CHANGED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Changed quantity in checkout
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      name="CUSTOMER_CREATED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Customer created
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      name="FULFILLMENT_CREATED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Fulfillment created
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      name="ORDER_CANCELLED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Order cancelled
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      name="ORDER_CREATED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Order created
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      name="ORDER_FULFILLED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Order fulfilled
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      name="ORDER_FULLY_PAID"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Order fully paid
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      name="ORDER_UPDATED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Order updated
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      name="PRODUCT_CREATED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Product created
                  </span>
                </label>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Webhook Status
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                If you want to disable this webhook please uncheck the box below.
              </div>
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Webhook is active
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

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

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

exports[`Storyshots Views / Webhooks / Webhook details default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Webhook Test 2 Details
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Webhook Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
              >
                General Informations
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Webhook Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Webhook Test 2"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
              >
                Webhook specific information
              </div>
              <div
                class="SingleAutocompleteSelectField-container-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Assign to Service Account
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="Test Account 2"
                    />
                    <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Target URL
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="targetUrl"
                    type="text"
                    value="http://www.getsaleor.com"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                >
                  This URL will receive webhook POST requests
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Secrect Key
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="secretKey"
                    type="text"
                    value="zxczx_asdas"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                >
                  secret key is used to create a hash signature with each payload. *optional field
                </p>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Events
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Expand or restrict webhooks permissions to register certain events in Saleor system.
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    name="allEvents"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  All events
                </span>
              </label>
              <hr
                class="Hr-root-id"
              />
              <div>
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id"
                    tabindex="0"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id"
                      name="CHECKOUT_QUANTITY_CHANGED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Changed quantity in checkout
                  </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"
                      name="CUSTOMER_CREATED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Customer created
                  </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"
                      name="FULFILLMENT_CREATED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Fulfillment created
                  </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"
                      name="ORDER_CANCELLED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order cancelled
                  </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"
                      name="ORDER_CREATED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order created
                  </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"
                      name="ORDER_FULFILLED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order fulfilled
                  </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"
                      name="ORDER_FULLY_PAID"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order fully paid
                  </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"
                      name="ORDER_UPDATED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order updated
                  </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"
                      name="PRODUCT_CREATED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product created
                  </span>
                </label>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Webhook Status
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                If you want to disable this webhook please uncheck the box below.
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Webhook is active
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Webhooks / Webhook details form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Webhook Test 2 Details
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Webhook Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
              >
                General Informations
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Webhook Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Webhook Test 2"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Invalid value
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
              >
                Webhook specific information
              </div>
              <div
                class="SingleAutocompleteSelectField-container-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Assign to Service Account
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="true"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="Test Account 2"
                    />
                    <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                  >
                    Invalid value
                  </p>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Target URL
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="targetUrl"
                    type="text"
                    value="http://www.getsaleor.com"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Invalid value
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Secrect Key
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="secretKey"
                    type="text"
                    value="zxczx_asdas"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Invalid value
                </p>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Events
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Expand or restrict webhooks permissions to register certain events in Saleor system.
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    name="allEvents"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  All events
                </span>
              </label>
              <hr
                class="Hr-root-id"
              />
              <div>
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id"
                    tabindex="0"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id"
                      name="CHECKOUT_QUANTITY_CHANGED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Changed quantity in checkout
                  </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"
                      name="CUSTOMER_CREATED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Customer created
                  </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"
                      name="FULFILLMENT_CREATED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Fulfillment created
                  </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"
                      name="ORDER_CANCELLED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order cancelled
                  </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"
                      name="ORDER_CREATED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order created
                  </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"
                      name="ORDER_FULFILLED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order fulfilled
                  </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"
                      name="ORDER_FULLY_PAID"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order fully paid
                  </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"
                      name="ORDER_UPDATED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order updated
                  </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"
                      name="PRODUCT_CREATED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product created
                  </span>
                </label>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Webhook Status
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                If you want to disable this webhook please uncheck the box below.
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Webhook is active
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Webhooks / Webhook details loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          ... Details
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Webhook Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
              >
                General Informations
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Webhook Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
              >
                Webhook specific information
              </div>
              <div
                class="SingleAutocompleteSelectField-container-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                    data-shrink="false"
                  >
                    Assign to Service Account
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      disabled=""
                      type="text"
                      value=""
                    />
                    <div>
                      <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Target URL
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="targetUrl"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
                >
                  This URL will receive webhook POST requests
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                  data-shrink="false"
                >
                  Secrect Key
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="secretKey"
                    type="text"
                    value=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
                >
                  secret key is used to create a hash signature with each payload. *optional field
                </p>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Events
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Expand or restrict webhooks permissions to register certain events in Saleor system.
              </div>
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-disabled-id"
                    disabled=""
                    name="allEvents"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  All events
                </span>
              </label>
              <hr
                class="Hr-root-id"
              />
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      name="CHECKOUT_QUANTITY_CHANGED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Changed quantity in checkout
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      name="CUSTOMER_CREATED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Customer created
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      name="FULFILLMENT_CREATED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Fulfillment created
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      name="ORDER_CANCELLED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Order cancelled
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      name="ORDER_CREATED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Order created
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      name="ORDER_FULFILLED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Order fulfilled
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      name="ORDER_FULLY_PAID"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Order fully paid
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      name="ORDER_UPDATED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Order updated
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      name="PRODUCT_CREATED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Product created
                  </span>
                </label>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Webhook Status
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                If you want to disable this webhook please uncheck the box below.
              </div>
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id MuiButtonBase-disabled-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 MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Webhook is active
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Webhooks / Webhook details unnamed 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      >
        <div
          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Unnamed Webhook Details
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Webhook Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
              >
                General Informations
              </div>
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Webhook Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
              >
                Webhook specific information
              </div>
              <div
                class="SingleAutocompleteSelectField-container-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                    data-shrink="true"
                  >
                    Assign to Service Account
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="Test Account 2"
                    />
                    <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>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="PrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Target URL
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="targetUrl"
                    type="text"
                    value="http://www.getsaleor.com"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                >
                  This URL will receive webhook POST requests
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Secrect Key
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="secretKey"
                    type="text"
                    value="zxczx_asdas"
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="PrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                >
                  secret key is used to create a hash signature with each payload. *optional field
                </p>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Events
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Expand or restrict webhooks permissions to register certain events in Saleor system.
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    name="allEvents"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  All events
                </span>
              </label>
              <hr
                class="Hr-root-id"
              />
              <div>
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id"
                    tabindex="0"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id"
                      name="CHECKOUT_QUANTITY_CHANGED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Changed quantity in checkout
                  </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"
                      name="CUSTOMER_CREATED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Customer created
                  </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"
                      name="FULFILLMENT_CREATED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Fulfillment created
                  </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"
                      name="ORDER_CANCELLED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order cancelled
                  </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"
                      name="ORDER_CREATED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order created
                  </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"
                      name="ORDER_FULFILLED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order fulfilled
                  </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"
                      name="ORDER_FULLY_PAID"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order fully paid
                  </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"
                      name="ORDER_UPDATED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order updated
                  </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"
                      name="PRODUCT_CREATED"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product created
                  </span>
                </label>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Webhook Status
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                If you want to disable this webhook please uncheck the box below.
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <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 MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Webhook is active
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Webhooks / Webhook list default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Webhooks
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create webhook
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Webhooks
              </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 FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Webhooks"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id WebhooksList-table-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id WebhooksList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id WebhooksList-colActive-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Service Account
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id WebhooksList-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="3"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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 WebhooksList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WebhooksList-colName-id"
              >
                Webhook Test
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WebhooksList-colActive-id"
              >
                Test Account
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WebhooksList-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                      />
                    </svg>
                  </span>
                </button>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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"
                      />
                    </svg>
                  </span>
                </button>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id WebhooksList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WebhooksList-colName-id"
              >
                Webhook Test 2
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WebhooksList-colActive-id"
              >
                Test Account 2
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WebhooksList-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                      />
                    </svg>
                  </span>
                </button>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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"
                      />
                    </svg>
                  </span>
                </button>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id WebhooksList-tableRow-id MuiTableRow-hover-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WebhooksList-colName-id WebhooksList-colNameUnnamed-id"
              >
                Unnamed webhook
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WebhooksList-colActive-id"
              >
                Test Account 2
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WebhooksList-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                      />
                    </svg>
                  </span>
                </button>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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"
                      />
                    </svg>
                  </span>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Webhooks / Webhook list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Webhooks
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create webhook
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Webhooks
              </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 FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Webhooks"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id WebhooksList-table-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id WebhooksList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id WebhooksList-colActive-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Service Account
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id WebhooksList-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="3"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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 TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-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 WebhooksList-colName-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WebhooksList-colActive-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WebhooksList-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                      />
                    </svg>
                  </span>
                </button>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      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"
                      />
                    </svg>
                  </span>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Webhooks / Webhook list no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Webhooks
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create webhook
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-scroller-id MuiTabs-fixed-id"
          style="overflow:hidden"
        >
          <div
            class="MuiTabs-flexContainer-id"
            role="tablist"
          >
            <button
              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
              role="tab"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
              >
                All Webhooks
              </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 FilterTab-tabLabel-id"
              >
                Tab X
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="FilterBar-root-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <div
              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
            >
              Filters
            </div>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
              placeholder="Search Webhooks"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="PrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
      </div>
      <div
        class="ResponsiveTable-root-id"
      >
        <table
          class="MuiTable-root-id WebhooksList-table-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id WebhooksList-colName-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Name
                  </div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <rect
                      fill="transparent"
                      height="24"
                      width="24"
                    />
                    <path
                      clip-rule="evenodd"
                      d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
                      fill="currentColor"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id WebhooksList-colActive-id"
                scope="col"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    Service Account
                  </div>
                </div>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id WebhooksList-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="3"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                      >
                        <div
                          aria-haspopup="listbox"
                          aria-labelledby=" "
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputSelect-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
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-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="3"
              >
                No webhooks found
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;