@veeqo/ui 0.0.1 → 0.0.3

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

@@ -0,0 +1,1570 @@
+// 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>
+`;