import React from 'react';
import { composeStories } from '@storybook/react-vite';

import { render as testRender } from '../../../../vitest/render';

import * as stories from './RadioField.stories';

const composedStories = composeStories(stories);

describe('RadioField Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set([
      'Default',
      'WithActions',
      'HiddenLabel',
      'WithHint',
      'WithWarning',
      'InvalidWithError',
      'Horizontal',
      'WithImageOptions',
      'WithVerticalImageOptions',
      'WithImageOptionsGrid',
      'WithImageOptionsError',
      'WithImageOptionsWarning',
    ]);

    const untestedStories = storyNames.filter(name => !testedStories.has(name));

    expect(untestedStories).toEqual([]);
  });

  it('renders Default story', () => {
    const Story = composedStories.Default;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <div
      class="v2FormField"
    >
      <span
        class="v2FormField__label v2FormField__label--required"
        id="_r_0_-label"
      >
        <span
          class="v2FormField__labelText"
        >
          Choose your plan
        </span>
      </span>
      <div
        class="v2FormField__input"
      >
        <div
          aria-labelledby="_r_0_-label"
          class="radioGroup radioGroup--flex"
          role="radiogroup"
        >
          <div
            class="v2FormField__radio"
            data-version="radio-option-react"
          >
            <div
              class="radioRow"
            >
              <input
                aria-invalid="false"
                aria-label="Free Plan"
                class="radioField"
                id="_r_1_"
                name="billingPlan"
                required=""
                type="radio"
                value="free"
              />
              <label
                for="_r_1_"
              >
                Free Plan
              </label>
            </div>
          </div>
          <div
            class="v2FormField__radio"
            data-version="radio-option-react"
          >
            <div
              class="radioRow"
            >
              <input
                aria-invalid="false"
                aria-label="Pro Plan"
                class="radioField"
                id="_r_2_"
                name="billingPlan"
                required=""
                type="radio"
                value="pro"
              />
              <label
                for="_r_2_"
              >
                Pro Plan
              </label>
              <button
                class="iconButton iconButton--sm iconButton--primary iconButton--ghost"
                role="button"
                tabindex="0"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-info"
                />
              </button>
            </div>
          </div>
          <div
            class="v2FormField__radio"
            data-version="radio-option-react"
          >
            <div
              class="radioRow"
            >
              <input
                aria-invalid="false"
                aria-label="Business Plan"
                class="radioField"
                disabled=""
                id="_r_3_"
                name="billingPlan"
                required=""
                type="radio"
                value="business"
              />
              <label
                for="_r_3_"
              >
                Business Plan
              </label>
              <button
                class="iconButton iconButton--sm iconButton--primary iconButton--ghost"
                role="button"
                tabindex="0"
                type="button"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-info"
                />
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders WithActions story', () => {
    const Story = composedStories.WithActions;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <div
      class="v2FormField"
    >
      <span
        class="v2FormField__label v2FormField__label--required"
        id="_r_0_-label"
      >
        <span
          class="v2FormField__labelText"
        >
          City
        </span>
      </span>
      <div
        class="v2FormField__input"
      >
        <div
          aria-labelledby="_r_0_-label"
          class="radioGroup radioGroup--flex"
          role="radiogroup"
        >
          <div
            class="v2FormField__radio"
            data-version="radio-option-react"
          >
            <div
              class="radioRow"
            >
              <input
                aria-invalid="false"
                aria-label="Today"
                class="radioField"
                id="_r_1_"
                name="city"
                required=""
                type="radio"
                value="today"
              />
              <label
                for="_r_1_"
              >
                Today
              </label>
            </div>
          </div>
          <div
            class="v2FormField__radio"
            data-version="radio-option-react"
          >
            <div
              class="radioRow"
            >
              <input
                aria-invalid="false"
                aria-label="Tomorrow"
                class="radioField"
                id="_r_2_"
                name="city"
                required=""
                type="radio"
                value="tomorrow"
              />
              <label
                for="_r_2_"
              >
                Tomorrow
              </label>
            </div>
          </div>
          <div
            class="v2FormField__radio"
            data-version="radio-option-react"
          >
            <div
              class="radioRow"
            >
              <input
                aria-invalid="false"
                aria-label="Select date"
                class="radioField"
                id="_r_3_"
                name="city"
                required=""
                type="radio"
                value="date"
              />
              <label
                for="_r_3_"
              >
                Select date
              </label>
              <div
                class="v2FormField"
              >
                <div
                  class="v2FormField__input"
                >
                  <div
                    class="dateField__container sm"
                    data-rac=""
                  >
                    <div
                      aria-describedby="_r_4_ _r_5_ _r_6_"
                      aria-label="Select date"
                      aria-labelledby="_r_7_ _r_8_"
                      class="dateField__containerInner"
                      data-rac=""
                      data-react-aria-pressable="true"
                      id="_r_7_"
                      role="group"
                    >
                      <div
                        class="dateField"
                        data-rac=""
                        data-react-aria-pressable="true"
                        id="react-aria-_r_9_"
                        role="presentation"
                        style="unicode-bidi: isolate;"
                      >
                        <span
                          aria-describedby="_r_4_ _r_5_ _r_6_"
                          aria-label="month, Select date, "
                          aria-labelledby="react-aria-_r_10_ _r_7_ _r_8_"
                          aria-valuemax="12"
                          aria-valuemin="1"
                          aria-valuetext="Empty"
                          autocorrect="off"
                          class="dateField__segment"
                          contenteditable="true"
                          data-placeholder="true"
                          data-rac=""
                          data-type="month"
                          enterkeyhint="next"
                          id="react-aria-_r_10_"
                          inputmode="numeric"
                          role="spinbutton"
                          spellcheck="false"
                          style="caret-color: transparent;"
                          tabindex="0"
                        >
                          mm
                        </span>
                        <span
                          aria-hidden="true"
                          class="dateField__segment"
                          data-rac=""
                          data-type="literal"
                        >
                          /
                        </span>
                        <span
                          aria-label="day, Select date, "
                          aria-labelledby="react-aria-_r_11_ _r_7_ _r_8_"
                          aria-valuemax="31"
                          aria-valuemin="1"
                          aria-valuetext="Empty"
                          autocorrect="off"
                          class="dateField__segment"
                          contenteditable="true"
                          data-placeholder="true"
                          data-rac=""
                          data-type="day"
                          enterkeyhint="next"
                          id="react-aria-_r_11_"
                          inputmode="numeric"
                          role="spinbutton"
                          spellcheck="false"
                          style="caret-color: transparent;"
                          tabindex="0"
                        >
                          dd
                        </span>
                        <span
                          aria-hidden="true"
                          class="dateField__segment"
                          data-rac=""
                          data-type="literal"
                        >
                          /
                        </span>
                        <span
                          aria-label="year, Select date, "
                          aria-labelledby="react-aria-_r_12_ _r_7_ _r_8_"
                          aria-valuemax="9999"
                          aria-valuemin="1"
                          aria-valuetext="Empty"
                          autocorrect="off"
                          class="dateField__segment"
                          contenteditable="true"
                          data-placeholder="true"
                          data-rac=""
                          data-type="year"
                          enterkeyhint="next"
                          id="react-aria-_r_12_"
                          inputmode="numeric"
                          role="spinbutton"
                          spellcheck="false"
                          style="caret-color: transparent;"
                          tabindex="0"
                        >
                          yyyy
                        </span>
                      </div>
                      <input
                        class=""
                        data-rac=""
                        hidden=""
                        title=""
                        type="text"
                        value=""
                      />
                      <button
                        aria-describedby="_r_4_ _r_5_ _r_6_"
                        aria-expanded="false"
                        aria-haspopup="dialog"
                        aria-label="Calendar"
                        aria-labelledby="react-aria-_r_13_ _r_7_ _r_8_"
                        class="iconButton iconButton--sm iconButton--primary iconButton--ghost"
                        data-react-aria-pressable="true"
                        id="react-aria-_r_13_"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          aria-hidden="true"
                          class="shoptet-icon icon icon--default icon--md shp-calendar"
                        />
                      </button>
                    </div>
                  </div>
                  <div
                    aria-hidden="true"
                    data-a11y-ignore="aria-hidden-focus"
                    data-react-aria-prevent-focus="true"
                    data-testid="hidden-dateinput-container"
                    style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; width: 1px; white-space: nowrap; top: 0px; left: 0px;"
                  >
                    <input
                      form=""
                      step="60"
                      tabindex="-1"
                      type="date"
                      value=""
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders HiddenLabel story', () => {
    const Story = composedStories.HiddenLabel;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <div
      class="v2FormField"
    >
      <span
        class="v2FormField__label v2FormField__label--required"
        id="_r_0_-label"
      >
        <span
          class="v2FormField__labelText"
        >
          City
        </span>
      </span>
      <div
        class="v2FormField__input"
      >
        <div
          aria-labelledby="_r_0_-label"
          class="radioGroup radioGroup--flex"
          role="radiogroup"
        >
          <div
            class="v2FormField__radio"
            data-version="radio-option-react"
          >
            <div
              class="radioRow"
            >
              <input
                aria-invalid="false"
                aria-label="Prague"
                class="radioField"
                id="_r_1_"
                name="city"
                required=""
                type="radio"
                value="prague"
              />
              <label
                for="_r_1_"
              >
                Prague
              </label>
            </div>
          </div>
          <div
            class="v2FormField__radio"
            data-version="radio-option-react"
          >
            <div
              class="radioRow"
            >
              <input
                aria-invalid="false"
                aria-label="Brno"
                class="radioField"
                id="_r_2_"
                name="city"
                required=""
                type="radio"
                value="brno"
              />
              <label
                for="_r_2_"
              >
                Brno
              </label>
            </div>
          </div>
          <div
            class="v2FormField__radio"
            data-version="radio-option-react"
          >
            <div
              class="radioRow"
            >
              <input
                aria-invalid="false"
                aria-label="Other"
                class="radioField"
                id="_r_3_"
                name="city"
                required=""
                type="radio"
                value="other"
              />
              <label
                for="_r_3_"
              >
                Other
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders WithHint story', () => {
    const Story = composedStories.WithHint;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <div
      class="v2FormField"
    >
      <span
        class="v2FormField__label v2FormField__label--required"
        id="_r_0_-label"
      >
        <span
          class="v2FormField__labelText"
        >
          Car
        </span>
      </span>
      <div
        class="v2FormField__input"
      >
        <div
          aria-describedby="_r_0_-desc"
          aria-labelledby="_r_0_-label"
          class="radioGroup radioGroup--flex"
          role="radiogroup"
        >
          <div
            class="v2FormField__radio"
            data-version="radio-option-react"
          >
            <div
              class="radioRow"
            >
              <input
                aria-invalid="false"
                aria-label="Sedan"
                class="radioField"
                id="_r_1_"
                name="car"
                required=""
                type="radio"
                value="sedan"
              />
              <label
                for="_r_1_"
              >
                Sedan
              </label>
            </div>
          </div>
          <div
            class="v2FormField__radio"
            data-version="radio-option-react"
          >
            <div
              class="radioRow"
            >
              <input
                aria-invalid="false"
                aria-label="SUV"
                class="radioField"
                id="_r_2_"
                name="car"
                required=""
                type="radio"
                value="suv"
              />
              <label
                for="_r_2_"
              >
                SUV
              </label>
            </div>
          </div>
          <div
            class="v2FormField__radio"
            data-version="radio-option-react"
          >
            <div
              class="radioRow"
            >
              <input
                aria-invalid="false"
                aria-label="Other"
                class="radioField"
                id="_r_3_"
                name="car"
                required=""
                type="radio"
                value="other"
              />
              <label
                for="_r_3_"
              >
                Other
              </label>
            </div>
          </div>
        </div>
        <span
          class="v2FormField__hint"
          id="_r_0_-desc"
        >
          Hint: Please select your favorite car
        </span>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders WithWarning story', () => {
    const Story = composedStories.WithWarning;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <div
      class="v2FormField"
    >
      <span
        class="v2FormField__label v2FormField__label--required"
        id="_r_0_-label"
      >
        <span
          class="v2FormField__labelText"
        >
          Animal
        </span>
      </span>
      <div
        class="v2FormField__input"
      >
        <div
          aria-describedby="_r_0_-desc"
          aria-labelledby="_r_0_-label"
          class="radioGroup radioGroup--flex"
          role="radiogroup"
        >
          <div
            class="v2FormField__radio"
            data-version="radio-option-react"
          >
            <div
              class="radioRow"
            >
              <input
                aria-invalid="false"
                aria-label="Dog"
                class="radioField warning-field"
                id="_r_1_"
                name="animal"
                required=""
                type="radio"
                value="dog"
              />
              <label
                for="_r_1_"
              >
                Dog
              </label>
            </div>
          </div>
          <div
            class="v2FormField__radio"
            data-version="radio-option-react"
          >
            <div
              class="radioRow"
            >
              <input
                aria-invalid="false"
                aria-label="Cat"
                class="radioField warning-field"
                id="_r_2_"
                name="animal"
                required=""
                type="radio"
                value="cat"
              />
              <label
                for="_r_2_"
              >
                Cat
              </label>
            </div>
          </div>
          <div
            class="v2FormField__radio"
            data-version="radio-option-react"
          >
            <div
              class="radioRow"
            >
              <input
                aria-invalid="false"
                aria-label="Other"
                class="radioField warning-field"
                id="_r_3_"
                name="animal"
                required=""
                type="radio"
                value="other"
              />
              <label
                for="_r_3_"
              >
                Other
              </label>
            </div>
          </div>
        </div>
        <span
          class="v2FormField__warning"
          id="_r_0_-desc"
        >
          Warning: Please check your selection
        </span>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders InvalidWithError story', () => {
    const Story = composedStories.InvalidWithError;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <div
      class="v2FormField"
    >
      <span
        class="v2FormField__label v2FormField__label--required"
        id="_r_0_-label"
      >
        <span
          class="v2FormField__labelText"
        >
          Gender
        </span>
      </span>
      <div
        class="v2FormField__input"
      >
        <div
          aria-describedby="_r_0_-desc"
          aria-errormessage="_r_0_-desc"
          aria-invalid="true"
          aria-labelledby="_r_0_-label"
          class="radioGroup radioGroup--flex"
          role="radiogroup"
        >
          <div
            class="v2FormField__radio"
            data-version="radio-option-react"
          >
            <div
              class="radioRow"
            >
              <input
                aria-invalid="true"
                aria-label="Male"
                class="radioField error-field"
                id="_r_1_"
                name="gender"
                required=""
                type="radio"
                value="male"
              />
              <label
                for="_r_1_"
              >
                Male
              </label>
            </div>
          </div>
          <div
            class="v2FormField__radio"
            data-version="radio-option-react"
          >
            <div
              class="radioRow"
            >
              <input
                aria-invalid="true"
                aria-label="Female"
                class="radioField error-field"
                id="_r_2_"
                name="gender"
                required=""
                type="radio"
                value="female"
              />
              <label
                for="_r_2_"
              >
                Female
              </label>
            </div>
          </div>
          <div
            class="v2FormField__radio"
            data-version="radio-option-react"
          >
            <div
              class="radioRow"
            >
              <input
                aria-invalid="true"
                aria-label="Other"
                class="radioField error-field"
                id="_r_3_"
                name="gender"
                required=""
                type="radio"
                value="other"
              />
              <label
                for="_r_3_"
              >
                Other
              </label>
            </div>
          </div>
        </div>
        <span
          class="v2FormField__error"
          id="_r_0_-desc"
        >
          This field is required
        </span>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders Horizontal story', () => {
    const Story = composedStories.Horizontal;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <div
      class="v2FormField"
    >
      <span
        class="v2FormField__label"
        id="_r_0_-label"
      >
        <span
          class="v2FormField__labelText"
        >
          Choose your plan
        </span>
      </span>
      <div
        class="v2FormField__input"
      >
        <div
          aria-labelledby="_r_0_-label"
          class="radioGroup radioGroup--flexHorizontal"
          role="radiogroup"
        >
          <div
            class="v2FormField__radio"
            data-version="radio-option-react"
          >
            <div
              class="radioRow"
            >
              <input
                aria-invalid="false"
                aria-label="Free Plan"
                class="radioField"
                id="_r_1_"
                name="billingPlanHorizontal"
                type="radio"
                value="free"
              />
              <label
                for="_r_1_"
              >
                Free Plan
              </label>
            </div>
          </div>
          <div
            class="v2FormField__radio"
            data-version="radio-option-react"
          >
            <div
              class="radioRow"
            >
              <input
                aria-invalid="false"
                aria-label="Pro Plan"
                class="radioField"
                id="_r_2_"
                name="billingPlanHorizontal"
                type="radio"
                value="pro"
              />
              <label
                for="_r_2_"
              >
                Pro Plan
              </label>
            </div>
          </div>
          <div
            class="v2FormField__radio"
            data-version="radio-option-react"
          >
            <div
              class="radioRow"
            >
              <input
                aria-invalid="false"
                aria-label="Business Plan"
                class="radioField"
                id="_r_3_"
                name="billingPlanHorizontal"
                type="radio"
                value="business"
              />
              <label
                for="_r_3_"
              >
                Business Plan
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders WithImageOptions story', () => {
    const Story = composedStories.WithImageOptions;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <div
      class="v2FormField"
    >
      <span
        class="v2FormField__label"
        id="_r_0_-label"
      >
        <span
          class="v2FormField__labelText"
        >
          Choose scenery
        </span>
      </span>
      <div
        class="v2FormField__input"
      >
        <div
          aria-labelledby="_r_0_-label"
          class="radioGroup radioGroup--flexHorizontal radioGroup--gapMd"
          role="radiogroup"
        >
          <span
            class="radioGroup__imageOption radioGroup__imageOption--checked"
          >
            <div
              style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
            >
              <input
                aria-invalid="false"
                aria-label="Mountain"
                checked=""
                id="_r_1_"
                name="landscapeImage"
                type="radio"
                value="mountain"
              />
            </div>
            <label
              class="radioGroup__imageOption__label"
              for="_r_1_"
            >
              <span
                class="v2image v2image--md"
                role="presentation"
                style="--image-aspect-ratio: 4 / 2;"
              >
                <img
                  alt="Mountain"
                  class="v2image__img v2image__img--contain"
                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMjAwIiB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCI+CiAgPHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj40MDB4MjAwPC90ZXh0Pgo8L3N2Zz4="
                  style="opacity: 0; transition: none;"
                />
                <span
                  aria-hidden="true"
                  class="v2image__fallback"
                />
              </span>
              <span
                class="radioGroup__imageOptionCheckmark"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-visible"
                />
              </span>
            </label>
          </span>
          <span
            class="radioGroup__imageOption"
          >
            <div
              style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
            >
              <input
                aria-invalid="false"
                aria-label="Ocean"
                id="_r_2_"
                name="landscapeImage"
                type="radio"
                value="ocean"
              />
            </div>
            <label
              class="radioGroup__imageOption__label"
              for="_r_2_"
            >
              <span
                class="v2image v2image--md"
                role="presentation"
                style="--image-aspect-ratio: 4 / 2;"
              >
                <img
                  alt="Ocean"
                  class="v2image__img v2image__img--contain"
                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMjAwIiB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCI+CiAgPHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj40MDB4MjAwPC90ZXh0Pgo8L3N2Zz4="
                  style="opacity: 0; transition: none;"
                />
                <span
                  aria-hidden="true"
                  class="v2image__fallback"
                />
              </span>
              <span
                class="radioGroup__imageOptionCheckmark"
              >
                <span
                  class="radioGroup__imageOptionCheckmarkEmpty"
                />
              </span>
            </label>
          </span>
          <span
            class="radioGroup__imageOption"
          >
            <div
              style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
            >
              <input
                aria-invalid="false"
                aria-label="Forest"
                id="_r_3_"
                name="landscapeImage"
                type="radio"
                value="forest"
              />
            </div>
            <label
              class="radioGroup__imageOption__label"
              for="_r_3_"
            >
              <span
                class="v2image v2image--md"
                role="presentation"
                style="--image-aspect-ratio: 4 / 2;"
              >
                <img
                  alt="Forest"
                  class="v2image__img v2image__img--contain"
                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMjAwIiB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCI+CiAgPHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj40MDB4MjAwPC90ZXh0Pgo8L3N2Zz4="
                  style="opacity: 0; transition: none;"
                />
                <span
                  aria-hidden="true"
                  class="v2image__fallback"
                />
              </span>
              <span
                class="radioGroup__imageOptionCheckmark"
              >
                <span
                  class="radioGroup__imageOptionCheckmarkEmpty"
                />
              </span>
            </label>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders WithVerticalImageOptions story', () => {
    const Story = composedStories.WithVerticalImageOptions;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <div
      class="v2FormField"
    >
      <span
        class="v2FormField__label"
        id="_r_0_-label"
      >
        <span
          class="v2FormField__labelText"
        >
          Choose color
        </span>
      </span>
      <div
        class="v2FormField__input"
      >
        <div
          aria-labelledby="_r_0_-label"
          class="radioGroup radioGroup--flex"
          role="radiogroup"
        >
          <span
            class="radioGroup__imageOption radioGroup__imageOption--checked"
          >
            <div
              style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
            >
              <input
                aria-invalid="false"
                aria-label="Black"
                checked=""
                id="_r_1_"
                name="verticalImage"
                type="radio"
                value="black"
              />
            </div>
            <label
              class="radioGroup__imageOption__label"
              for="_r_1_"
            >
              <span
                class="v2image v2image--md"
                role="presentation"
                style="--image-aspect-ratio: 1;"
              >
                <img
                  alt="Black"
                  class="v2image__img v2image__img--contain"
                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+CiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4yMDB4MjAwPC90ZXh0Pgo8L3N2Zz4="
                  style="opacity: 0; transition: none;"
                />
                <span
                  aria-hidden="true"
                  class="v2image__fallback"
                />
              </span>
              <span
                class="radioGroup__imageOptionCheckmark"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-visible"
                />
              </span>
            </label>
          </span>
          <span
            class="radioGroup__imageOption"
          >
            <div
              style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
            >
              <input
                aria-invalid="false"
                aria-label="Silver"
                id="_r_2_"
                name="verticalImage"
                type="radio"
                value="silver"
              />
            </div>
            <label
              class="radioGroup__imageOption__label"
              for="_r_2_"
            >
              <span
                class="v2image v2image--md"
                role="presentation"
                style="--image-aspect-ratio: 1;"
              >
                <img
                  alt="Silver"
                  class="v2image__img v2image__img--contain"
                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+CiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4yMDB4MjAwPC90ZXh0Pgo8L3N2Zz4="
                  style="opacity: 0; transition: none;"
                />
                <span
                  aria-hidden="true"
                  class="v2image__fallback"
                />
              </span>
              <span
                class="radioGroup__imageOptionCheckmark"
              >
                <span
                  class="radioGroup__imageOptionCheckmarkEmpty"
                />
              </span>
            </label>
          </span>
          <span
            class="radioGroup__imageOption"
          >
            <div
              style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
            >
              <input
                aria-invalid="false"
                aria-label="Blue"
                id="_r_3_"
                name="verticalImage"
                type="radio"
                value="blue"
              />
            </div>
            <label
              class="radioGroup__imageOption__label"
              for="_r_3_"
            >
              <span
                class="v2image v2image--md"
                role="presentation"
                style="--image-aspect-ratio: 1;"
              >
                <img
                  alt="Blue"
                  class="v2image__img v2image__img--contain"
                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+CiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4yMDB4MjAwPC90ZXh0Pgo8L3N2Zz4="
                  style="opacity: 0; transition: none;"
                />
                <span
                  aria-hidden="true"
                  class="v2image__fallback"
                />
              </span>
              <span
                class="radioGroup__imageOptionCheckmark"
              >
                <span
                  class="radioGroup__imageOptionCheckmarkEmpty"
                />
              </span>
            </label>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders WithImageOptionsGrid story', () => {
    const Story = composedStories.WithImageOptionsGrid;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <div
      class="v2FormField"
    >
      <span
        class="v2FormField__label"
        id="_r_0_-label"
      >
        <span
          class="v2FormField__labelText"
        >
          Choose option
        </span>
      </span>
      <div
        class="v2FormField__input"
      >
        <div
          aria-labelledby="_r_0_-label"
          class="radioGroup radioGroup--grid"
          role="radiogroup"
        >
          <span
            class="radioGroup__imageOption radioGroup__imageOption--checked"
          >
            <div
              style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
            >
              <input
                aria-invalid="false"
                aria-label="Option 1"
                checked=""
                id="_r_1_"
                name="imageGrid"
                type="radio"
                value="option-1"
              />
            </div>
            <label
              class="radioGroup__imageOption__label"
              for="_r_1_"
            >
              <span
                class="v2image v2image--full"
                role="presentation"
                style="--image-aspect-ratio: 3 / 2;"
              >
                <img
                  alt="Option 1"
                  class="v2image__img v2image__img--contain"
                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+CiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4yMDB4MjAwPC90ZXh0Pgo8L3N2Zz4="
                  style="opacity: 0; transition: none;"
                />
                <span
                  aria-hidden="true"
                  class="v2image__fallback"
                />
              </span>
              <span
                class="radioGroup__imageOptionCheckmark"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-visible"
                />
              </span>
            </label>
          </span>
          <span
            class="radioGroup__imageOption"
          >
            <div
              style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
            >
              <input
                aria-invalid="false"
                aria-label="Option 2"
                id="_r_2_"
                name="imageGrid"
                type="radio"
                value="option-2"
              />
            </div>
            <label
              class="radioGroup__imageOption__label"
              for="_r_2_"
            >
              <span
                class="v2image v2image--full"
                role="presentation"
                style="--image-aspect-ratio: 3 / 2;"
              >
                <img
                  alt="Option 2"
                  class="v2image__img v2image__img--contain"
                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+CiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4yMDB4MjAwPC90ZXh0Pgo8L3N2Zz4="
                  style="opacity: 0; transition: none;"
                />
                <span
                  aria-hidden="true"
                  class="v2image__fallback"
                />
              </span>
              <span
                class="radioGroup__imageOptionCheckmark"
              >
                <span
                  class="radioGroup__imageOptionCheckmarkEmpty"
                />
              </span>
            </label>
          </span>
          <span
            class="radioGroup__imageOption"
          >
            <div
              style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
            >
              <input
                aria-invalid="false"
                aria-label="Option 3"
                id="_r_3_"
                name="imageGrid"
                type="radio"
                value="option-3"
              />
            </div>
            <label
              class="radioGroup__imageOption__label"
              for="_r_3_"
            >
              <span
                class="v2image v2image--full"
                role="presentation"
                style="--image-aspect-ratio: 3 / 2;"
              >
                <img
                  alt="Option 3"
                  class="v2image__img v2image__img--contain"
                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+CiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4yMDB4MjAwPC90ZXh0Pgo8L3N2Zz4="
                  style="opacity: 0; transition: none;"
                />
                <span
                  aria-hidden="true"
                  class="v2image__fallback"
                />
              </span>
              <span
                class="radioGroup__imageOptionCheckmark"
              >
                <span
                  class="radioGroup__imageOptionCheckmarkEmpty"
                />
              </span>
            </label>
          </span>
          <span
            class="radioGroup__imageOption"
          >
            <div
              style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
            >
              <input
                aria-invalid="false"
                aria-label="Option 4"
                id="_r_4_"
                name="imageGrid"
                type="radio"
                value="option-4"
              />
            </div>
            <label
              class="radioGroup__imageOption__label"
              for="_r_4_"
            >
              <span
                class="v2image v2image--full"
                role="presentation"
                style="--image-aspect-ratio: 3 / 2;"
              >
                <img
                  alt="Option 4"
                  class="v2image__img v2image__img--contain"
                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+CiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4yMDB4MjAwPC90ZXh0Pgo8L3N2Zz4="
                  style="opacity: 0; transition: none;"
                />
                <span
                  aria-hidden="true"
                  class="v2image__fallback"
                />
              </span>
              <span
                class="radioGroup__imageOptionCheckmark"
              >
                <span
                  class="radioGroup__imageOptionCheckmarkEmpty"
                />
              </span>
            </label>
          </span>
          <span
            class="radioGroup__imageOption"
          >
            <div
              style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
            >
              <input
                aria-invalid="false"
                aria-label="Option 5"
                id="_r_5_"
                name="imageGrid"
                type="radio"
                value="option-5"
              />
            </div>
            <label
              class="radioGroup__imageOption__label"
              for="_r_5_"
            >
              <span
                class="v2image v2image--full"
                role="presentation"
                style="--image-aspect-ratio: 3 / 2;"
              >
                <img
                  alt="Option 5"
                  class="v2image__img v2image__img--contain"
                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+CiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4yMDB4MjAwPC90ZXh0Pgo8L3N2Zz4="
                  style="opacity: 0; transition: none;"
                />
                <span
                  aria-hidden="true"
                  class="v2image__fallback"
                />
              </span>
              <span
                class="radioGroup__imageOptionCheckmark"
              >
                <span
                  class="radioGroup__imageOptionCheckmarkEmpty"
                />
              </span>
            </label>
          </span>
          <span
            class="radioGroup__imageOption"
          >
            <div
              style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
            >
              <input
                aria-invalid="false"
                aria-label="Option 6"
                id="_r_6_"
                name="imageGrid"
                type="radio"
                value="option-6"
              />
            </div>
            <label
              class="radioGroup__imageOption__label"
              for="_r_6_"
            >
              <span
                class="v2image v2image--full"
                role="presentation"
                style="--image-aspect-ratio: 3 / 2;"
              >
                <img
                  alt="Option 6"
                  class="v2image__img v2image__img--contain"
                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+CiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4yMDB4MjAwPC90ZXh0Pgo8L3N2Zz4="
                  style="opacity: 0; transition: none;"
                />
                <span
                  aria-hidden="true"
                  class="v2image__fallback"
                />
              </span>
              <span
                class="radioGroup__imageOptionCheckmark"
              >
                <span
                  class="radioGroup__imageOptionCheckmarkEmpty"
                />
              </span>
            </label>
          </span>
          <span
            class="radioGroup__imageOption"
          >
            <div
              style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
            >
              <input
                aria-invalid="false"
                aria-label="Option 7"
                id="_r_7_"
                name="imageGrid"
                type="radio"
                value="option-7"
              />
            </div>
            <label
              class="radioGroup__imageOption__label"
              for="_r_7_"
            >
              <span
                class="v2image v2image--full"
                role="presentation"
                style="--image-aspect-ratio: 3 / 2;"
              >
                <img
                  alt="Option 7"
                  class="v2image__img v2image__img--contain"
                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+CiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4yMDB4MjAwPC90ZXh0Pgo8L3N2Zz4="
                  style="opacity: 0; transition: none;"
                />
                <span
                  aria-hidden="true"
                  class="v2image__fallback"
                />
              </span>
              <span
                class="radioGroup__imageOptionCheckmark"
              >
                <span
                  class="radioGroup__imageOptionCheckmarkEmpty"
                />
              </span>
            </label>
          </span>
          <span
            class="radioGroup__imageOption"
          >
            <div
              style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
            >
              <input
                aria-invalid="false"
                aria-label="Option 8"
                id="_r_8_"
                name="imageGrid"
                type="radio"
                value="option-8"
              />
            </div>
            <label
              class="radioGroup__imageOption__label"
              for="_r_8_"
            >
              <span
                class="v2image v2image--full"
                role="presentation"
                style="--image-aspect-ratio: 3 / 2;"
              >
                <img
                  alt="Option 8"
                  class="v2image__img v2image__img--contain"
                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+CiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4yMDB4MjAwPC90ZXh0Pgo8L3N2Zz4="
                  style="opacity: 0; transition: none;"
                />
                <span
                  aria-hidden="true"
                  class="v2image__fallback"
                />
              </span>
              <span
                class="radioGroup__imageOptionCheckmark"
              >
                <span
                  class="radioGroup__imageOptionCheckmarkEmpty"
                />
              </span>
            </label>
          </span>
          <span
            class="radioGroup__imageOption"
          >
            <div
              style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
            >
              <input
                aria-invalid="false"
                aria-label="Option 9"
                id="_r_9_"
                name="imageGrid"
                type="radio"
                value="option-9"
              />
            </div>
            <label
              class="radioGroup__imageOption__label"
              for="_r_9_"
            >
              <span
                class="v2image v2image--full"
                role="presentation"
                style="--image-aspect-ratio: 3 / 2;"
              >
                <img
                  alt="Option 9"
                  class="v2image__img v2image__img--contain"
                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+CiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4yMDB4MjAwPC90ZXh0Pgo8L3N2Zz4="
                  style="opacity: 0; transition: none;"
                />
                <span
                  aria-hidden="true"
                  class="v2image__fallback"
                />
              </span>
              <span
                class="radioGroup__imageOptionCheckmark"
              >
                <span
                  class="radioGroup__imageOptionCheckmarkEmpty"
                />
              </span>
            </label>
          </span>
          <span
            class="radioGroup__imageOption"
          >
            <div
              style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
            >
              <input
                aria-invalid="false"
                aria-label="Option 10"
                id="_r_10_"
                name="imageGrid"
                type="radio"
                value="option-10"
              />
            </div>
            <label
              class="radioGroup__imageOption__label"
              for="_r_10_"
            >
              <span
                class="v2image v2image--full"
                role="presentation"
                style="--image-aspect-ratio: 3 / 2;"
              >
                <img
                  alt="Option 10"
                  class="v2image__img v2image__img--contain"
                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+CiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4yMDB4MjAwPC90ZXh0Pgo8L3N2Zz4="
                  style="opacity: 0; transition: none;"
                />
                <span
                  aria-hidden="true"
                  class="v2image__fallback"
                />
              </span>
              <span
                class="radioGroup__imageOptionCheckmark"
              >
                <span
                  class="radioGroup__imageOptionCheckmarkEmpty"
                />
              </span>
            </label>
          </span>
          <span
            class="radioGroup__imageOption"
          >
            <div
              style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
            >
              <input
                aria-invalid="false"
                aria-label="Option 11"
                id="_r_11_"
                name="imageGrid"
                type="radio"
                value="option-11"
              />
            </div>
            <label
              class="radioGroup__imageOption__label"
              for="_r_11_"
            >
              <span
                class="v2image v2image--full"
                role="presentation"
                style="--image-aspect-ratio: 3 / 2;"
              >
                <img
                  alt="Option 11"
                  class="v2image__img v2image__img--contain"
                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+CiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4yMDB4MjAwPC90ZXh0Pgo8L3N2Zz4="
                  style="opacity: 0; transition: none;"
                />
                <span
                  aria-hidden="true"
                  class="v2image__fallback"
                />
              </span>
              <span
                class="radioGroup__imageOptionCheckmark"
              >
                <span
                  class="radioGroup__imageOptionCheckmarkEmpty"
                />
              </span>
            </label>
          </span>
          <span
            class="radioGroup__imageOption"
          >
            <div
              style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
            >
              <input
                aria-invalid="false"
                aria-label="Option 12"
                id="_r_12_"
                name="imageGrid"
                type="radio"
                value="option-12"
              />
            </div>
            <label
              class="radioGroup__imageOption__label"
              for="_r_12_"
            >
              <span
                class="v2image v2image--full"
                role="presentation"
                style="--image-aspect-ratio: 3 / 2;"
              >
                <img
                  alt="Option 12"
                  class="v2image__img v2image__img--contain"
                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+CiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4yMDB4MjAwPC90ZXh0Pgo8L3N2Zz4="
                  style="opacity: 0; transition: none;"
                />
                <span
                  aria-hidden="true"
                  class="v2image__fallback"
                />
              </span>
              <span
                class="radioGroup__imageOptionCheckmark"
              >
                <span
                  class="radioGroup__imageOptionCheckmarkEmpty"
                />
              </span>
            </label>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders WithImageOptionsError story', () => {
    const Story = composedStories.WithImageOptionsError;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <div
      class="v2FormField"
    >
      <span
        class="v2FormField__label"
        id="_r_0_-label"
      >
        <span
          class="v2FormField__labelText"
        >
          Choose color
        </span>
      </span>
      <div
        class="v2FormField__input"
      >
        <div
          aria-describedby="_r_0_-desc"
          aria-errormessage="_r_0_-desc"
          aria-invalid="true"
          aria-labelledby="_r_0_-label"
          class="radioGroup radioGroup--flexHorizontal radioGroup--gapMd"
          role="radiogroup"
        >
          <span
            class="radioGroup__imageOption radioGroup__imageOption--error"
          >
            <div
              style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
            >
              <input
                aria-invalid="true"
                aria-label="Black"
                id="_r_1_"
                name="imageError"
                type="radio"
                value="black"
              />
            </div>
            <label
              class="radioGroup__imageOption__label"
              for="_r_1_"
            >
              <span
                class="v2image v2image--md"
                role="presentation"
                style="--image-aspect-ratio: 3 / 2;"
              >
                <img
                  alt="Black"
                  class="v2image__img v2image__img--contain"
                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+CiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4yMDB4MjAwPC90ZXh0Pgo8L3N2Zz4="
                  style="opacity: 0; transition: none;"
                />
                <span
                  aria-hidden="true"
                  class="v2image__fallback"
                />
              </span>
              <span
                class="radioGroup__imageOptionCheckmark"
              >
                <span
                  class="radioGroup__imageOptionCheckmarkEmpty"
                />
              </span>
            </label>
          </span>
          <span
            class="radioGroup__imageOption radioGroup__imageOption--error"
          >
            <div
              style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
            >
              <input
                aria-invalid="true"
                aria-label="Silver"
                id="_r_2_"
                name="imageError"
                type="radio"
                value="silver"
              />
            </div>
            <label
              class="radioGroup__imageOption__label"
              for="_r_2_"
            >
              <span
                class="v2image v2image--md"
                role="presentation"
                style="--image-aspect-ratio: 3 / 2;"
              >
                <img
                  alt="Silver"
                  class="v2image__img v2image__img--contain"
                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+CiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4yMDB4MjAwPC90ZXh0Pgo8L3N2Zz4="
                  style="opacity: 0; transition: none;"
                />
                <span
                  aria-hidden="true"
                  class="v2image__fallback"
                />
              </span>
              <span
                class="radioGroup__imageOptionCheckmark"
              >
                <span
                  class="radioGroup__imageOptionCheckmarkEmpty"
                />
              </span>
            </label>
          </span>
          <span
            class="radioGroup__imageOption radioGroup__imageOption--error"
          >
            <div
              style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
            >
              <input
                aria-invalid="true"
                aria-label="Blue"
                id="_r_3_"
                name="imageError"
                type="radio"
                value="blue"
              />
            </div>
            <label
              class="radioGroup__imageOption__label"
              for="_r_3_"
            >
              <span
                class="v2image v2image--md"
                role="presentation"
                style="--image-aspect-ratio: 3 / 2;"
              >
                <img
                  alt="Blue"
                  class="v2image__img v2image__img--contain"
                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+CiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4yMDB4MjAwPC90ZXh0Pgo8L3N2Zz4="
                  style="opacity: 0; transition: none;"
                />
                <span
                  aria-hidden="true"
                  class="v2image__fallback"
                />
              </span>
              <span
                class="radioGroup__imageOptionCheckmark"
              >
                <span
                  class="radioGroup__imageOptionCheckmarkEmpty"
                />
              </span>
            </label>
          </span>
        </div>
        <span
          class="v2FormField__error"
          id="_r_0_-desc"
        >
          Please select an option
        </span>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders WithImageOptionsWarning story', () => {
    const Story = composedStories.WithImageOptionsWarning;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="v2form"
  >
    <div
      class="v2FormField"
    >
      <span
        class="v2FormField__label"
        id="_r_0_-label"
      >
        <span
          class="v2FormField__labelText"
        >
          Choose color
        </span>
      </span>
      <div
        class="v2FormField__input"
      >
        <div
          aria-describedby="_r_0_-desc"
          aria-labelledby="_r_0_-label"
          class="radioGroup radioGroup--flexHorizontal radioGroup--gapMd"
          role="radiogroup"
        >
          <span
            class="radioGroup__imageOption radioGroup__imageOption--checked radioGroup__imageOption--warning"
          >
            <div
              style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
            >
              <input
                aria-invalid="false"
                aria-label="Black"
                checked=""
                id="_r_1_"
                name="imageWarning"
                type="radio"
                value="black"
              />
            </div>
            <label
              class="radioGroup__imageOption__label"
              for="_r_1_"
            >
              <span
                class="v2image v2image--md"
                role="presentation"
                style="--image-aspect-ratio: 3 / 2;"
              >
                <img
                  alt="Black"
                  class="v2image__img v2image__img--contain"
                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+CiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4yMDB4MjAwPC90ZXh0Pgo8L3N2Zz4="
                  style="opacity: 0; transition: none;"
                />
                <span
                  aria-hidden="true"
                  class="v2image__fallback"
                />
              </span>
              <span
                class="radioGroup__imageOptionCheckmark"
              >
                <span
                  aria-hidden="true"
                  class="shoptet-icon icon icon--default icon--md shp-visible"
                />
              </span>
            </label>
          </span>
          <span
            class="radioGroup__imageOption radioGroup__imageOption--warning"
          >
            <div
              style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
            >
              <input
                aria-invalid="false"
                aria-label="Silver"
                id="_r_2_"
                name="imageWarning"
                type="radio"
                value="silver"
              />
            </div>
            <label
              class="radioGroup__imageOption__label"
              for="_r_2_"
            >
              <span
                class="v2image v2image--md"
                role="presentation"
                style="--image-aspect-ratio: 3 / 2;"
              >
                <img
                  alt="Silver"
                  class="v2image__img v2image__img--contain"
                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+CiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4yMDB4MjAwPC90ZXh0Pgo8L3N2Zz4="
                  style="opacity: 0; transition: none;"
                />
                <span
                  aria-hidden="true"
                  class="v2image__fallback"
                />
              </span>
              <span
                class="radioGroup__imageOptionCheckmark"
              >
                <span
                  class="radioGroup__imageOptionCheckmarkEmpty"
                />
              </span>
            </label>
          </span>
          <span
            class="radioGroup__imageOption radioGroup__imageOption--warning"
          >
            <div
              style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
            >
              <input
                aria-invalid="false"
                aria-label="Blue"
                id="_r_3_"
                name="imageWarning"
                type="radio"
                value="blue"
              />
            </div>
            <label
              class="radioGroup__imageOption__label"
              for="_r_3_"
            >
              <span
                class="v2image v2image--md"
                role="presentation"
                style="--image-aspect-ratio: 3 / 2;"
              >
                <img
                  alt="Blue"
                  class="v2image__img v2image__img--contain"
                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+CiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4yMDB4MjAwPC90ZXh0Pgo8L3N2Zz4="
                  style="opacity: 0; transition: none;"
                />
                <span
                  aria-hidden="true"
                  class="v2image__fallback"
                />
              </span>
              <span
                class="radioGroup__imageOptionCheckmark"
              >
                <span
                  class="radioGroup__imageOptionCheckmarkEmpty"
                />
              </span>
            </label>
          </span>
        </div>
        <span
          class="v2FormField__warning"
          id="_r_0_-desc"
        >
          This selection may affect your order
        </span>
      </div>
    </div>
  </div>
</div>
`);
  });
});