@veeqo/ui 0.0.3 → 0.0.6

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

@@ -1,906 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PageHeader it renders correctly 1`] = `
-.c1 {
-  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: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c1 > * {
-  -webkit-flex: undefined;
-  -ms-flex: undefined;
-  flex: undefined;
-}
-
-.c1 > * + * {
-  margin-top: 1rem;
-}
-
-.c6 {
-  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;
-}
-
-.c6 > * {
-  -webkit-flex: undefined;
-  -ms-flex: undefined;
-  flex: undefined;
-}
-
-.c6 > * + * {
-  margin-left: 1.5rem;
-}
-
-.c8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c8 > * {
-  -webkit-flex: undefined;
-  -ms-flex: undefined;
-  flex: undefined;
-}
-
-.c8 > * + * {
-  margin-top: 1rem;
-}
-
-.c12 {
-  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: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c12 > * {
-  -webkit-flex: undefined;
-  -ms-flex: undefined;
-  flex: undefined;
-}
-
-.c12 > * + * {
-  margin-left: 0.5rem;
-}
-
-.c20 {
-  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: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c20 > * {
-  -webkit-flex: undefined;
-  -ms-flex: undefined;
-  flex: undefined;
-}
-
-.c20 > * + * {
-  margin-left: 1rem;
-}
-
-.c4 {
-  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;
-}
-
-.c4 svg {
-  width: 1rem;
-  height: 1rem;
-}
-
-.c19 {
-  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;
-}
-
-.c19 svg {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
-.c13 {
-  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: 16px;
-  padding-right: 24px;
-  border-radius: 8px;
-  font-size: 16px;
-}
-
-.c13:hover {
-  cursor: pointer;
-}
-
-.c13:disabled {
-  pointer-events: none;
-  cursor: unset !important;
-}
-
-.c13 > 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: 16px;
-  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 {
-  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;
-}
-
-.c17:hover {
-  cursor: pointer;
-}
-
-.c17:disabled {
-  pointer-events: none;
-  cursor: unset !important;
-}
-
-.c17 > span {
-  position: relative;
-  top: -1px;
-}
-
-.c14 {
-  border-color: #CDD1D5;
-  background-color: white;
-  box-shadow: 0 1px 3px rgba(55,66,77,0.15);
-  color: #37424D;
-}
-
-.c14:hover {
-  background-color: #FAFAFB;
-}
-
-.c14:active {
-  background-color: #FAFAFB;
-  border-color: #0079D1;
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-
-.c14:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-  outline: 0;
-}
-
-.c14:disabled {
-  box-shadow: none !important;
-  background-color: #DFE3E8 !important;
-  border-color: #DFE3E8 !important;
-  color: #637381 !important;
-}
-
-.c18 {
-  border-color: #CDD1D5;
-  background-color: white;
-  box-shadow: 0 1px 3px rgba(55,66,77,0.15);
-  color: #0079D1;
-}
-
-.c18:hover {
-  background-color: #FAFAFB;
-}
-
-.c18:active {
-  background-color: #FAFAFB;
-  border-color: #0079D1;
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-
-.c18:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-  outline: 0;
-}
-
-.c18:disabled {
-  box-shadow: none !important;
-  background-color: #DFE3E8 !important;
-  border-color: #DFE3E8 !important;
-  color: #637381 !important;
-}
-
-.c15 {
-  background-color: #0079D1;
-  border-color: #0079D1;
-  color: white;
-}
-
-.c15:hover {
-  background-color: #005A9C;
-  border-color: #005A9C;
-}
-
-.c15:active {
-  background-color: #005A9C;
-  border-color: #005A9C;
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-
-.c15:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-
-.c2 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: 0;
-  background-color: transparent;
-  padding: 0;
-  font: inherit;
-}
-
-.c2:hover {
-  cursor: pointer;
-}
-
-.c3 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-size: 14px;
-  font-weight: normal;
-  line-height: 20px;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  color: #0079D1;
-}
-
-.c3:hover {
-  color: #005A9C;
-}
-
-.c3 > * + * {
-  margin-left: 0.25rem;
-}
-
-.c3 > span {
-  position: relative;
-  top: -1px;
-}
-
-.c0 {
-  padding: 1rem 1.5rem;
-  background-color: white;
-  box-shadow: 0px 4px 6px rgba(27,33,38,0.2);
-}
-
-.c9 {
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-size: 28px;
-  font-weight: 600;
-  margin: unset;
-  line-height: 1;
-}
-
-.c10 {
-  margin: 0.75rem 0 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: normal;
-  font-size: 20px;
-  line-height: 28px;
-}
-
-.c7 {
-  border-radius: 0.25rem;
-  border: 1px solid #DFE3E8;
-  object-fit: cover;
-}
-
-.c11 {
-  height: 100%;
-  display: grid;
-  grid-template-rows: 1fr auto;
-  gap: 1rem;
-}
-
-.c21 {
-  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;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-size: 14px;
-  font-weight: normal;
-  line-height: 20px;
-  color: #0079D1;
-}
-
-.c21:hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c21 > * + * {
-  margin-left: 0.25rem;
-}
-
-.c5 {
-  width: 100%;
-  display: grid;
-  grid-template-columns: 1fr minmax(312px,auto);
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  grid-gap: 1.5rem;
-  -webkit-transition: all 0.2s ease-in-out;
-  transition: all 0.2s ease-in-out;
-}
-
-.c5 > *:nth-child(2) {
-  opacity: 1.0;
-  -webkit-transition: opacity 0.2s;
-  transition: opacity 0.2s;
-}
-
-<div>
-  <header
-    class="c0"
-  >
-    <div
-      class="c1"
-    >
-      <button
-        class="c2 c3"
-      >
-        <span
-          class="c4"
-        >
-          <svg
-            fill="none"
-            viewBox="0 0 16 16"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              clip-rule="evenodd"
-              d="M10.44 11.06L7.38667 8L10.44 4.94L9.5 4L5.5 8L9.5 12L10.44 11.06Z"
-              fill="currentColor"
-              fill-rule="evenodd"
-            />
-          </svg>
-          <span>
-            Go back
-          </span>
-        </span>
-      </button>
-      <div
-        class="c5"
-      >
-        <div
-          class="c6"
-          direction="horizontal"
-          spacing="md"
-        >
-          <img
-            alt=""
-            class="c7"
-            height="72"
-            src="https://source.unsplash.com/random"
-            width="72"
-          />
-          <div
-            style="flex: 1;"
-          >
-            <div
-              class="c8"
-            >
-              <h1
-                class="c9"
-              >
-                Page title
-              </h1>
-              <p>
-                Custom accessory goes here
-              </p>
-              <p
-                class="c10"
-              >
-                Page subtitle
-              </p>
-            </div>
-          </div>
-        </div>
-        <div
-          class="c11"
-        >
-          <div
-            class="c12"
-            direction="horizontal"
-            spacing="sm"
-          >
-            <button
-              class="c13 c14 c15"
-            >
-              <span
-                class="c4"
-              >
-                add
-                <span>
-                  Primary action
-                </span>
-              </span>
-            </button>
-            <button
-              class="c16 c14"
-            >
-              <span
-                class="c4"
-              >
-                <span>
-                  Actions
-                </span>
-                <svg
-                  fill="none"
-                  style="width: 1rem; height: 1rem;"
-                  viewBox="0 0 16 16"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M4 6L8 10L12 6H4Z"
-                    fill="currentColor"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </span>
-            </button>
-            <button
-              class="c17 c18"
-            >
-              <span
-                class="c19"
-              >
-                <svg
-                  fill="none"
-                  viewBox="0 0 16 16"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M10.44 11.06L7.38667 8L10.44 4.94L9.5 4L5.5 8L9.5 12L10.44 11.06Z"
-                    fill="currentColor"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </span>
-            </button>
-            <button
-              class="c17 c18"
-            >
-              <span
-                class="c19"
-              >
-                <svg
-                  fill="none"
-                  viewBox="0 0 16 16"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M5.99994 11.06L9.05327 8L5.99994 4.94L6.93994 4L10.9399 8L6.93994 12L5.99994 11.06Z"
-                    fill="currentColor"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </span>
-            </button>
-          </div>
-          <div
-            class="c20"
-            direction="horizontal"
-          >
-            <button
-              class="c2 c21"
-            >
-              <span>
-                Toggle sidebar
-              </span>
-              <svg
-                fill="none"
-                viewBox="0 0 16 16"
-                width="1.5rem"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M5.99994 11.06L9.05327 8L5.99994 4.94L6.93994 4L10.9399 8L6.93994 12L5.99994 11.06Z"
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </header>
-</div>
-`;
-
-exports[`PageHeader it renders just the title correctly 1`] = `
-.c1 {
-  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: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c1 > * {
-  -webkit-flex: undefined;
-  -ms-flex: undefined;
-  flex: undefined;
-}
-
-.c1 > * + * {
-  margin-top: 1rem;
-}
-
-.c3 {
-  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;
-}
-
-.c3 > * {
-  -webkit-flex: undefined;
-  -ms-flex: undefined;
-  flex: undefined;
-}
-
-.c3 > * + * {
-  margin-left: 1.5rem;
-}
-
-.c4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c4 > * {
-  -webkit-flex: undefined;
-  -ms-flex: undefined;
-  flex: undefined;
-}
-
-.c4 > * + * {
-  margin-top: 1rem;
-}
-
-.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: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c7 > * {
-  -webkit-flex: undefined;
-  -ms-flex: undefined;
-  flex: undefined;
-}
-
-.c7 > * + * {
-  margin-left: 0.5rem;
-}
-
-.c0 {
-  padding: 1rem 1.5rem;
-  background-color: white;
-}
-
-.c5 {
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-size: 28px;
-  font-weight: 600;
-  margin: unset;
-  line-height: 1;
-}
-
-.c6 {
-  height: 100%;
-  display: grid;
-  grid-template-rows: 1fr auto;
-  gap: 1rem;
-}
-
-.c2 {
-  width: 100%;
-  display: grid;
-  grid-template-columns: 1fr minmax(312px,auto);
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  grid-gap: 1.5rem;
-  -webkit-transition: all 0.2s ease-in-out;
-  transition: all 0.2s ease-in-out;
-}
-
-.c2 > *:nth-child(2) {
-  opacity: 1.0;
-  -webkit-transition: opacity 0.2s;
-  transition: opacity 0.2s;
-}
-
-<div>
-  <header
-    class="c0"
-  >
-    <div
-      class="c1"
-    >
-      <div
-        class="c2"
-      >
-        <div
-          class="c3"
-          direction="horizontal"
-          spacing="md"
-        >
-          <div
-            style="flex: 1;"
-          >
-            <div
-              class="c4"
-            >
-              <h1
-                class="c5"
-              >
-                Page title
-              </h1>
-            </div>
-          </div>
-        </div>
-        <div
-          class="c6"
-        >
-          <div
-            class="c7"
-            direction="horizontal"
-            spacing="sm"
-          />
-        </div>
-      </div>
-    </div>
-  </header>
-</div>
-`;