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

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

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

const composedStories = composeStories(stories);

describe('ActionCard Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set(['Default', 'ThreeColumns']);

    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="actionCard actionCard--responsive"
  >
    <div
      class="actionCard__header"
    >
      <div
        class="actionCard__tags"
      >
        <span
          class="tag tag--primary tag--error tag--md"
        >
          Hello
        </span>
        <span
          class="tag tag--primary tag--success tag--md"
        >
          world!
        </span>
      </div>
      <div
        class="actionCard__title"
      >
        <span
          style="padding-inline: 4px; padding-block: 0px; border: 1px dashed magenta; color: magenta; font-weight: 400; font-size: 24px; line-height: 1.25; white-space: nowrap;"
        >
          ACME Corp
        </span>
      </div>
    </div>
    <div
      class="actionCard__description"
    >
      <span
        class="typography typography__bodyCopyM typography--left"
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </span>
    </div>
    <div
      class="actionCard__content"
    >
      <ul
        class="list list--columns"
      >
        <li
          class="list__item list__item--withIcon list__item--divider list__item--ellipsis list__item--alignTop"
        >
          <div
            class="list__itemIcon"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--sm shp-checkmark"
            />
          </div>
          <div
            class="list__itemContent"
          >
            <div
              class="list__itemLabel"
            >
              <p
                class="typography typography__bodyCopyM typography--left"
              >
                List item 1
              </p>
            </div>
            <div
              class="list__itemValue"
            >
              <div
                class="list__itemValueContent"
              >
                <p
                  class="typography typography__bodyCopyM typography--left"
                >
                  <strong>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam
                  </strong>
                </p>
              </div>
            </div>
          </div>
        </li>
        <li
          class="list__item list__item--withIcon list__item--divider list__item--ellipsis list__item--alignTop"
        >
          <div
            class="list__itemIcon"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--sm shp-checkmark"
            />
          </div>
          <div
            class="list__itemContent"
          >
            <div
              class="list__itemLabel"
            >
              <p
                class="typography typography__bodyCopyM typography--left"
              >
                List item 2
              </p>
            </div>
            <div
              class="list__itemValue"
            >
              <div
                class="list__itemValueContent"
              >
                <p
                  class="typography typography__bodyCopyM typography--left"
                >
                  <strong>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam
                  </strong>
                </p>
              </div>
            </div>
          </div>
        </li>
        <li
          class="list__item list__item--withIcon list__item--divider list__item--ellipsis list__item--alignTop"
        >
          <div
            class="list__itemIcon"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--sm shp-checkmark"
            />
          </div>
          <div
            class="list__itemContent"
          >
            <div
              class="list__itemLabel"
            >
              <p
                class="typography typography__bodyCopyM typography--left"
              >
                List item 3
              </p>
            </div>
            <div
              class="list__itemValue"
            >
              <div
                class="list__itemValueContent"
              >
                <p
                  class="typography typography__bodyCopyM typography--left"
                >
                  <strong>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam
                  </strong>
                </p>
              </div>
            </div>
          </div>
        </li>
        <li
          class="list__item list__item--withIcon list__item--divider list__item--ellipsis list__item--alignTop"
        >
          <div
            class="list__itemIcon"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--sm shp-checkmark"
            />
          </div>
          <div
            class="list__itemContent"
          >
            <div
              class="list__itemLabel"
            >
              <p
                class="typography typography__bodyCopyM typography--left"
              >
                List item 4
              </p>
            </div>
            <div
              class="list__itemValue"
            >
              <div
                class="list__itemValueContent"
              >
                <p
                  class="typography typography__bodyCopyM typography--left"
                >
                  <strong>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam
                  </strong>
                </p>
              </div>
            </div>
          </div>
        </li>
        <li
          class="list__item list__item--withIcon list__item--divider list__item--ellipsis list__item--alignTop"
        >
          <div
            class="list__itemIcon"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--sm shp-checkmark"
            />
          </div>
          <div
            class="list__itemContent"
          >
            <div
              class="list__itemLabel"
            >
              <p
                class="typography typography__bodyCopyM typography--left"
              >
                List item 5
              </p>
            </div>
            <div
              class="list__itemValue"
            >
              <div
                class="list__itemValueContent"
              >
                <p
                  class="typography typography__bodyCopyM typography--left"
                >
                  <strong>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam
                  </strong>
                </p>
              </div>
            </div>
          </div>
        </li>
        <li
          class="list__item list__item--withIcon list__item--divider list__item--ellipsis list__item--alignTop"
        >
          <div
            class="list__itemIcon"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--sm shp-checkmark"
            />
          </div>
          <div
            class="list__itemContent"
          >
            <div
              class="list__itemLabel"
            >
              <p
                class="typography typography__bodyCopyM typography--left"
              >
                List item 6
              </p>
            </div>
            <div
              class="list__itemValue"
            >
              <div
                class="list__itemValueContent"
              >
                <p
                  class="typography typography__bodyCopyM typography--left"
                >
                  <strong>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam
                  </strong>
                </p>
              </div>
            </div>
          </div>
        </li>
        <li
          class="list__item list__item--withIcon list__item--divider list__item--ellipsis list__item--alignTop"
        >
          <div
            class="list__itemIcon"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--sm shp-checkmark"
            />
          </div>
          <div
            class="list__itemContent"
          >
            <div
              class="list__itemLabel"
            >
              <p
                class="typography typography__bodyCopyM typography--left"
              >
                List item 7
              </p>
            </div>
            <div
              class="list__itemValue"
            >
              <div
                class="list__itemValueContent"
              >
                <p
                  class="typography typography__bodyCopyM typography--left"
                >
                  <strong>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam
                  </strong>
                </p>
              </div>
            </div>
          </div>
        </li>
        <li
          class="list__item list__item--withIcon list__item--divider list__item--ellipsis list__item--alignTop"
        >
          <div
            class="list__itemIcon"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--sm shp-checkmark"
            />
          </div>
          <div
            class="list__itemContent"
          >
            <div
              class="list__itemLabel"
            >
              <p
                class="typography typography__bodyCopyM typography--left"
              >
                List item 8
              </p>
            </div>
            <div
              class="list__itemValue"
            >
              <div
                class="list__itemValueContent"
              >
                <p
                  class="typography typography__bodyCopyM typography--left"
                >
                  <strong>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam
                  </strong>
                </p>
              </div>
            </div>
          </div>
        </li>
        <li
          class="list__item list__item--withIcon list__item--divider list__item--ellipsis list__item--alignTop"
        >
          <div
            class="list__itemIcon"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--sm shp-checkmark"
            />
          </div>
          <div
            class="list__itemContent"
          >
            <div
              class="list__itemLabel"
            >
              <p
                class="typography typography__bodyCopyM typography--left"
              >
                List item 9
              </p>
            </div>
            <div
              class="list__itemValue"
            >
              <div
                class="list__itemValueContent"
              >
                <p
                  class="typography typography__bodyCopyM typography--left"
                >
                  <strong>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam
                  </strong>
                </p>
              </div>
            </div>
          </div>
        </li>
        <li
          class="list__item list__item--withIcon list__item--divider list__item--ellipsis list__item--alignTop"
        >
          <div
            class="list__itemIcon"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--sm shp-checkmark"
            />
          </div>
          <div
            class="list__itemContent"
          >
            <div
              class="list__itemLabel"
            >
              <p
                class="typography typography__bodyCopyM typography--left"
              >
                List item 10
              </p>
            </div>
            <div
              class="list__itemValue"
            >
              <div
                class="list__itemValueContent"
              >
                <p
                  class="typography typography__bodyCopyM typography--left"
                >
                  <strong>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam
                  </strong>
                </p>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div
      class="actionCard__buttons"
    >
      <button
        class="btn btn-secondary btn-md"
        data-react-aria-pressable="true"
        type="button"
      >
        <span
          class="btn--content"
        >
          Secondary
        </span>
      </button>
      <button
        class="btn btn-primary btn-md"
        data-react-aria-pressable="true"
        type="button"
      >
        <span
          class="btn--content"
        >
          Primary
        </span>
      </button>
    </div>
  </div>
</div>
`);
  });

  it('renders ThreeColumns story', () => {
    const Story = composedStories.ThreeColumns;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <style>
    
          .responsive-columns {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
          }
          @media (min-width: 768px) {
            .responsive-columns {
              gap: 24px;
            }
            .responsive-columns &gt; * {
              flex: 1;
              min-width: 0px;
              width: calc((100% - 2 * 24px) / 3);
            }
          }
        
  </style>
  <div
    class="responsive-columns"
  >
    <div
      class="actionCard"
    >
      <div
        class="actionCard__header"
      >
        <div
          class="actionCard__tags"
        >
          <span
            class="typography typography__bodyCopyM typography--left"
          />
        </div>
        <div
          class="actionCard__title"
        >
          <span
            style="padding-inline: 4px; padding-block: 0px; border: 1px dashed magenta; color: magenta; font-weight: 400; font-size: 24px; line-height: 1.25; white-space: nowrap;"
          >
            ACME Corp
          </span>
        </div>
      </div>
      <div
        class="actionCard__description"
      >
        <span
          class="typography typography__bodyCopyM typography--left"
        >
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </span>
      </div>
      <div
        class="actionCard__content"
      >
        <ul
          class="list list--columns"
        >
          <li
            class="list__item list__item--withIcon list__item--divider list__item--ellipsis list__item--alignTop"
          >
            <div
              class="list__itemIcon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--sm shp-checkmark"
              />
            </div>
            <div
              class="list__itemContent"
            >
              <div
                class="list__itemLabel"
              >
                <p
                  class="typography typography__bodyCopyM typography--left"
                >
                  List item 1
                </p>
              </div>
              <div
                class="list__itemValue"
              >
                <div
                  class="list__itemValueContent"
                >
                  <p
                    class="typography typography__bodyCopyM typography--left"
                  >
                    <strong>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam
                    </strong>
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li
            class="list__item list__item--withIcon list__item--divider list__item--ellipsis list__item--alignTop"
          >
            <div
              class="list__itemIcon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--sm shp-checkmark"
              />
            </div>
            <div
              class="list__itemContent"
            >
              <div
                class="list__itemLabel"
              >
                <p
                  class="typography typography__bodyCopyM typography--left"
                >
                  List item 2
                </p>
              </div>
              <div
                class="list__itemValue"
              >
                <div
                  class="list__itemValueContent"
                >
                  <p
                    class="typography typography__bodyCopyM typography--left"
                  >
                    <strong>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam
                    </strong>
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li
            class="list__item list__item--withIcon list__item--divider list__item--ellipsis list__item--alignTop"
          >
            <div
              class="list__itemIcon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--sm shp-checkmark"
              />
            </div>
            <div
              class="list__itemContent"
            >
              <div
                class="list__itemLabel"
              >
                <p
                  class="typography typography__bodyCopyM typography--left"
                >
                  List item 3
                </p>
              </div>
              <div
                class="list__itemValue"
              >
                <div
                  class="list__itemValueContent"
                >
                  <p
                    class="typography typography__bodyCopyM typography--left"
                  >
                    <strong>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam
                    </strong>
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li
            class="list__item list__item--withIcon list__item--divider list__item--ellipsis list__item--alignTop"
          >
            <div
              class="list__itemIcon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--sm shp-checkmark"
              />
            </div>
            <div
              class="list__itemContent"
            >
              <div
                class="list__itemLabel"
              >
                <p
                  class="typography typography__bodyCopyM typography--left"
                >
                  List item 4
                </p>
              </div>
              <div
                class="list__itemValue"
              >
                <div
                  class="list__itemValueContent"
                >
                  <p
                    class="typography typography__bodyCopyM typography--left"
                  >
                    <strong>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam
                    </strong>
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li
            class="list__item list__item--withIcon list__item--divider list__item--ellipsis list__item--alignTop"
          >
            <div
              class="list__itemIcon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--sm shp-checkmark"
              />
            </div>
            <div
              class="list__itemContent"
            >
              <div
                class="list__itemLabel"
              >
                <p
                  class="typography typography__bodyCopyM typography--left"
                >
                  List item 5
                </p>
              </div>
              <div
                class="list__itemValue"
              >
                <div
                  class="list__itemValueContent"
                >
                  <p
                    class="typography typography__bodyCopyM typography--left"
                  >
                    <strong>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam
                    </strong>
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li
            class="list__item list__item--withIcon list__item--divider list__item--ellipsis list__item--alignTop"
          >
            <div
              class="list__itemIcon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--sm shp-checkmark"
              />
            </div>
            <div
              class="list__itemContent"
            >
              <div
                class="list__itemLabel"
              >
                <p
                  class="typography typography__bodyCopyM typography--left"
                >
                  List item 6
                </p>
              </div>
              <div
                class="list__itemValue"
              >
                <div
                  class="list__itemValueContent"
                >
                  <p
                    class="typography typography__bodyCopyM typography--left"
                  >
                    <strong>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam
                    </strong>
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li
            class="list__item list__item--withIcon list__item--divider list__item--ellipsis list__item--alignTop"
          >
            <div
              class="list__itemIcon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--sm shp-checkmark"
              />
            </div>
            <div
              class="list__itemContent"
            >
              <div
                class="list__itemLabel"
              >
                <p
                  class="typography typography__bodyCopyM typography--left"
                >
                  List item 7
                </p>
              </div>
              <div
                class="list__itemValue"
              >
                <div
                  class="list__itemValueContent"
                >
                  <p
                    class="typography typography__bodyCopyM typography--left"
                  >
                    <strong>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam
                    </strong>
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li
            class="list__item list__item--withIcon list__item--divider list__item--ellipsis list__item--alignTop"
          >
            <div
              class="list__itemIcon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--sm shp-checkmark"
              />
            </div>
            <div
              class="list__itemContent"
            >
              <div
                class="list__itemLabel"
              >
                <p
                  class="typography typography__bodyCopyM typography--left"
                >
                  List item 8
                </p>
              </div>
              <div
                class="list__itemValue"
              >
                <div
                  class="list__itemValueContent"
                >
                  <p
                    class="typography typography__bodyCopyM typography--left"
                  >
                    <strong>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam
                    </strong>
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li
            class="list__item list__item--withIcon list__item--divider list__item--ellipsis list__item--alignTop"
          >
            <div
              class="list__itemIcon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--sm shp-checkmark"
              />
            </div>
            <div
              class="list__itemContent"
            >
              <div
                class="list__itemLabel"
              >
                <p
                  class="typography typography__bodyCopyM typography--left"
                >
                  List item 9
                </p>
              </div>
              <div
                class="list__itemValue"
              >
                <div
                  class="list__itemValueContent"
                >
                  <p
                    class="typography typography__bodyCopyM typography--left"
                  >
                    <strong>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam
                    </strong>
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li
            class="list__item list__item--withIcon list__item--divider list__item--ellipsis list__item--alignTop"
          >
            <div
              class="list__itemIcon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--sm shp-checkmark"
              />
            </div>
            <div
              class="list__itemContent"
            >
              <div
                class="list__itemLabel"
              >
                <p
                  class="typography typography__bodyCopyM typography--left"
                >
                  List item 10
                </p>
              </div>
              <div
                class="list__itemValue"
              >
                <div
                  class="list__itemValueContent"
                >
                  <p
                    class="typography typography__bodyCopyM typography--left"
                  >
                    <strong>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam
                    </strong>
                  </p>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div
        class="actionCard__buttons"
      >
        <button
          class="btn btn-secondary btn-md"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            Secondary
          </span>
        </button>
        <button
          class="btn btn-primary btn-md"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            Primary
          </span>
        </button>
      </div>
    </div>
    <div
      class="actionCard"
    >
      <div
        class="actionCard__header"
      >
        <div
          class="actionCard__tags"
        >
          <span
            class="tag tag--primary tag--error tag--md"
          >
            Hello
          </span>
          <span
            class="tag tag--primary tag--success tag--md"
          >
            world!
          </span>
        </div>
        <div
          class="actionCard__title"
        >
          <h2
            class="typography typography__headline2 typography--left typography--divider"
          >
            Hello
          </h2>
        </div>
      </div>
      <div
        class="actionCard__description"
      >
        <span
          class="typography typography__bodyCopyM typography--left"
        >
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </span>
      </div>
      <div
        class="actionCard__content"
      >
        <ul
          class="list list--columns"
        >
          <li
            class="list__item list__item--withIcon list__item--divider list__item--ellipsis list__item--alignTop"
          >
            <div
              class="list__itemIcon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--sm shp-checkmark"
              />
            </div>
            <div
              class="list__itemContent"
            >
              <div
                class="list__itemLabel"
              >
                <p
                  class="typography typography__bodyCopyM typography--left"
                >
                  List item 1
                </p>
              </div>
              <div
                class="list__itemValue"
              >
                <div
                  class="list__itemValueContent"
                >
                  <p
                    class="typography typography__bodyCopyM typography--left"
                  >
                    <strong>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam
                    </strong>
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li
            class="list__item list__item--withIcon list__item--divider list__item--ellipsis list__item--alignTop"
          >
            <div
              class="list__itemIcon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--sm shp-checkmark"
              />
            </div>
            <div
              class="list__itemContent"
            >
              <div
                class="list__itemLabel"
              >
                <p
                  class="typography typography__bodyCopyM typography--left"
                >
                  List item 2
                </p>
              </div>
              <div
                class="list__itemValue"
              >
                <div
                  class="list__itemValueContent"
                >
                  <p
                    class="typography typography__bodyCopyM typography--left"
                  >
                    <strong>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam
                    </strong>
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li
            class="list__item list__item--withIcon list__item--divider list__item--ellipsis list__item--alignTop"
          >
            <div
              class="list__itemIcon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--sm shp-checkmark"
              />
            </div>
            <div
              class="list__itemContent"
            >
              <div
                class="list__itemLabel"
              >
                <p
                  class="typography typography__bodyCopyM typography--left"
                >
                  List item 3
                </p>
              </div>
              <div
                class="list__itemValue"
              >
                <div
                  class="list__itemValueContent"
                >
                  <p
                    class="typography typography__bodyCopyM typography--left"
                  >
                    <strong>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam
                    </strong>
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li
            class="list__item list__item--withIcon list__item--divider list__item--ellipsis list__item--alignTop"
          >
            <div
              class="list__itemIcon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--sm shp-checkmark"
              />
            </div>
            <div
              class="list__itemContent"
            >
              <div
                class="list__itemLabel"
              >
                <p
                  class="typography typography__bodyCopyM typography--left"
                >
                  List item 4
                </p>
              </div>
              <div
                class="list__itemValue"
              >
                <div
                  class="list__itemValueContent"
                >
                  <p
                    class="typography typography__bodyCopyM typography--left"
                  >
                    <strong>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam
                    </strong>
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li
            class="list__item list__item--withIcon list__item--divider list__item--ellipsis list__item--alignTop"
          >
            <div
              class="list__itemIcon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--sm shp-checkmark"
              />
            </div>
            <div
              class="list__itemContent"
            >
              <div
                class="list__itemLabel"
              >
                <p
                  class="typography typography__bodyCopyM typography--left"
                >
                  List item 5
                </p>
              </div>
              <div
                class="list__itemValue"
              >
                <div
                  class="list__itemValueContent"
                >
                  <p
                    class="typography typography__bodyCopyM typography--left"
                  >
                    <strong>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam
                    </strong>
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li
            class="list__item list__item--withIcon list__item--divider list__item--ellipsis list__item--alignTop"
          >
            <div
              class="list__itemIcon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--sm shp-checkmark"
              />
            </div>
            <div
              class="list__itemContent"
            >
              <div
                class="list__itemLabel"
              >
                <p
                  class="typography typography__bodyCopyM typography--left"
                >
                  List item 6
                </p>
              </div>
              <div
                class="list__itemValue"
              >
                <div
                  class="list__itemValueContent"
                >
                  <p
                    class="typography typography__bodyCopyM typography--left"
                  >
                    <strong>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam
                    </strong>
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li
            class="list__item list__item--withIcon list__item--divider list__item--ellipsis list__item--alignTop"
          >
            <div
              class="list__itemIcon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--sm shp-checkmark"
              />
            </div>
            <div
              class="list__itemContent"
            >
              <div
                class="list__itemLabel"
              >
                <p
                  class="typography typography__bodyCopyM typography--left"
                >
                  List item 7
                </p>
              </div>
              <div
                class="list__itemValue"
              >
                <div
                  class="list__itemValueContent"
                >
                  <p
                    class="typography typography__bodyCopyM typography--left"
                  >
                    <strong>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam
                    </strong>
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li
            class="list__item list__item--withIcon list__item--divider list__item--ellipsis list__item--alignTop"
          >
            <div
              class="list__itemIcon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--sm shp-checkmark"
              />
            </div>
            <div
              class="list__itemContent"
            >
              <div
                class="list__itemLabel"
              >
                <p
                  class="typography typography__bodyCopyM typography--left"
                >
                  List item 8
                </p>
              </div>
              <div
                class="list__itemValue"
              >
                <div
                  class="list__itemValueContent"
                >
                  <p
                    class="typography typography__bodyCopyM typography--left"
                  >
                    <strong>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam
                    </strong>
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li
            class="list__item list__item--withIcon list__item--divider list__item--ellipsis list__item--alignTop"
          >
            <div
              class="list__itemIcon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--sm shp-checkmark"
              />
            </div>
            <div
              class="list__itemContent"
            >
              <div
                class="list__itemLabel"
              >
                <p
                  class="typography typography__bodyCopyM typography--left"
                >
                  List item 9
                </p>
              </div>
              <div
                class="list__itemValue"
              >
                <div
                  class="list__itemValueContent"
                >
                  <p
                    class="typography typography__bodyCopyM typography--left"
                  >
                    <strong>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam
                    </strong>
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li
            class="list__item list__item--withIcon list__item--divider list__item--ellipsis list__item--alignTop"
          >
            <div
              class="list__itemIcon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--sm shp-checkmark"
              />
            </div>
            <div
              class="list__itemContent"
            >
              <div
                class="list__itemLabel"
              >
                <p
                  class="typography typography__bodyCopyM typography--left"
                >
                  List item 10
                </p>
              </div>
              <div
                class="list__itemValue"
              >
                <div
                  class="list__itemValueContent"
                >
                  <p
                    class="typography typography__bodyCopyM typography--left"
                  >
                    <strong>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam
                    </strong>
                  </p>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div
        class="actionCard__buttons"
      >
        <button
          class="btn btn-secondary btn-md"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            Secondary
          </span>
        </button>
        <button
          class="btn btn-primary btn-md"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            Primary
          </span>
        </button>
      </div>
    </div>
    <div
      class="actionCard"
    >
      <div
        class="actionCard__header"
      >
        <div
          class="actionCard__tags"
        >
          <span
            class="tag tag--primary tag--error tag--md"
          >
            Hello
          </span>
          <span
            class="tag tag--primary tag--success tag--md"
          >
            world!
          </span>
        </div>
        <div
          class="actionCard__title"
        >
          <span
            style="padding-inline: 4px; padding-block: 0px; border: 1px dashed magenta; color: magenta; font-weight: 400; font-size: 24px; line-height: 1.25; white-space: nowrap;"
          >
            ACME Corp
          </span>
        </div>
      </div>
      <div
        class="actionCard__description"
      >
        <span
          class="typography typography__bodyCopyM typography--left"
        >
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </span>
      </div>
      <div
        class="actionCard__content"
      >
        <ul
          class="list list--columns"
        >
          <li
            class="list__item list__item--withIcon list__item--divider list__item--ellipsis list__item--alignTop"
          >
            <div
              class="list__itemIcon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--sm shp-checkmark"
              />
            </div>
            <div
              class="list__itemContent"
            >
              <div
                class="list__itemLabel"
              >
                <p
                  class="typography typography__bodyCopyM typography--left"
                >
                  List item 1
                </p>
              </div>
              <div
                class="list__itemValue"
              >
                <div
                  class="list__itemValueContent"
                >
                  <p
                    class="typography typography__bodyCopyM typography--left"
                  >
                    <strong>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam
                    </strong>
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li
            class="list__item list__item--withIcon list__item--divider list__item--ellipsis list__item--alignTop"
          >
            <div
              class="list__itemIcon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--sm shp-checkmark"
              />
            </div>
            <div
              class="list__itemContent"
            >
              <div
                class="list__itemLabel"
              >
                <p
                  class="typography typography__bodyCopyM typography--left"
                >
                  List item 2
                </p>
              </div>
              <div
                class="list__itemValue"
              >
                <div
                  class="list__itemValueContent"
                >
                  <p
                    class="typography typography__bodyCopyM typography--left"
                  >
                    <strong>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam
                    </strong>
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li
            class="list__item list__item--withIcon list__item--divider list__item--ellipsis list__item--alignTop"
          >
            <div
              class="list__itemIcon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--sm shp-checkmark"
              />
            </div>
            <div
              class="list__itemContent"
            >
              <div
                class="list__itemLabel"
              >
                <p
                  class="typography typography__bodyCopyM typography--left"
                >
                  List item 3
                </p>
              </div>
              <div
                class="list__itemValue"
              >
                <div
                  class="list__itemValueContent"
                >
                  <p
                    class="typography typography__bodyCopyM typography--left"
                  >
                    <strong>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam
                    </strong>
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li
            class="list__item list__item--withIcon list__item--divider list__item--ellipsis list__item--alignTop"
          >
            <div
              class="list__itemIcon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--sm shp-checkmark"
              />
            </div>
            <div
              class="list__itemContent"
            >
              <div
                class="list__itemLabel"
              >
                <p
                  class="typography typography__bodyCopyM typography--left"
                >
                  List item 4
                </p>
              </div>
              <div
                class="list__itemValue"
              >
                <div
                  class="list__itemValueContent"
                >
                  <p
                    class="typography typography__bodyCopyM typography--left"
                  >
                    <strong>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam
                    </strong>
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li
            class="list__item list__item--withIcon list__item--divider list__item--ellipsis list__item--alignTop"
          >
            <div
              class="list__itemIcon"
            >
              <span
                aria-hidden="true"
                class="shoptet-icon icon icon--default icon--sm shp-checkmark"
              />
            </div>
            <div
              class="list__itemContent"
            >
              <div
                class="list__itemLabel"
              >
                <p
                  class="typography typography__bodyCopyM typography--left"
                >
                  List item 5
                </p>
              </div>
              <div
                class="list__itemValue"
              >
                <div
                  class="list__itemValueContent"
                >
                  <p
                    class="typography typography__bodyCopyM typography--left"
                  >
                    <strong>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam
                    </strong>
                  </p>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div
        class="actionCard__buttons"
      >
        <button
          class="btn btn-secondary btn-md"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            Secondary
          </span>
        </button>
        <button
          class="btn btn-primary btn-md"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            Primary
          </span>
        </button>
      </div>
    </div>
  </div>
</div>
`);
  });
});