@veeqo/ui 0.0.3 → 0.0.6

package/src/components/Modal/__snapshots__/Modal.test.tsx.snap

@@ -1,1940 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Modal displays footer slot instead of if actions if provided 1`] = `
-<DocumentFragment>
-  .c5 {
-  box-sizing: border-box;
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 12px;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  line-height: 16px;
-  color: #37424d;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-style: normal;
-  font-weight: 600;
-  font-size: 24px;
-  line-height: 32px;
-  color: #37424D;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-letter-spacing: -0.019rem;
-  -moz-letter-spacing: -0.019rem;
-  -ms-letter-spacing: -0.019rem;
-  letter-spacing: -0.019rem;
-}
-
-.c9 {
-  box-sizing: border-box;
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 12px;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  line-height: 16px;
-  color: #37424d;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 12px;
-  line-height: 16px;
-  color: #637381;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-letter-spacing: 0;
-  -moz-letter-spacing: 0;
-  -ms-letter-spacing: 0;
-  letter-spacing: 0;
-}
-
-.c8 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  gap: 4px;
-}
-
-.c8 svg {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
-.c6 {
-  position: relative;
-  box-sizing: border-box;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-weight: 400;
-  border: 1px solid;
-  background-color: transparent;
-  white-space: nowrap;
-  --outline-width: 4px;
-  height: 40px;
-  padding-left: 8px;
-  padding-right: 8px;
-  border-radius: 8px;
-  font-size: 16px;
-}
-
-.c6:hover {
-  cursor: pointer;
-}
-
-.c6:disabled {
-  pointer-events: none;
-  cursor: unset !important;
-}
-
-.c6 > span {
-  position: relative;
-  top: -1px;
-}
-
-.c7 {
-  border-color: transparent;
-  box-shadow: none;
-  color: #37424D;
-}
-
-.c7:hover {
-  background-color: rgba(0,0,0,0.1);
-}
-
-.c7:active {
-  background-color: rgba(0,0,0,0.1);
-}
-
-.c7:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-  outline: 0;
-}
-
-.c7:disabled {
-  background-color: transparent;
-  border-color: transparent;
-}
-
-.c3 {
-  padding-top: 1.5rem;
-  padding-right: 1.5rem;
-  padding-left: 1.5rem;
-  margin-bottom: 1.5rem;
-}
-
-.c3 > * + * {
-  margin-top: 0.25rem;
-}
-
-.c4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c4 > *:first-child {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c2 {
-  position: relative;
-  width: 100%;
-  background-color: white;
-  border: 1px solid #DFE3E8;
-  box-shadow: 0px 1px 3px rgba(55,66,77,0.15);
-  border-radius: 0.5rem;
-  overflow: hidden;
-  box-sizing: border-box;
-}
-
-.c11 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  overflow-y: auto;
-  padding: 0 1.5rem;
-}
-
-.c0 {
-  padding: 0;
-  border: none;
-  border-radius: 0.5rem;
-  box-shadow: 0px 20px 25px rgba(27,33,38,0.2);
-  min-width: 360px;
-}
-
-.c0::backdrop {
-  -webkit-animation: fadeIn 0.25s ease forwards;
-  animation: fadeIn 0.25s ease forwards;
-}
-
-.c0 > .c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  max-height: 84vh;
-}
-
-.c0 > .c1 .c10 {
-  padding-bottom: 1.5rem;
-}
-
-.c0::backdrop {
-  background-color: rgba(55,66,77,0.5);
-}
-
-.c0:not([open]) {
-  display: block;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  -webkit-transform: translate(-50%,-50%);
-  -ms-transform: translate(-50%,-50%);
-  transform: translate(-50%,-50%);
-}
-
-@media (min-width:calc(640px + 1px)) and (max-width:720px) {
-  .c0 {
-    max-width: 100vw;
-  }
-}
-
-@media (min-width:720px) and (max-width:960px) {
-  .c0 {
-    max-width: 88vw;
-  }
-}
-
-@media (min-width:960px) and (max-width:1280px) {
-  .c0 {
-    max-width: 72vw;
-  }
-}
-
-@media (min-width:1280px) {
-  .c0 {
-    max-width: 52vw;
-  }
-}
-
-@media (max-width:720px) {
-  .c0 {
-    margin: 0;
-    width: 100%;
-    max-width: 100vw;
-    max-height: 100vh;
-  }
-
-  .c0,
-  .c0 > .c1 {
-    border-radius: 0;
-    height: 100%;
-    width: 100%;
-    max-height: unset;
-  }
-}
-
-<dialog
-    aria-describedby="modal_title"
-    class="c0"
-    open=""
-    style="opacity: 0; transform: translateY(-50px) translateZ(0);"
-  >
-    <div
-      class="c1 c2"
-    >
-      <header
-        class="c3"
-      >
-        <div
-          class="c4"
-        >
-          <h2
-            class="c5"
-            id="modal_title"
-          >
-            TEST TITLE
-          </h2>
-          <button
-            aria-label="Close"
-            class="c6 c7"
-          >
-            <span
-              class="c8"
-            >
-              <svg
-                fill="none"
-                height="1.5rem"
-                role="presentation"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M19 6.51071L17.4893 5L11.5 10.9893L5.51071 5L4 6.51071L9.98929 12.5L4 18.4893L5.51071 20L11.5 14.0107L17.4893 20L19 18.4893L13.0107 12.5L19 6.51071Z"
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </span>
-          </button>
-        </div>
-        <span
-          class="c9"
-        >
-          TEST SUBTITLE
-        </span>
-      </header>
-      <section
-        class="c10 c11"
-      >
-        <div
-          data-testid="main-content"
-        />
-      </section>
-      <div
-        data-testid="footer-slot"
-      />
-    </div>
-  </dialog>
-</DocumentFragment>
-`;
-
-exports[`Modal displays header and footer slots when provided 1`] = `
-<DocumentFragment>
-  .c2 {
-  position: relative;
-  width: 100%;
-  background-color: white;
-  border: 1px solid #DFE3E8;
-  box-shadow: 0px 1px 3px rgba(55,66,77,0.15);
-  border-radius: 0.5rem;
-  overflow: hidden;
-  box-sizing: border-box;
-}
-
-.c4 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  overflow-y: auto;
-  padding: 0 1.5rem;
-}
-
-.c0 {
-  padding: 0;
-  border: none;
-  border-radius: 0.5rem;
-  box-shadow: 0px 20px 25px rgba(27,33,38,0.2);
-  min-width: 360px;
-}
-
-.c0::backdrop {
-  -webkit-animation: fadeIn 0.25s ease forwards;
-  animation: fadeIn 0.25s ease forwards;
-}
-
-.c0 > .c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  max-height: 84vh;
-}
-
-.c0 > .c1 .c3 {
-  padding-bottom: 1.5rem;
-}
-
-.c0::backdrop {
-  background-color: rgba(55,66,77,0.5);
-}
-
-.c0:not([open]) {
-  display: block;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  -webkit-transform: translate(-50%,-50%);
-  -ms-transform: translate(-50%,-50%);
-  transform: translate(-50%,-50%);
-}
-
-@media (min-width:calc(640px + 1px)) and (max-width:720px) {
-  .c0 {
-    max-width: 100vw;
-  }
-}
-
-@media (min-width:720px) and (max-width:960px) {
-  .c0 {
-    max-width: 88vw;
-  }
-}
-
-@media (min-width:960px) and (max-width:1280px) {
-  .c0 {
-    max-width: 72vw;
-  }
-}
-
-@media (min-width:1280px) {
-  .c0 {
-    max-width: 52vw;
-  }
-}
-
-@media (max-width:720px) {
-  .c0 {
-    margin: 0;
-    width: 100%;
-    max-width: 100vw;
-    max-height: 100vh;
-  }
-
-  .c0,
-  .c0 > .c1 {
-    border-radius: 0;
-    height: 100%;
-    width: 100%;
-    max-height: unset;
-  }
-}
-
-<dialog
-    aria-describedby="modal_title"
-    class="c0"
-    open=""
-    style="opacity: 0; transform: translateY(-50px) translateZ(0);"
-  >
-    <div
-      class="c1 c2"
-    >
-      <div
-        data-testid="header-slot"
-      />
-      <section
-        class="c3 c4"
-      >
-        <div
-          data-testid="main-content"
-        />
-      </section>
-      <div
-        data-testid="footer-slot"
-      />
-    </div>
-  </dialog>
-</DocumentFragment>
-`;
-
-exports[`Modal displays header slot instead of title and subtitle if also provided 1`] = `
-<DocumentFragment>
-  .c2 {
-  position: relative;
-  width: 100%;
-  background-color: white;
-  border: 1px solid #DFE3E8;
-  box-shadow: 0px 1px 3px rgba(55,66,77,0.15);
-  border-radius: 0.5rem;
-  overflow: hidden;
-  box-sizing: border-box;
-}
-
-.c4 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  overflow-y: auto;
-  padding: 0 1.5rem;
-}
-
-.c0 {
-  padding: 0;
-  border: none;
-  border-radius: 0.5rem;
-  box-shadow: 0px 20px 25px rgba(27,33,38,0.2);
-  min-width: 360px;
-}
-
-.c0::backdrop {
-  -webkit-animation: fadeIn 0.25s ease forwards;
-  animation: fadeIn 0.25s ease forwards;
-}
-
-.c0 > .c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  max-height: 84vh;
-}
-
-.c0 > .c1 .c3 {
-  padding-bottom: 1.5rem;
-}
-
-.c0::backdrop {
-  background-color: rgba(55,66,77,0.5);
-}
-
-.c0:not([open]) {
-  display: block;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  -webkit-transform: translate(-50%,-50%);
-  -ms-transform: translate(-50%,-50%);
-  transform: translate(-50%,-50%);
-}
-
-@media (min-width:calc(640px + 1px)) and (max-width:720px) {
-  .c0 {
-    max-width: 100vw;
-  }
-}
-
-@media (min-width:720px) and (max-width:960px) {
-  .c0 {
-    max-width: 88vw;
-  }
-}
-
-@media (min-width:960px) and (max-width:1280px) {
-  .c0 {
-    max-width: 72vw;
-  }
-}
-
-@media (min-width:1280px) {
-  .c0 {
-    max-width: 52vw;
-  }
-}
-
-@media (max-width:720px) {
-  .c0 {
-    margin: 0;
-    width: 100%;
-    max-width: 100vw;
-    max-height: 100vh;
-  }
-
-  .c0,
-  .c0 > .c1 {
-    border-radius: 0;
-    height: 100%;
-    width: 100%;
-    max-height: unset;
-  }
-}
-
-<dialog
-    aria-describedby="modal_title"
-    class="c0"
-    open=""
-    style="opacity: 0; transform: translateY(-50px) translateZ(0);"
-  >
-    <div
-      class="c1 c2"
-    >
-      <div
-        data-testid="header-slot"
-      />
-      <section
-        class="c3 c4"
-      >
-        <div
-          data-testid="main-content"
-        />
-      </section>
-    </div>
-  </dialog>
-</DocumentFragment>
-`;
-
-exports[`Modal looks as expected with a footer slot provided 1`] = `
-<DocumentFragment>
-  .c5 {
-  box-sizing: border-box;
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 12px;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  line-height: 16px;
-  color: #37424d;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-style: normal;
-  font-weight: 600;
-  font-size: 24px;
-  line-height: 32px;
-  color: #37424D;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-letter-spacing: -0.019rem;
-  -moz-letter-spacing: -0.019rem;
-  -ms-letter-spacing: -0.019rem;
-  letter-spacing: -0.019rem;
-}
-
-.c9 {
-  box-sizing: border-box;
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 12px;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  line-height: 16px;
-  color: #37424d;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 12px;
-  line-height: 16px;
-  color: #637381;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-letter-spacing: 0;
-  -moz-letter-spacing: 0;
-  -ms-letter-spacing: 0;
-  letter-spacing: 0;
-}
-
-.c8 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  gap: 4px;
-}
-
-.c8 svg {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
-.c6 {
-  position: relative;
-  box-sizing: border-box;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-weight: 400;
-  border: 1px solid;
-  background-color: transparent;
-  white-space: nowrap;
-  --outline-width: 4px;
-  height: 40px;
-  padding-left: 8px;
-  padding-right: 8px;
-  border-radius: 8px;
-  font-size: 16px;
-}
-
-.c6:hover {
-  cursor: pointer;
-}
-
-.c6:disabled {
-  pointer-events: none;
-  cursor: unset !important;
-}
-
-.c6 > span {
-  position: relative;
-  top: -1px;
-}
-
-.c7 {
-  border-color: transparent;
-  box-shadow: none;
-  color: #37424D;
-}
-
-.c7:hover {
-  background-color: rgba(0,0,0,0.1);
-}
-
-.c7:active {
-  background-color: rgba(0,0,0,0.1);
-}
-
-.c7:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-  outline: 0;
-}
-
-.c7:disabled {
-  background-color: transparent;
-  border-color: transparent;
-}
-
-.c3 {
-  padding-top: 1.5rem;
-  padding-right: 1.5rem;
-  padding-left: 1.5rem;
-  margin-bottom: 1.5rem;
-}
-
-.c3 > * + * {
-  margin-top: 0.25rem;
-}
-
-.c4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c4 > *:first-child {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c2 {
-  position: relative;
-  width: 100%;
-  background-color: white;
-  border: 1px solid #DFE3E8;
-  box-shadow: 0px 1px 3px rgba(55,66,77,0.15);
-  border-radius: 0.5rem;
-  overflow: hidden;
-  box-sizing: border-box;
-}
-
-.c11 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  overflow-y: auto;
-  padding: 0 1.5rem;
-}
-
-.c0 {
-  padding: 0;
-  border: none;
-  border-radius: 0.5rem;
-  box-shadow: 0px 20px 25px rgba(27,33,38,0.2);
-  min-width: 360px;
-}
-
-.c0::backdrop {
-  -webkit-animation: fadeIn 0.25s ease forwards;
-  animation: fadeIn 0.25s ease forwards;
-}
-
-.c0 > .c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  max-height: 84vh;
-}
-
-.c0 > .c1 .c10 {
-  padding-bottom: 1.5rem;
-}
-
-.c0::backdrop {
-  background-color: rgba(55,66,77,0.5);
-}
-
-.c0:not([open]) {
-  display: block;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  -webkit-transform: translate(-50%,-50%);
-  -ms-transform: translate(-50%,-50%);
-  transform: translate(-50%,-50%);
-}
-
-@media (min-width:calc(640px + 1px)) and (max-width:720px) {
-  .c0 {
-    max-width: 100vw;
-  }
-}
-
-@media (min-width:720px) and (max-width:960px) {
-  .c0 {
-    max-width: 88vw;
-  }
-}
-
-@media (min-width:960px) and (max-width:1280px) {
-  .c0 {
-    max-width: 72vw;
-  }
-}
-
-@media (min-width:1280px) {
-  .c0 {
-    max-width: 52vw;
-  }
-}
-
-@media (max-width:720px) {
-  .c0 {
-    margin: 0;
-    width: 100%;
-    max-width: 100vw;
-    max-height: 100vh;
-  }
-
-  .c0,
-  .c0 > .c1 {
-    border-radius: 0;
-    height: 100%;
-    width: 100%;
-    max-height: unset;
-  }
-}
-
-<dialog
-    aria-describedby="modal_title"
-    class="c0"
-    open=""
-    style="opacity: 0; transform: translateY(-50px) translateZ(0);"
-  >
-    <div
-      class="c1 c2"
-    >
-      <header
-        class="c3"
-      >
-        <div
-          class="c4"
-        >
-          <h2
-            class="c5"
-            id="modal_title"
-          >
-            TEST TITLE
-          </h2>
-          <button
-            aria-label="Close"
-            class="c6 c7"
-          >
-            <span
-              class="c8"
-            >
-              <svg
-                fill="none"
-                height="1.5rem"
-                role="presentation"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M19 6.51071L17.4893 5L11.5 10.9893L5.51071 5L4 6.51071L9.98929 12.5L4 18.4893L5.51071 20L11.5 14.0107L17.4893 20L19 18.4893L13.0107 12.5L19 6.51071Z"
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </span>
-          </button>
-        </div>
-        <span
-          class="c9"
-        >
-          TEST SUBTITLE
-        </span>
-      </header>
-      <section
-        class="c10 c11"
-      >
-        <div
-          data-testid="main-content"
-        />
-      </section>
-      <div
-        data-testid="footer-slot"
-      />
-    </div>
-  </dialog>
-</DocumentFragment>
-`;
-
-exports[`Modal looks as expected with a header slot provided 1`] = `
-<DocumentFragment>
-  .c13 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  gap: 8px;
-}
-
-.c13 svg {
-  width: 1rem;
-  height: 1rem;
-}
-
-.c9 {
-  position: relative;
-  box-sizing: border-box;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-weight: 400;
-  border: 1px solid;
-  background-color: transparent;
-  white-space: nowrap;
-  --outline-width: 4px;
-  height: 40px;
-  padding-left: 24px;
-  padding-right: 24px;
-  border-radius: 8px;
-  font-size: 16px;
-}
-
-.c9:hover {
-  cursor: pointer;
-}
-
-.c9:disabled {
-  pointer-events: none;
-  cursor: unset !important;
-}
-
-.c9 > span {
-  position: relative;
-  top: -1px;
-}
-
-.c10 {
-  border-color: #CDD1D5;
-  background-color: white;
-  box-shadow: 0 1px 3px rgba(55,66,77,0.15);
-  color: #37424D;
-}
-
-.c10:hover {
-  background-color: #FAFAFB;
-}
-
-.c10:active {
-  background-color: #FAFAFB;
-  border-color: #0079D1;
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-
-.c10:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-  outline: 0;
-}
-
-.c10:disabled {
-  box-shadow: none !important;
-  background-color: #DFE3E8 !important;
-  border-color: #DFE3E8 !important;
-  color: #637381 !important;
-}
-
-.c11 {
-  background-color: #0079D1;
-  border-color: #0079D1;
-  color: white;
-}
-
-.c11:hover {
-  background-color: #005A9C;
-  border-color: #005A9C;
-}
-
-.c11:active {
-  background-color: #005A9C;
-  border-color: #005A9C;
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-
-.c11:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-
-.c12 {
-  background-color: #EB5757;
-  border-color: #EB5757;
-  color: white;
-}
-
-.c12:hover {
-  background-color: #A53D3D;
-  border-color: #A53D3D;
-}
-
-.c12:active {
-  background-color: #A53D3D;
-  border-color: #A53D3D;
-  box-shadow: 0 0 0 var(--outline-width) #F7BCBC;
-}
-
-.c12:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #F7BCBC;
-}
-
-.c6 {
-  margin-top: 1rem;
-  padding: 1.5rem;
-  z-index: 2;
-}
-
-.c2 {
-  position: relative;
-  width: 100%;
-  background-color: white;
-  border: 1px solid #DFE3E8;
-  box-shadow: 0px 1px 3px rgba(55,66,77,0.15);
-  border-radius: 0.5rem;
-  overflow: hidden;
-  box-sizing: border-box;
-}
-
-.c4 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  overflow-y: auto;
-  padding: 0 1.5rem;
-}
-
-.c0 {
-  padding: 0;
-  border: none;
-  border-radius: 0.5rem;
-  box-shadow: 0px 20px 25px rgba(27,33,38,0.2);
-  min-width: 360px;
-}
-
-.c0::backdrop {
-  -webkit-animation: fadeIn 0.25s ease forwards;
-  animation: fadeIn 0.25s ease forwards;
-}
-
-.c0 > .c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  max-height: 84vh;
-}
-
-.c0 > .c1 .c3 {
-  padding-bottom: 1.5rem;
-}
-
-.c0 > .c1 .c5 {
-  margin-top: 0;
-}
-
-.c0::backdrop {
-  background-color: rgba(55,66,77,0.5);
-}
-
-.c0:not([open]) {
-  display: block;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  -webkit-transform: translate(-50%,-50%);
-  -ms-transform: translate(-50%,-50%);
-  transform: translate(-50%,-50%);
-}
-
-.c7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c7 > * {
-  -webkit-flex: undefined;
-  -ms-flex: undefined;
-  flex: undefined;
-}
-
-.c7 > * + * {
-  margin-left: 1rem;
-}
-
-.c8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c8 > * {
-  -webkit-flex: undefined;
-  -ms-flex: undefined;
-  flex: undefined;
-}
-
-.c8 > * + * {
-  margin-left: 1rem;
-}
-
-@media (min-width:calc(640px + 1px)) and (max-width:720px) {
-  .c0 {
-    max-width: 100vw;
-  }
-}
-
-@media (min-width:720px) and (max-width:960px) {
-  .c0 {
-    max-width: 88vw;
-  }
-}
-
-@media (min-width:960px) and (max-width:1280px) {
-  .c0 {
-    max-width: 72vw;
-  }
-}
-
-@media (min-width:1280px) {
-  .c0 {
-    max-width: 52vw;
-  }
-}
-
-@media (max-width:720px) {
-  .c0 {
-    margin: 0;
-    width: 100%;
-    max-width: 100vw;
-    max-height: 100vh;
-  }
-
-  .c0,
-  .c0 > .c1 {
-    border-radius: 0;
-    height: 100%;
-    width: 100%;
-    max-height: unset;
-  }
-}
-
-<dialog
-    aria-describedby="modal_title"
-    class="c0"
-    open=""
-    style="opacity: 0; transform: translateY(-50px) translateZ(0);"
-  >
-    <div
-      class="c1 c2"
-    >
-      <div
-        data-testid="header-slot"
-      />
-      <section
-        class="c3 c4"
-      >
-        <div
-          data-testid="main-content"
-        />
-      </section>
-      <footer
-        class="c5 c6"
-      >
-        <div
-          class="c7"
-          direction="horizontal"
-        >
-          <div
-            class="c8"
-            data-testid="left-actions-container"
-            direction="horizontal"
-          >
-            <button
-              class="c9 c10 c11 c12"
-              type="button"
-            >
-              <span
-                class="c13"
-              >
-                <span>
-                  Cancel
-                </span>
-              </span>
-            </button>
-          </div>
-          <div
-            class="c8"
-            data-testid="right-actions-container"
-            direction="horizontal"
-          >
-            <button
-              class="c9 c10 c11"
-              type="button"
-            >
-              <span
-                class="c13"
-              >
-                <span>
-                  Save
-                </span>
-              </span>
-            </button>
-            <button
-              class="c9 c10"
-              disabled=""
-              type="button"
-            >
-              <span
-                class="c13"
-              >
-                <span>
-                  Cancel
-                </span>
-              </span>
-            </button>
-          </div>
-        </div>
-      </footer>
-    </div>
-  </dialog>
-</DocumentFragment>
-`;
-
-exports[`Modal looks as expected without slots 1`] = `
-<DocumentFragment>
-  .c5 {
-  box-sizing: border-box;
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 12px;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  line-height: 16px;
-  color: #37424d;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-style: normal;
-  font-weight: 600;
-  font-size: 24px;
-  line-height: 32px;
-  color: #37424D;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-letter-spacing: -0.019rem;
-  -moz-letter-spacing: -0.019rem;
-  -ms-letter-spacing: -0.019rem;
-  letter-spacing: -0.019rem;
-}
-
-.c9 {
-  box-sizing: border-box;
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 12px;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  line-height: 16px;
-  color: #37424d;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 12px;
-  line-height: 16px;
-  color: #637381;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-letter-spacing: 0;
-  -moz-letter-spacing: 0;
-  -ms-letter-spacing: 0;
-  letter-spacing: 0;
-}
-
-.c8 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  gap: 4px;
-}
-
-.c8 svg {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
-.c20 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  gap: 8px;
-}
-
-.c20 svg {
-  width: 1rem;
-  height: 1rem;
-}
-
-.c6 {
-  position: relative;
-  box-sizing: border-box;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-weight: 400;
-  border: 1px solid;
-  background-color: transparent;
-  white-space: nowrap;
-  --outline-width: 4px;
-  height: 40px;
-  padding-left: 8px;
-  padding-right: 8px;
-  border-radius: 8px;
-  font-size: 16px;
-}
-
-.c6:hover {
-  cursor: pointer;
-}
-
-.c6:disabled {
-  pointer-events: none;
-  cursor: unset !important;
-}
-
-.c6 > span {
-  position: relative;
-  top: -1px;
-}
-
-.c16 {
-  position: relative;
-  box-sizing: border-box;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-weight: 400;
-  border: 1px solid;
-  background-color: transparent;
-  white-space: nowrap;
-  --outline-width: 4px;
-  height: 40px;
-  padding-left: 24px;
-  padding-right: 24px;
-  border-radius: 8px;
-  font-size: 16px;
-}
-
-.c16:hover {
-  cursor: pointer;
-}
-
-.c16:disabled {
-  pointer-events: none;
-  cursor: unset !important;
-}
-
-.c16 > span {
-  position: relative;
-  top: -1px;
-}
-
-.c17 {
-  border-color: #CDD1D5;
-  background-color: white;
-  box-shadow: 0 1px 3px rgba(55,66,77,0.15);
-  color: #37424D;
-}
-
-.c17:hover {
-  background-color: #FAFAFB;
-}
-
-.c17:active {
-  background-color: #FAFAFB;
-  border-color: #0079D1;
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-
-.c17:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-  outline: 0;
-}
-
-.c17:disabled {
-  box-shadow: none !important;
-  background-color: #DFE3E8 !important;
-  border-color: #DFE3E8 !important;
-  color: #637381 !important;
-}
-
-.c18 {
-  background-color: #0079D1;
-  border-color: #0079D1;
-  color: white;
-}
-
-.c18:hover {
-  background-color: #005A9C;
-  border-color: #005A9C;
-}
-
-.c18:active {
-  background-color: #005A9C;
-  border-color: #005A9C;
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-
-.c18:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-
-.c19 {
-  background-color: #EB5757;
-  border-color: #EB5757;
-  color: white;
-}
-
-.c19:hover {
-  background-color: #A53D3D;
-  border-color: #A53D3D;
-}
-
-.c19:active {
-  background-color: #A53D3D;
-  border-color: #A53D3D;
-  box-shadow: 0 0 0 var(--outline-width) #F7BCBC;
-}
-
-.c19:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #F7BCBC;
-}
-
-.c7 {
-  border-color: transparent;
-  box-shadow: none;
-  color: #37424D;
-}
-
-.c7:hover {
-  background-color: rgba(0,0,0,0.1);
-}
-
-.c7:active {
-  background-color: rgba(0,0,0,0.1);
-}
-
-.c7:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-  outline: 0;
-}
-
-.c7:disabled {
-  background-color: transparent;
-  border-color: transparent;
-}
-
-.c3 {
-  padding-top: 1.5rem;
-  padding-right: 1.5rem;
-  padding-left: 1.5rem;
-  margin-bottom: 1.5rem;
-}
-
-.c3 > * + * {
-  margin-top: 0.25rem;
-}
-
-.c4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c4 > *:first-child {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c13 {
-  margin-top: 1rem;
-  padding: 1.5rem;
-  z-index: 2;
-}
-
-.c2 {
-  position: relative;
-  width: 100%;
-  background-color: white;
-  border: 1px solid #DFE3E8;
-  box-shadow: 0px 1px 3px rgba(55,66,77,0.15);
-  border-radius: 0.5rem;
-  overflow: hidden;
-  box-sizing: border-box;
-}
-
-.c11 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  overflow-y: auto;
-  padding: 0 1.5rem;
-}
-
-.c0 {
-  padding: 0;
-  border: none;
-  border-radius: 0.5rem;
-  box-shadow: 0px 20px 25px rgba(27,33,38,0.2);
-  min-width: 360px;
-}
-
-.c0::backdrop {
-  -webkit-animation: fadeIn 0.25s ease forwards;
-  animation: fadeIn 0.25s ease forwards;
-}
-
-.c0 > .c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  max-height: 84vh;
-}
-
-.c0 > .c1 .c10 {
-  padding-bottom: 1.5rem;
-}
-
-.c0 > .c1 .c12 {
-  margin-top: 0;
-}
-
-.c0::backdrop {
-  background-color: rgba(55,66,77,0.5);
-}
-
-.c0:not([open]) {
-  display: block;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  -webkit-transform: translate(-50%,-50%);
-  -ms-transform: translate(-50%,-50%);
-  transform: translate(-50%,-50%);
-}
-
-.c14 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c14 > * {
-  -webkit-flex: undefined;
-  -ms-flex: undefined;
-  flex: undefined;
-}
-
-.c14 > * + * {
-  margin-left: 1rem;
-}
-
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c15 > * {
-  -webkit-flex: undefined;
-  -ms-flex: undefined;
-  flex: undefined;
-}
-
-.c15 > * + * {
-  margin-left: 1rem;
-}
-
-@media (min-width:calc(640px + 1px)) and (max-width:720px) {
-  .c0 {
-    max-width: 100vw;
-  }
-}
-
-@media (min-width:720px) and (max-width:960px) {
-  .c0 {
-    max-width: 88vw;
-  }
-}
-
-@media (min-width:960px) and (max-width:1280px) {
-  .c0 {
-    max-width: 72vw;
-  }
-}
-
-@media (min-width:1280px) {
-  .c0 {
-    max-width: 52vw;
-  }
-}
-
-@media (max-width:720px) {
-  .c0 {
-    margin: 0;
-    width: 100%;
-    max-width: 100vw;
-    max-height: 100vh;
-  }
-
-  .c0,
-  .c0 > .c1 {
-    border-radius: 0;
-    height: 100%;
-    width: 100%;
-    max-height: unset;
-  }
-}
-
-<dialog
-    aria-describedby="modal_title"
-    class="c0"
-    open=""
-    style="opacity: 0; transform: translateY(-50px) translateZ(0);"
-  >
-    <div
-      class="c1 c2"
-    >
-      <header
-        class="c3"
-      >
-        <div
-          class="c4"
-        >
-          <h2
-            class="c5"
-            id="modal_title"
-          >
-            TEST TITLE
-          </h2>
-          <button
-            aria-label="Close"
-            class="c6 c7"
-          >
-            <span
-              class="c8"
-            >
-              <svg
-                fill="none"
-                height="1.5rem"
-                role="presentation"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M19 6.51071L17.4893 5L11.5 10.9893L5.51071 5L4 6.51071L9.98929 12.5L4 18.4893L5.51071 20L11.5 14.0107L17.4893 20L19 18.4893L13.0107 12.5L19 6.51071Z"
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </span>
-          </button>
-        </div>
-        <span
-          class="c9"
-        >
-          TEST SUBTITLE
-        </span>
-      </header>
-      <section
-        class="c10 c11"
-      >
-        <div
-          data-testid="main-content"
-        />
-      </section>
-      <footer
-        class="c12 c13"
-      >
-        <div
-          class="c14"
-          direction="horizontal"
-        >
-          <div
-            class="c15"
-            data-testid="left-actions-container"
-            direction="horizontal"
-          >
-            <button
-              class="c16 c17 c18 c19"
-              type="button"
-            >
-              <span
-                class="c20"
-              >
-                <span>
-                  Cancel
-                </span>
-              </span>
-            </button>
-          </div>
-          <div
-            class="c15"
-            data-testid="right-actions-container"
-            direction="horizontal"
-          >
-            <button
-              class="c16 c17 c18"
-              type="button"
-            >
-              <span
-                class="c20"
-              >
-                <span>
-                  Save
-                </span>
-              </span>
-            </button>
-            <button
-              class="c16 c17"
-              disabled=""
-              type="button"
-            >
-              <span
-                class="c20"
-              >
-                <span>
-                  Cancel
-                </span>
-              </span>
-            </button>
-          </div>
-        </div>
-      </footer>
-    </div>
-  </dialog>
-</DocumentFragment>
-`;