@veeqo/ui 0.0.3 → 0.0.6

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

@@ -1,1570 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Button it renders correctly 1`] = `
-.c2 {
-  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;
-}
-
-.c2 svg {
-  width: 1rem;
-  height: 1rem;
-}
-
-.c0 {
-  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;
-}
-
-.c0:hover {
-  cursor: pointer;
-}
-
-.c0:disabled {
-  pointer-events: none;
-  cursor: unset !important;
-}
-
-.c0 > span {
-  position: relative;
-  top: -1px;
-}
-
-.c1 {
-  border-color: #CDD1D5;
-  background-color: white;
-  box-shadow: 0 1px 3px rgba(55,66,77,0.15);
-  color: #37424D;
-}
-
-.c1:hover {
-  background-color: #FAFAFB;
-}
-
-.c1:active {
-  background-color: #FAFAFB;
-  border-color: #0079D1;
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-
-.c1:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-  outline: 0;
-}
-
-.c1:disabled {
-  box-shadow: none !important;
-  background-color: #DFE3E8 !important;
-  border-color: #DFE3E8 !important;
-  color: #637381 !important;
-}
-
-<div>
-  <button
-    class="c0 c1"
-  >
-    <span
-      class="c2"
-    >
-      <span>
-        Default button
-      </span>
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Button it renders destructive variant correctly 1`] = `
-.c3 {
-  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;
-}
-
-.c3 svg {
-  width: 1rem;
-  height: 1rem;
-}
-
-.c0 {
-  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;
-}
-
-.c0:hover {
-  cursor: pointer;
-}
-
-.c0:disabled {
-  pointer-events: none;
-  cursor: unset !important;
-}
-
-.c0 > span {
-  position: relative;
-  top: -1px;
-}
-
-.c1 {
-  border-color: #CDD1D5;
-  background-color: white;
-  box-shadow: 0 1px 3px rgba(55,66,77,0.15);
-  color: #37424D;
-}
-
-.c1:hover {
-  background-color: #FAFAFB;
-}
-
-.c1:active {
-  background-color: #FAFAFB;
-  border-color: #0079D1;
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-
-.c1:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-  outline: 0;
-}
-
-.c1:disabled {
-  box-shadow: none !important;
-  background-color: #DFE3E8 !important;
-  border-color: #DFE3E8 !important;
-  color: #637381 !important;
-}
-
-.c2 {
-  color: #EB5757;
-}
-
-.c2:hover {
-  color: #A53D3D;
-}
-
-.c2:active {
-  border-color: #EB5757;
-  box-shadow: 0 0 0 var(--outline-width) #F7BCBC;
-  color: #A53D3D;
-}
-
-.c2:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #F7BCBC;
-}
-
-<div>
-  <button
-    class="c0 c1 c2"
-  >
-    <span
-      class="c3"
-    >
-      <span>
-        Destructive button
-      </span>
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Button it renders dropdown icon correctly 1`] = `
-.c2 {
-  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;
-}
-
-.c2 svg {
-  width: 1rem;
-  height: 1rem;
-}
-
-.c0 {
-  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;
-}
-
-.c0:hover {
-  cursor: pointer;
-}
-
-.c0:disabled {
-  pointer-events: none;
-  cursor: unset !important;
-}
-
-.c0 > span {
-  position: relative;
-  top: -1px;
-}
-
-.c1 {
-  border-color: #CDD1D5;
-  background-color: white;
-  box-shadow: 0 1px 3px rgba(55,66,77,0.15);
-  color: #37424D;
-}
-
-.c1:hover {
-  background-color: #FAFAFB;
-}
-
-.c1:active {
-  background-color: #FAFAFB;
-  border-color: #0079D1;
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-
-.c1:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-  outline: 0;
-}
-
-.c1:disabled {
-  box-shadow: none !important;
-  background-color: #DFE3E8 !important;
-  border-color: #DFE3E8 !important;
-  color: #637381 !important;
-}
-
-<div>
-  <button
-    class="c0 c1"
-  >
-    <span
-      class="c2"
-    >
-      <span>
-        Dropdown button
-      </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>
-</div>
-`;
-
-exports[`Button it renders flat variant correctly 1`] = `
-.c2 {
-  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;
-}
-
-.c2 svg {
-  width: 1rem;
-  height: 1rem;
-}
-
-.c0 {
-  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;
-}
-
-.c0:hover {
-  cursor: pointer;
-}
-
-.c0:disabled {
-  pointer-events: none;
-  cursor: unset !important;
-}
-
-.c0 > span {
-  position: relative;
-  top: -1px;
-}
-
-.c1 {
-  border-color: transparent;
-  box-shadow: none;
-  color: #37424D;
-}
-
-.c1:hover {
-  background-color: rgba(0,0,0,0.1);
-}
-
-.c1:active {
-  background-color: rgba(0,0,0,0.1);
-}
-
-.c1:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-  outline: 0;
-}
-
-.c1:disabled {
-  background-color: transparent;
-  border-color: transparent;
-}
-
-<div>
-  <button
-    class="c0 c1"
-  >
-    <span
-      class="c2"
-    >
-      <span>
-        Flat button
-      </span>
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Button it renders icon with text correctly 1`] = `
-.c2 {
-  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;
-}
-
-.c2 svg {
-  width: 1rem;
-  height: 1rem;
-}
-
-.c0 {
-  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;
-}
-
-.c0:hover {
-  cursor: pointer;
-}
-
-.c0:disabled {
-  pointer-events: none;
-  cursor: unset !important;
-}
-
-.c0 > span {
-  position: relative;
-  top: -1px;
-}
-
-.c1 {
-  border-color: #CDD1D5;
-  background-color: white;
-  box-shadow: 0 1px 3px rgba(55,66,77,0.15);
-  color: #37424D;
-}
-
-.c1:hover {
-  background-color: #FAFAFB;
-}
-
-.c1:active {
-  background-color: #FAFAFB;
-  border-color: #0079D1;
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-
-.c1:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-  outline: 0;
-}
-
-.c1:disabled {
-  box-shadow: none !important;
-  background-color: #DFE3E8 !important;
-  border-color: #DFE3E8 !important;
-  color: #637381 !important;
-}
-
-<div>
-  <button
-    class="c0 c1"
-  >
-    <span
-      class="c2"
-    >
-      <svg
-        fill="none"
-        height="24"
-        role="presentation"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          clip-rule="evenodd"
-          d="M4.22222 2H19.7778C21 2 22 3 22 4.22222V19.7778C22 21 21 22 19.7778 22H4.22222C3 22 2 21 2 19.7778V4.22222C2 3 3 2 4.22222 2ZM6.44444 17.5556H8.66667V9.77778H6.44444V17.5556ZM13.1111 17.5556H10.8889V6.44444H13.1111V17.5556ZM15.3333 17.5556H17.5556V13.1111H15.3333V17.5556Z"
-          fill="currentColor"
-          fill-rule="evenodd"
-        />
-      </svg>
-      <span>
-        Delete
-      </span>
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Button it renders icon-only correctly 1`] = `
-.c2 {
-  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;
-}
-
-.c2 svg {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
-.c0 {
-  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;
-}
-
-.c0:hover {
-  cursor: pointer;
-}
-
-.c0:disabled {
-  pointer-events: none;
-  cursor: unset !important;
-}
-
-.c0 > span {
-  position: relative;
-  top: -1px;
-}
-
-.c1 {
-  border-color: #CDD1D5;
-  background-color: white;
-  box-shadow: 0 1px 3px rgba(55,66,77,0.15);
-  color: #0079D1;
-}
-
-.c1:hover {
-  background-color: #FAFAFB;
-}
-
-.c1:active {
-  background-color: #FAFAFB;
-  border-color: #0079D1;
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-
-.c1:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-  outline: 0;
-}
-
-.c1:disabled {
-  box-shadow: none !important;
-  background-color: #DFE3E8 !important;
-  border-color: #DFE3E8 !important;
-  color: #637381 !important;
-}
-
-<div>
-  <button
-    class="c0 c1"
-  >
-    <span
-      class="c2"
-    >
-      <svg
-        fill="none"
-        height="24"
-        role="presentation"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          clip-rule="evenodd"
-          d="M4.22222 2H19.7778C21 2 22 3 22 4.22222V19.7778C22 21 21 22 19.7778 22H4.22222C3 22 2 21 2 19.7778V4.22222C2 3 3 2 4.22222 2ZM6.44444 17.5556H8.66667V9.77778H6.44444V17.5556ZM13.1111 17.5556H10.8889V6.44444H13.1111V17.5556ZM15.3333 17.5556H17.5556V13.1111H15.3333V17.5556Z"
-          fill="currentColor"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Button it renders loading state correctly 1`] = `
-.c2 {
-  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;
-  opacity: 0;
-}
-
-.c2 svg {
-  width: 1rem;
-  height: 1rem;
-}
-
-.c0 {
-  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;
-}
-
-.c0:hover {
-  cursor: pointer;
-}
-
-.c0:disabled {
-  pointer-events: none;
-  cursor: unset !important;
-}
-
-.c0 > span {
-  position: relative;
-  top: -1px;
-}
-
-.c1 {
-  border-color: #CDD1D5;
-  background-color: white;
-  box-shadow: 0 1px 3px rgba(55,66,77,0.15);
-  color: #37424D;
-}
-
-.c1:hover {
-  background-color: #FAFAFB;
-}
-
-.c1:active {
-  background-color: #FAFAFB;
-  border-color: #0079D1;
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-
-.c1:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-  outline: 0;
-}
-
-.c1:disabled {
-  box-shadow: none !important;
-  background-color: #DFE3E8 !important;
-  border-color: #DFE3E8 !important;
-  color: #637381 !important;
-}
-
-.c3 {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  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;
-  margin-left: 0;
-}
-
-<div>
-  <button
-    class="c0 c1"
-  >
-    <span
-      class="c2"
-    >
-      <span>
-        Loading
-      </span>
-    </span>
-    <div
-      class="c3"
-    >
-      <svg
-        height="24"
-        viewBox="0 0 38 38"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <defs>
-          <lineargradient
-            id="a"
-            x1="8.042%"
-            x2="65.682%"
-            y1="0%"
-            y2="23.865%"
-          >
-            <stop
-              offset="0%"
-              stop-color="#588CB0"
-              stop-opacity="0"
-            />
-            <stop
-              offset="63.146%"
-              stop-color="#588CB0"
-              stop-opacity=".631"
-            />
-            <stop
-              offset="100%"
-              stop-color="#588CB0"
-            />
-          </lineargradient>
-        </defs>
-        <g
-          fill="none"
-          fill-rule="evenodd"
-        >
-          <g
-            transform="translate(1 1)"
-          >
-            <path
-              d="M36 18c0-9.94-8.06-18-18-18"
-              id="Oval-2"
-              stroke="#588CB0"
-              stroke-width="2"
-            >
-              <animatetransform
-                attributeName="transform"
-                dur="0.9s"
-                from="0 18 18"
-                repeatCount="indefinite"
-                to="360 18 18"
-                type="rotate"
-              />
-            </path>
-            <circle
-              cx="36"
-              cy="18"
-              fill="#fff"
-              r="1"
-            >
-              <animatetransform
-                attributeName="transform"
-                dur="0.9s"
-                from="0 18 18"
-                repeatCount="indefinite"
-                to="360 18 18"
-                type="rotate"
-              />
-            </circle>
-          </g>
-        </g>
-      </svg>
-    </div>
-  </button>
-</div>
-`;
-
-exports[`Button it renders primary destructive variant correctly 1`] = `
-.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;
-}
-
-.c0 {
-  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;
-}
-
-.c0:hover {
-  cursor: pointer;
-}
-
-.c0:disabled {
-  pointer-events: none;
-  cursor: unset !important;
-}
-
-.c0 > span {
-  position: relative;
-  top: -1px;
-}
-
-.c1 {
-  border-color: #CDD1D5;
-  background-color: white;
-  box-shadow: 0 1px 3px rgba(55,66,77,0.15);
-  color: #37424D;
-}
-
-.c1:hover {
-  background-color: #FAFAFB;
-}
-
-.c1:active {
-  background-color: #FAFAFB;
-  border-color: #0079D1;
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-
-.c1:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-  outline: 0;
-}
-
-.c1:disabled {
-  box-shadow: none !important;
-  background-color: #DFE3E8 !important;
-  border-color: #DFE3E8 !important;
-  color: #637381 !important;
-}
-
-.c2 {
-  background-color: #0079D1;
-  border-color: #0079D1;
-  color: white;
-}
-
-.c2:hover {
-  background-color: #005A9C;
-  border-color: #005A9C;
-}
-
-.c2:active {
-  background-color: #005A9C;
-  border-color: #005A9C;
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-
-.c2:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-
-.c3 {
-  background-color: #EB5757;
-  border-color: #EB5757;
-  color: white;
-}
-
-.c3:hover {
-  background-color: #A53D3D;
-  border-color: #A53D3D;
-}
-
-.c3:active {
-  background-color: #A53D3D;
-  border-color: #A53D3D;
-  box-shadow: 0 0 0 var(--outline-width) #F7BCBC;
-}
-
-.c3:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #F7BCBC;
-}
-
-<div>
-  <button
-    class="c0 c1 c2 c3"
-  >
-    <span
-      class="c4"
-    >
-      <span>
-        Primary destructive button
-      </span>
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Button it renders primary variant correctly 1`] = `
-.c3 {
-  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;
-}
-
-.c3 svg {
-  width: 1rem;
-  height: 1rem;
-}
-
-.c0 {
-  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;
-}
-
-.c0:hover {
-  cursor: pointer;
-}
-
-.c0:disabled {
-  pointer-events: none;
-  cursor: unset !important;
-}
-
-.c0 > span {
-  position: relative;
-  top: -1px;
-}
-
-.c1 {
-  border-color: #CDD1D5;
-  background-color: white;
-  box-shadow: 0 1px 3px rgba(55,66,77,0.15);
-  color: #37424D;
-}
-
-.c1:hover {
-  background-color: #FAFAFB;
-}
-
-.c1:active {
-  background-color: #FAFAFB;
-  border-color: #0079D1;
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-
-.c1:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-  outline: 0;
-}
-
-.c1:disabled {
-  box-shadow: none !important;
-  background-color: #DFE3E8 !important;
-  border-color: #DFE3E8 !important;
-  color: #637381 !important;
-}
-
-.c2 {
-  background-color: #0079D1;
-  border-color: #0079D1;
-  color: white;
-}
-
-.c2:hover {
-  background-color: #005A9C;
-  border-color: #005A9C;
-}
-
-.c2:active {
-  background-color: #005A9C;
-  border-color: #005A9C;
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-
-.c2:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-
-<div>
-  <button
-    class="c0 c1 c2"
-  >
-    <span
-      class="c3"
-    >
-      <span>
-        Primary button
-      </span>
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Button it renders small icon-only correctly 1`] = `
-.c2 {
-  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;
-}
-
-.c2 svg {
-  width: 1rem;
-  height: 1rem;
-}
-
-.c0 {
-  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: 2px;
-  height: 32px;
-  padding-left: 8px;
-  padding-right: 8px;
-  border-radius: 4px;
-  font-size: 14px;
-}
-
-.c0:hover {
-  cursor: pointer;
-}
-
-.c0:disabled {
-  pointer-events: none;
-  cursor: unset !important;
-}
-
-.c0 > span {
-  position: relative;
-  top: -1px;
-}
-
-.c1 {
-  border-color: #CDD1D5;
-  background-color: white;
-  box-shadow: 0 1px 3px rgba(55,66,77,0.15);
-  color: #0079D1;
-}
-
-.c1:hover {
-  background-color: #FAFAFB;
-}
-
-.c1:active {
-  background-color: #FAFAFB;
-  border-color: #0079D1;
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-
-.c1:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-  outline: 0;
-}
-
-.c1:disabled {
-  box-shadow: none !important;
-  background-color: #DFE3E8 !important;
-  border-color: #DFE3E8 !important;
-  color: #637381 !important;
-}
-
-<div>
-  <button
-    class="c0 c1"
-  >
-    <span
-      class="c2"
-    >
-      <svg
-        fill="none"
-        height="24"
-        role="presentation"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          clip-rule="evenodd"
-          d="M4.22222 2H19.7778C21 2 22 3 22 4.22222V19.7778C22 21 21 22 19.7778 22H4.22222C3 22 2 21 2 19.7778V4.22222C2 3 3 2 4.22222 2ZM6.44444 17.5556H8.66667V9.77778H6.44444V17.5556ZM13.1111 17.5556H10.8889V6.44444H13.1111V17.5556ZM15.3333 17.5556H17.5556V13.1111H15.3333V17.5556Z"
-          fill="currentColor"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Button it renders small icon-only with dropdown correctly 1`] = `
-.c2 {
-  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;
-}
-
-.c2 svg {
-  width: 1rem;
-  height: 1rem;
-}
-
-.c0 {
-  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: 2px;
-  height: 32px;
-  padding-left: 8px;
-  padding-right: 8px;
-  border-radius: 4px;
-  font-size: 14px;
-}
-
-.c0:hover {
-  cursor: pointer;
-}
-
-.c0:disabled {
-  pointer-events: none;
-  cursor: unset !important;
-}
-
-.c0 > span {
-  position: relative;
-  top: -1px;
-}
-
-.c1 {
-  border-color: #CDD1D5;
-  background-color: white;
-  box-shadow: 0 1px 3px rgba(55,66,77,0.15);
-  color: #0079D1;
-}
-
-.c1:hover {
-  background-color: #FAFAFB;
-}
-
-.c1:active {
-  background-color: #FAFAFB;
-  border-color: #0079D1;
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-
-.c1:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-  outline: 0;
-}
-
-.c1:disabled {
-  box-shadow: none !important;
-  background-color: #DFE3E8 !important;
-  border-color: #DFE3E8 !important;
-  color: #637381 !important;
-}
-
-<div>
-  <button
-    class="c0 c1"
-  >
-    <span
-      class="c2"
-    >
-      <svg
-        fill="none"
-        height="24"
-        role="presentation"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          clip-rule="evenodd"
-          d="M4.22222 2H19.7778C21 2 22 3 22 4.22222V19.7778C22 21 21 22 19.7778 22H4.22222C3 22 2 21 2 19.7778V4.22222C2 3 3 2 4.22222 2ZM6.44444 17.5556H8.66667V9.77778H6.44444V17.5556ZM13.1111 17.5556H10.8889V6.44444H13.1111V17.5556ZM15.3333 17.5556H17.5556V13.1111H15.3333V17.5556Z"
-          fill="currentColor"
-          fill-rule="evenodd"
-        />
-      </svg>
-      <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>
-</div>
-`;
-
-exports[`Button it renders small size correctly 1`] = `
-.c2 {
-  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;
-}
-
-.c2 svg {
-  width: 1rem;
-  height: 1rem;
-}
-
-.c0 {
-  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: 2px;
-  height: 32px;
-  padding-left: 16px;
-  padding-right: 16px;
-  border-radius: 4px;
-  font-size: 14px;
-}
-
-.c0:hover {
-  cursor: pointer;
-}
-
-.c0:disabled {
-  pointer-events: none;
-  cursor: unset !important;
-}
-
-.c0 > span {
-  position: relative;
-  top: -1px;
-}
-
-.c1 {
-  border-color: #CDD1D5;
-  background-color: white;
-  box-shadow: 0 1px 3px rgba(55,66,77,0.15);
-  color: #37424D;
-}
-
-.c1:hover {
-  background-color: #FAFAFB;
-}
-
-.c1:active {
-  background-color: #FAFAFB;
-  border-color: #0079D1;
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-
-.c1:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-  outline: 0;
-}
-
-.c1:disabled {
-  box-shadow: none !important;
-  background-color: #DFE3E8 !important;
-  border-color: #DFE3E8 !important;
-  color: #637381 !important;
-}
-
-<div>
-  <button
-    class="c0 c1"
-  >
-    <span
-      class="c2"
-    >
-      <span>
-        Small button
-      </span>
-    </span>
-  </button>
-</div>
-`;