coveragebook_components 0.10.0 → 0.10.1.beta.0

data/app/assets/build/coco/book.css

@@ -584,6 +584,15 @@ select {
     display: none !important;
   }
 
+  [data-coco] {
+  font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+    [x-dropdown] [x-dropdown\:content] {
+  display: none;
+}
+
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -689,10 +698,12 @@ select {
 .tippy-box[data-theme^="coco-"] {
   white-space: normal;
   background-color: transparent;
-  font-size: 16px;
-  line-height: 20px;
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
+  font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 600;
 }
 .tippy-box[data-theme^="coco-"] .tippy-content {
   padding: 0px;
@@ -710,13 +721,15 @@ select {
   border-radius: 0.5rem;
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-  font-size: 14px;
-  line-height: 16px;
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 14px;
+  line-height: 16px;
+  font-weight: 600;
 }
 .tippy-box[data-theme~="coco-tooltip"] .tippy-content {
   max-width: 240px;
@@ -735,14 +748,6 @@ select {
 .tippy-box[data-theme~="coco-tooltip"] .tippy-svg-arrow > svg:last-child {
   fill: #111827;
 }
-[x-dropdown] [x-dropdown\:content] {
-  display: none;
-}
-[data-coco] {
-  font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity));
-}
 [data-coco][data-component="avatar"] {
   display: block;
   flex: none;
@@ -769,99 +774,1405 @@ select {
   height: 2rem;
   width: 2rem;
 }
-.coco-button-wrapper {
-  display: contents !important;
+.coco-button-wrapper {
+  display: contents !important;
+}
+[data-coco].coco-button {
+  display: flex;
+  width: auto;
+  flex: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  border-width: 1px;
+  border-color: transparent;
+  background-color: transparent;
+  color: currentColor;
+  text-decoration-line: none;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+[data-coco].coco-button:focus-visible {
+  outline-width: 0px;
+}
+[data-coco].coco-button {
+    width: -moz-min-content;
+    width: min-content;
+  }
+[data-coco].coco-button .button-inner {
+  margin-left: auto;
+  margin-right: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  text-align: center;
+      width: -moz-fit-content;
+      width: fit-content;
+}
+[data-coco].coco-button .button-content {
+  position: relative;
+  order: 2;
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  line-height: 1;
+}
+[data-coco].coco-button .button-state-content {
+  display: contents;
+}
+[data-coco].coco-button .button-icon {
+  order: 1;
+  display: inline-flex;
+  align-items: center;
+}
+[data-coco].coco-button .button-dropdown {
+  display: contents;
+  border-radius: 0.375rem;
+}
+[data-coco].coco-button .button-toggle {
+  order: 3;
+}
+/* disabled */
+[data-coco].coco-button[data-disabled="true"] {
+  pointer-events: none;
+  cursor: not-allowed;
+}
+/* loading */
+@keyframes spin {
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+[data-coco].coco-button[data-state="loading"] .button-icon {
+  animation: spin 1.5s linear infinite;
+}
+/* Fit */
+[data-coco].coco-button[data-fit="full"] {
+  width: 100%;
+}
+/* Icons */
+[data-coco].coco-button[data-icon-position="end"] .button-content {
+  order: 1;
+}
+[data-coco].coco-button[data-icon-position="end"] .button-icon {
+  order: 2;
+}
+[data-coco].coco-button[data-icon-position="end"] .button-toggle {
+  order: 3;
+}
+[data-coco].coco-button.with-icon[data-collapsed="true"] .button-content {
+        display: none;
+      }
+/* Themes */
+[data-coco].coco-button[data-theme] {
+  overflow: hidden;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+      border-radius: 44px;
+}
+[data-coco].coco-button[data-theme] .button-content {
+  font-weight: 600;
+}
+[data-coco].coco-button[data-theme="primary"],
+    [data-coco].coco-button[data-theme="positive"] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(26 136 113 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+[data-coco].coco-button[data-theme="primary"]:hover,
+    [data-coco].coco-button[data-theme="positive"]:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(19 116 100 / var(--tw-bg-opacity));
+}
+[data-coco].coco-button[data-theme="primary"]:active,
+    [data-coco].coco-button[data-theme="positive"]:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(13 97 89 / var(--tw-bg-opacity));
+}
+[data-coco].coco-button[data-theme="primary"][data-state="loading"], [data-coco].coco-button[data-theme="positive"][data-state="loading"] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(26 136 113 / var(--tw-bg-opacity));
+}
+[data-coco].coco-button[data-theme="primary"][data-state="active"], [data-coco].coco-button[data-theme="positive"][data-state="active"] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(13 97 89 / var(--tw-bg-opacity));
+}
+[data-coco].coco-button[data-theme="primary"][data-state="loading"] .button-icon, [data-coco].coco-button[data-theme="positive"][data-state="loading"] .button-icon {
+  --tw-text-opacity: 1;
+  color: rgb(118 184 170 / var(--tw-text-opacity));
+}
+[data-coco].coco-button[data-theme="primary"][data-disabled="true"], [data-coco].coco-button[data-theme="positive"][data-disabled="true"] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(163 207 197 / var(--tw-bg-opacity));
+}
+[data-coco].coco-button[data-theme="text-primary"],
+    [data-coco].coco-button[data-theme="text-positive"] {
+  background-color: transparent;
+  --tw-text-opacity: 1;
+  color: rgb(26 136 113 / var(--tw-text-opacity));
+}
+[data-coco].coco-button[data-theme="text-primary"]:hover,
+    [data-coco].coco-button[data-theme="text-positive"]:hover {
+  background-color: rgba(0, 12, 39, 0.06);
+    background-blend-mode: hard-light;
+}
+[data-coco].coco-button[data-theme="text-primary"]:active,
+    [data-coco].coco-button[data-theme="text-positive"]:active {
+  background-color: rgba(0, 12, 39, 0.1);
+    background-blend-mode: hard-light;
+}
+[data-coco].coco-button[data-theme="text-primary"][data-state="loading"], [data-coco].coco-button[data-theme="text-positive"][data-state="loading"] {
+  background-color: transparent;
+}
+[data-coco].coco-button[data-theme="text-primary"][data-state="active"], [data-coco].coco-button[data-theme="text-positive"][data-state="active"] {
+  background-color: rgba(0, 12, 39, 0.1);
+    background-blend-mode: hard-light;
+}
+[data-coco].coco-button[data-theme="text-primary"][data-state="loading"] .button-icon, [data-coco].coco-button[data-theme="text-positive"][data-state="loading"] .button-icon {
+  --tw-text-opacity: 1;
+  color: rgb(118 184 170 / var(--tw-text-opacity));
+}
+[data-coco].coco-button[data-theme="text-primary"][data-disabled="true"], [data-coco].coco-button[data-theme="text-positive"][data-disabled="true"] {
+  background-color: transparent;
+  opacity: 0.3;
+}
+[data-coco].coco-button[data-theme="secondary"],
+    [data-coco].coco-button[data-theme="toolbar"],
+    [data-coco].coco-button[data-theme="toolbar-floating"] {
+  border-color: rgba(0, 12, 39, 0.18);
+  background-color: transparent;
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+[data-coco].coco-button[data-theme="secondary"]:hover,
+    [data-coco].coco-button[data-theme="toolbar"]:hover,
+    [data-coco].coco-button[data-theme="toolbar-floating"]:hover {
+  background-color: rgba(0, 12, 39, 0.06);
+    background-blend-mode: hard-light;
+}
+[data-coco].coco-button[data-theme="secondary"]:active,
+    [data-coco].coco-button[data-theme="toolbar"]:active,
+    [data-coco].coco-button[data-theme="toolbar-floating"]:active {
+  background-color: rgba(0, 12, 39, 0.1);
+    background-blend-mode: hard-light;
+}
+[data-coco].coco-button[data-theme="secondary"][data-state="loading"], [data-coco].coco-button[data-theme="toolbar"][data-state="loading"], [data-coco].coco-button[data-theme="toolbar-floating"][data-state="loading"] {
+  background-color: transparent;
+}
+[data-coco].coco-button[data-theme="secondary"][data-state="active"], [data-coco].coco-button[data-theme="toolbar"][data-state="active"], [data-coco].coco-button[data-theme="toolbar-floating"][data-state="active"] {
+  background-color: rgba(0, 12, 39, 0.1);
+    background-blend-mode: hard-light;
+}
+[data-coco].coco-button[data-theme="secondary"][data-state="loading"] .button-icon, [data-coco].coco-button[data-theme="toolbar"][data-state="loading"] .button-icon, [data-coco].coco-button[data-theme="toolbar-floating"][data-state="loading"] .button-icon {
+  --tw-text-opacity: 1;
+  color: rgb(118 184 170 / var(--tw-text-opacity));
+}
+[data-coco].coco-button[data-theme="secondary"][data-disabled="true"], [data-coco].coco-button[data-theme="toolbar"][data-disabled="true"], [data-coco].coco-button[data-theme="toolbar-floating"][data-disabled="true"] {
+  background-color: transparent;
+  opacity: 0.3;
+}
+[data-coco].coco-button[data-theme="toolbar-floating"] {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+[data-coco].coco-button[data-theme="toolbar-floating"]:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+[data-coco].coco-button[data-theme="toolbar-floating"]:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+[data-coco].coco-button[data-theme="toolbar-floating"][data-state="active"] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+[data-coco].coco-button[data-theme="text-secondary"],
+    [data-coco].coco-button[data-theme="text-toolbar"] {
+  background-color: transparent;
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+[data-coco].coco-button[data-theme="text-secondary"]:hover,
+    [data-coco].coco-button[data-theme="text-toolbar"]:hover {
+  background-color: rgba(0, 12, 39, 0.06);
+    background-blend-mode: hard-light;
+}
+[data-coco].coco-button[data-theme="text-secondary"]:active,
+    [data-coco].coco-button[data-theme="text-toolbar"]:active {
+  background-color: rgba(0, 12, 39, 0.1);
+    background-blend-mode: hard-light;
+}
+[data-coco].coco-button[data-theme="text-secondary"][data-state="loading"], [data-coco].coco-button[data-theme="text-toolbar"][data-state="loading"] {
+  background-color: transparent;
+}
+[data-coco].coco-button[data-theme="text-secondary"][data-state="active"], [data-coco].coco-button[data-theme="text-toolbar"][data-state="active"] {
+  background-color: rgba(0, 12, 39, 0.1);
+    background-blend-mode: hard-light;
+}
+[data-coco].coco-button[data-theme="text-secondary"][data-state="loading"] .button-icon, [data-coco].coco-button[data-theme="text-toolbar"][data-state="loading"] .button-icon {
+  --tw-text-opacity: 1;
+  color: rgb(118 184 170 / var(--tw-text-opacity));
+}
+[data-coco].coco-button[data-theme="text-secondary"][data-disabled="true"], [data-coco].coco-button[data-theme="text-toolbar"][data-disabled="true"] {
+  background-color: transparent;
+  opacity: 0.3;
+}
+[data-coco].coco-button[data-theme="negative"] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+[data-coco].coco-button[data-theme="negative"]:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
+}
+[data-coco].coco-button[data-theme="negative"]:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(153 27 27 / var(--tw-bg-opacity));
+}
+[data-coco].coco-button[data-theme="negative"][data-state="loading"] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
+}
+[data-coco].coco-button[data-theme="negative"][data-state="active"] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(153 27 27 / var(--tw-bg-opacity));
+}
+[data-coco].coco-button[data-theme="negative"][data-state="loading"] .button-icon {
+  --tw-text-opacity: 1;
+  color: rgb(252 165 165 / var(--tw-text-opacity));
+}
+[data-coco].coco-button[data-theme="negative"][data-disabled="true"] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+}
+[data-coco].coco-button[data-theme="text-negative"] {
+  background-color: transparent;
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity));
+}
+[data-coco].coco-button[data-theme="text-negative"]:hover {
+  background-color: rgba(0, 12, 39, 0.06);
+    background-blend-mode: hard-light;
+}
+[data-coco].coco-button[data-theme="text-negative"]:active {
+  background-color: rgba(0, 12, 39, 0.1);
+    background-blend-mode: hard-light;
+}
+[data-coco].coco-button[data-theme="text-negative"][data-state="loading"] {
+  background-color: transparent;
+}
+[data-coco].coco-button[data-theme="text-negative"][data-state="active"] {
+  background-color: rgba(0, 12, 39, 0.1);
+    background-blend-mode: hard-light;
+}
+[data-coco].coco-button[data-theme="text-negative"][data-state="loading"] .button-icon {
+  --tw-text-opacity: 1;
+  color: rgb(252 165 165 / var(--tw-text-opacity));
+}
+[data-coco].coco-button[data-theme="text-negative"][data-disabled="true"] {
+  background-color: transparent;
+  opacity: 0.3;
+}
+[data-coco].coco-button[data-theme="warning"] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 158 11 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+[data-coco].coco-button[data-theme="warning"]:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(180 83 9 / var(--tw-bg-opacity));
+}
+[data-coco].coco-button[data-theme="warning"]:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(146 64 14 / var(--tw-bg-opacity));
+}
+[data-coco].coco-button[data-theme="warning"][data-state="loading"] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 158 11 / var(--tw-bg-opacity));
+}
+[data-coco].coco-button[data-theme="warning"][data-state="active"] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(146 64 14 / var(--tw-bg-opacity));
+}
+[data-coco].coco-button[data-theme="warning"][data-state="loading"] .button-icon {
+  --tw-text-opacity: 1;
+  color: rgb(252 211 77 / var(--tw-text-opacity));
+}
+[data-coco].coco-button[data-theme="warning"][data-disabled="true"] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(253 230 138 / var(--tw-bg-opacity));
+}
+[data-coco].coco-button[data-theme="text-warning"] {
+  background-color: transparent;
+  --tw-text-opacity: 1;
+  color: rgb(217 119 6 / var(--tw-text-opacity));
+}
+[data-coco].coco-button[data-theme="text-warning"]:hover {
+  background-color: rgba(0, 12, 39, 0.06);
+    background-blend-mode: hard-light;
+}
+[data-coco].coco-button[data-theme="text-warning"]:active {
+  background-color: rgba(0, 12, 39, 0.1);
+    background-blend-mode: hard-light;
+}
+[data-coco].coco-button[data-theme="text-warning"][data-state="loading"] {
+  background-color: transparent;
+}
+[data-coco].coco-button[data-theme="text-warning"][data-state="active"] {
+  background-color: rgba(0, 12, 39, 0.1);
+    background-blend-mode: hard-light;
+}
+[data-coco].coco-button[data-theme="text-warning"][data-state="loading"] .button-icon {
+  --tw-text-opacity: 1;
+  color: rgb(252 211 77 / var(--tw-text-opacity));
+}
+[data-coco].coco-button[data-theme="text-warning"][data-disabled="true"] {
+  background-color: transparent;
+  opacity: 0.3;
+}
+[data-coco].coco-button[data-theme="info"] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(2 132 199 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+[data-coco].coco-button[data-theme="info"]:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(3 105 161 / var(--tw-bg-opacity));
+}
+[data-coco].coco-button[data-theme="info"]:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(7 89 133 / var(--tw-bg-opacity));
+}
+[data-coco].coco-button[data-theme="info"][data-state="loading"] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(2 132 199 / var(--tw-bg-opacity));
+}
+[data-coco].coco-button[data-theme="info"][data-state="active"] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(7 89 133 / var(--tw-bg-opacity));
+}
+[data-coco].coco-button[data-theme="info"][data-state="loading"] .button-icon {
+  --tw-text-opacity: 1;
+  color: rgb(125 211 252 / var(--tw-text-opacity));
+}
+[data-coco].coco-button[data-theme="info"][data-disabled="true"] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(186 230 253 / var(--tw-bg-opacity));
+}
+[data-coco].coco-button[data-theme="text-info"] {
+  background-color: transparent;
+  --tw-text-opacity: 1;
+  color: rgb(2 132 199 / var(--tw-text-opacity));
+}
+[data-coco].coco-button[data-theme="text-info"]:hover {
+  background-color: rgba(0, 12, 39, 0.06);
+    background-blend-mode: hard-light;
+}
+[data-coco].coco-button[data-theme="text-info"]:active {
+  background-color: rgba(0, 12, 39, 0.1);
+    background-blend-mode: hard-light;
+}
+[data-coco].coco-button[data-theme="text-info"][data-state="loading"] {
+  background-color: transparent;
+}
+[data-coco].coco-button[data-theme="text-info"][data-state="active"] {
+  background-color: rgba(0, 12, 39, 0.1);
+    background-blend-mode: hard-light;
+}
+[data-coco].coco-button[data-theme="text-info"][data-state="loading"] .button-icon {
+  --tw-text-opacity: 1;
+  color: rgb(125 211 252 / var(--tw-text-opacity));
+}
+[data-coco].coco-button[data-theme="text-info"][data-disabled="true"] {
+  background-color: transparent;
+  opacity: 0.3;
+}
+[data-coco].coco-button[data-theme="neutral-dark"] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+[data-coco].coco-button[data-theme="neutral-dark"]:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+}
+[data-coco].coco-button[data-theme="neutral-dark"]:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
+}
+[data-coco].coco-button[data-theme="neutral-dark"][data-state="loading"] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+}
+[data-coco].coco-button[data-theme="neutral-dark"][data-state="active"] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
+}
+[data-coco].coco-button[data-theme="neutral-dark"][data-disabled="true"] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
+}
+[data-coco].coco-button[data-theme="neutral-light"] {
+  border-width: 1px;
+  border-color: transparent;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+[data-coco].coco-button[data-theme="neutral-light"]:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+[data-coco].coco-button[data-theme="neutral-light"]:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+[data-coco].coco-button[data-theme="neutral-light"][data-state="loading"] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+[data-coco].coco-button[data-theme="neutral-light"][data-state="active"] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+[data-coco].coco-button[data-theme="neutral-light"][data-disabled="true"] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+[data-coco].coco-button[data-theme="neutral-light"][data-disabled="true"] .button-inner {
+  opacity: 0.4;
+}
+[data-coco].coco-button[data-theme="text-neutral-light"] {
+  background-color: transparent;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+[data-coco].coco-button[data-theme="text-neutral-light"]:hover {
+  background-color: rgb(255 255 255 / 0.1);
+}
+[data-coco].coco-button[data-theme="text-neutral-light"][data-state="active"] {
+  background-color: rgb(255 255 255 / 0.1);
+}
+[data-coco].coco-button[data-theme="text-neutral-light"][data-disabled="true"] {
+  opacity: 0.3;
+}
+[data-coco].coco-button[data-theme="text-neutral-dark"] {
+  background-color: transparent;
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+[data-coco].coco-button[data-theme="text-neutral-dark"]:hover {
+  background-color: rgb(17 24 39 / 0.1);
+}
+[data-coco].coco-button[data-theme="text-neutral-dark"][data-state="active"] {
+  background-color: rgb(17 24 39 / 0.1);
+}
+[data-coco].coco-button[data-theme="text-neutral-dark"][data-disabled="true"] {
+  opacity: 0.3;
+}
+/* Responsive resizing */
+[data-coco].coco-button[data-size="xs"] .button-content {
+      font-size: 14px;
+      line-height: 14px;
+    }
+[data-coco].coco-button[data-size="xs"] .button-icon [data-component="icon"],[data-coco].coco-button[data-size="xs"] .button-toggle {
+  height: 0.875rem;
+  width: 0.875rem;
+}
+[data-coco].coco-button[data-size="xs"][data-theme] {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+[data-coco].coco-button[data-size="xs"].icon-only .button-icon,[data-coco].coco-button[data-size="xs"][data-collapsed="true"] .button-icon {
+  margin-left: -0.25rem;
+  margin-right: -0.25rem;
+}
+[data-coco].coco-button[data-size="xs"][data-theme|="text"] {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+[data-coco].coco-button[data-size="xs"][data-theme|="text"].icon-only .button-icon,[data-coco].coco-button[data-size="xs"][data-theme|="text"][data-collapsed="true"] .button-icon {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+[data-coco].coco-button[data-size="sm"] .button-content {
+  font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 14px;
+  line-height: 16px;
+  font-weight: 600;
+}
+[data-coco].coco-button[data-size="sm"] .button-icon [data-component="icon"],[data-coco].coco-button[data-size="sm"] .button-toggle {
+  height: 1rem;
+  width: 1rem;
+}
+[data-coco].coco-button[data-size="sm"][data-theme] {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+[data-coco].coco-button[data-size="sm"][data-theme].icon-only .button-icon,[data-coco].coco-button[data-size="sm"][data-theme][data-collapsed="true"] .button-icon {
+  margin-left: -0.375rem;
+  margin-right: -0.375rem;
+}
+[data-coco].coco-button[data-size="sm"][data-theme|="text"] {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+[data-coco].coco-button[data-size="sm"][data-theme|="text"].icon-only .button-icon,[data-coco].coco-button[data-size="sm"][data-theme|="text"][data-collapsed="true"] .button-icon {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+[data-coco].coco-button[data-size="md"] .button-content {
+  font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 600;
+}
+[data-coco].coco-button[data-size="md"] .button-icon [data-component="icon"],[data-coco].coco-button[data-size="md"] .button-toggle {
+  height: 1.25rem;
+  width: 1.25rem;
+}
+[data-coco].coco-button[data-size="md"][data-theme] {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+[data-coco].coco-button[data-size="md"][data-theme].icon-only .button-icon,[data-coco].coco-button[data-size="md"][data-theme][data-collapsed="true"] .button-icon {
+  margin-left: -0.5rem;
+  margin-right: -0.5rem;
+}
+[data-coco].coco-button[data-size="md"][data-theme|="text"] {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+[data-coco].coco-button[data-size="md"][data-theme|="text"].icon-only .button-icon,[data-coco].coco-button[data-size="md"][data-theme|="text"][data-collapsed="true"] .button-icon {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+[data-coco].coco-button[data-size="lg"] .button-content {
+  font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 600;
+}
+[data-coco].coco-button[data-size="lg"] .button-icon [data-component="icon"],[data-coco].coco-button[data-size="lg"] .button-toggle {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+[data-coco].coco-button[data-size="lg"][data-theme] {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+[data-coco].coco-button[data-size="lg"][data-theme].icon-only .button-icon,[data-coco].coco-button[data-size="lg"][data-theme][data-collapsed="true"] .button-inner {
+  margin-left: -8px;
+  margin-right: -8px;
+}
+[data-coco].coco-button[data-size="lg"][data-theme|="text"] {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+[data-coco].coco-button[data-size="lg"][data-theme|="text"].icon-only .button-icon,[data-coco].coco-button[data-size="lg"][data-theme|="text"][data-collapsed="true"] .button-icon {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+@media (min-width: 768px) {
+    [data-coco].coco-button[data-size-md="xs"] .button-content {
+      font-size: 14px;
+      line-height: 14px;
+    }
+
+    [data-coco].coco-button[data-size-md="xs"] .button-icon [data-component="icon"],[data-coco].coco-button[data-size-md="xs"] .button-toggle {
+    height: 0.875rem;
+    width: 0.875rem;
+  }
+
+    [data-coco].coco-button[data-size-md="xs"][data-theme] {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+
+    [data-coco].coco-button[data-size-md="xs"].icon-only .button-icon,[data-coco].coco-button[data-size-md="xs"][data-collapsed="true"] .button-icon {
+    margin-left: -0.25rem;
+    margin-right: -0.25rem;
+  }
+
+    [data-coco].coco-button[data-size-md="xs"][data-theme|="text"] {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+      [data-coco].coco-button[data-size-md="xs"][data-theme|="text"].icon-only .button-icon,[data-coco].coco-button[data-size-md="xs"][data-theme|="text"][data-collapsed="true"] .button-icon {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  [data-coco].coco-button[data-size-md="sm"] .button-content {
+    font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-size: 14px;
+    line-height: 16px;
+    font-weight: 600;
+  }
+
+    [data-coco].coco-button[data-size-md="sm"] .button-icon [data-component="icon"],[data-coco].coco-button[data-size-md="sm"] .button-toggle {
+    height: 1rem;
+    width: 1rem;
+  }
+
+    [data-coco].coco-button[data-size-md="sm"][data-theme] {
+    padding-top: 0.625rem;
+    padding-bottom: 0.625rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+      [data-coco].coco-button[data-size-md="sm"][data-theme].icon-only .button-icon,[data-coco].coco-button[data-size-md="sm"][data-theme][data-collapsed="true"] .button-icon {
+    margin-left: -0.375rem;
+    margin-right: -0.375rem;
+  }
+
+    [data-coco].coco-button[data-size-md="sm"][data-theme|="text"] {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+      [data-coco].coco-button[data-size-md="sm"][data-theme|="text"].icon-only .button-icon,[data-coco].coco-button[data-size-md="sm"][data-theme|="text"][data-collapsed="true"] .button-icon {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  [data-coco].coco-button[data-size-md="md"] .button-content {
+    font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 600;
+  }
+
+    [data-coco].coco-button[data-size-md="md"] .button-icon [data-component="icon"],[data-coco].coco-button[data-size-md="md"] .button-toggle {
+    height: 1.25rem;
+    width: 1.25rem;
+  }
+
+    [data-coco].coco-button[data-size-md="md"][data-theme] {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+
+      [data-coco].coco-button[data-size-md="md"][data-theme].icon-only .button-icon,[data-coco].coco-button[data-size-md="md"][data-theme][data-collapsed="true"] .button-icon {
+    margin-left: -0.5rem;
+    margin-right: -0.5rem;
+  }
+
+    [data-coco].coco-button[data-size-md="md"][data-theme|="text"] {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+
+      [data-coco].coco-button[data-size-md="md"][data-theme|="text"].icon-only .button-icon,[data-coco].coco-button[data-size-md="md"][data-theme|="text"][data-collapsed="true"] .button-icon {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  [data-coco].coco-button[data-size-md="lg"] .button-content {
+    font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-size: 18px;
+    line-height: 24px;
+    font-weight: 600;
+  }
+
+    [data-coco].coco-button[data-size-md="lg"] .button-icon [data-component="icon"],[data-coco].coco-button[data-size-md="lg"] .button-toggle {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+
+    [data-coco].coco-button[data-size-md="lg"][data-theme] {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
+      [data-coco].coco-button[data-size-md="lg"][data-theme].icon-only .button-icon,[data-coco].coco-button[data-size-md="lg"][data-theme][data-collapsed="true"] .button-inner {
+    margin-left: -8px;
+    margin-right: -8px;
+  }
+
+    [data-coco].coco-button[data-size-md="lg"][data-theme|="text"] {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+
+      [data-coco].coco-button[data-size-md="lg"][data-theme|="text"].icon-only .button-icon,[data-coco].coco-button[data-size-md="lg"][data-theme|="text"][data-collapsed="true"] .button-icon {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+    }
+@media (min-width: 992px) {
+    [data-coco].coco-button[data-size-lg="xs"] .button-content {
+      font-size: 14px;
+      line-height: 14px;
+    }
+
+    [data-coco].coco-button[data-size-lg="xs"] .button-icon [data-component="icon"],[data-coco].coco-button[data-size-lg="xs"] .button-toggle {
+    height: 0.875rem;
+    width: 0.875rem;
+  }
+
+    [data-coco].coco-button[data-size-lg="xs"][data-theme] {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+
+    [data-coco].coco-button[data-size-lg="xs"].icon-only .button-icon,[data-coco].coco-button[data-size-lg="xs"][data-collapsed="true"] .button-icon {
+    margin-left: -0.25rem;
+    margin-right: -0.25rem;
+  }
+
+    [data-coco].coco-button[data-size-lg="xs"][data-theme|="text"] {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+      [data-coco].coco-button[data-size-lg="xs"][data-theme|="text"].icon-only .button-icon,[data-coco].coco-button[data-size-lg="xs"][data-theme|="text"][data-collapsed="true"] .button-icon {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  [data-coco].coco-button[data-size-lg="sm"] .button-content {
+    font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-size: 14px;
+    line-height: 16px;
+    font-weight: 600;
+  }
+
+    [data-coco].coco-button[data-size-lg="sm"] .button-icon [data-component="icon"],[data-coco].coco-button[data-size-lg="sm"] .button-toggle {
+    height: 1rem;
+    width: 1rem;
+  }
+
+    [data-coco].coco-button[data-size-lg="sm"][data-theme] {
+    padding-top: 0.625rem;
+    padding-bottom: 0.625rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+      [data-coco].coco-button[data-size-lg="sm"][data-theme].icon-only .button-icon,[data-coco].coco-button[data-size-lg="sm"][data-theme][data-collapsed="true"] .button-icon {
+    margin-left: -0.375rem;
+    margin-right: -0.375rem;
+  }
+
+    [data-coco].coco-button[data-size-lg="sm"][data-theme|="text"] {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+      [data-coco].coco-button[data-size-lg="sm"][data-theme|="text"].icon-only .button-icon,[data-coco].coco-button[data-size-lg="sm"][data-theme|="text"][data-collapsed="true"] .button-icon {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  [data-coco].coco-button[data-size-lg="md"] .button-content {
+    font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 600;
+  }
+
+    [data-coco].coco-button[data-size-lg="md"] .button-icon [data-component="icon"],[data-coco].coco-button[data-size-lg="md"] .button-toggle {
+    height: 1.25rem;
+    width: 1.25rem;
+  }
+
+    [data-coco].coco-button[data-size-lg="md"][data-theme] {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+
+      [data-coco].coco-button[data-size-lg="md"][data-theme].icon-only .button-icon,[data-coco].coco-button[data-size-lg="md"][data-theme][data-collapsed="true"] .button-icon {
+    margin-left: -0.5rem;
+    margin-right: -0.5rem;
+  }
+
+    [data-coco].coco-button[data-size-lg="md"][data-theme|="text"] {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+
+      [data-coco].coco-button[data-size-lg="md"][data-theme|="text"].icon-only .button-icon,[data-coco].coco-button[data-size-lg="md"][data-theme|="text"][data-collapsed="true"] .button-icon {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  [data-coco].coco-button[data-size-lg="lg"] .button-content {
+    font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-size: 18px;
+    line-height: 24px;
+    font-weight: 600;
+  }
+
+    [data-coco].coco-button[data-size-lg="lg"] .button-icon [data-component="icon"],[data-coco].coco-button[data-size-lg="lg"] .button-toggle {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+
+    [data-coco].coco-button[data-size-lg="lg"][data-theme] {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
+      [data-coco].coco-button[data-size-lg="lg"][data-theme].icon-only .button-icon,[data-coco].coco-button[data-size-lg="lg"][data-theme][data-collapsed="true"] .button-inner {
+    margin-left: -8px;
+    margin-right: -8px;
+  }
+
+    [data-coco].coco-button[data-size-lg="lg"][data-theme|="text"] {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+
+      [data-coco].coco-button[data-size-lg="lg"][data-theme|="text"].icon-only .button-icon,[data-coco].coco-button[data-size-lg="lg"][data-theme|="text"][data-collapsed="true"] .button-icon {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+    }
+@media (min-width: 1200px) {
+    [data-coco].coco-button[data-size-xl="xs"] .button-content {
+      font-size: 14px;
+      line-height: 14px;
+    }
+
+    [data-coco].coco-button[data-size-xl="xs"] .button-icon [data-component="icon"],[data-coco].coco-button[data-size-xl="xs"] .button-toggle {
+    height: 0.875rem;
+    width: 0.875rem;
+  }
+
+    [data-coco].coco-button[data-size-xl="xs"][data-theme] {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+
+    [data-coco].coco-button[data-size-xl="xs"].icon-only .button-icon,[data-coco].coco-button[data-size-xl="xs"][data-collapsed="true"] .button-icon {
+    margin-left: -0.25rem;
+    margin-right: -0.25rem;
+  }
+
+    [data-coco].coco-button[data-size-xl="xs"][data-theme|="text"] {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+      [data-coco].coco-button[data-size-xl="xs"][data-theme|="text"].icon-only .button-icon,[data-coco].coco-button[data-size-xl="xs"][data-theme|="text"][data-collapsed="true"] .button-icon {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  [data-coco].coco-button[data-size-xl="sm"] .button-content {
+    font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-size: 14px;
+    line-height: 16px;
+    font-weight: 600;
+  }
+
+    [data-coco].coco-button[data-size-xl="sm"] .button-icon [data-component="icon"],[data-coco].coco-button[data-size-xl="sm"] .button-toggle {
+    height: 1rem;
+    width: 1rem;
+  }
+
+    [data-coco].coco-button[data-size-xl="sm"][data-theme] {
+    padding-top: 0.625rem;
+    padding-bottom: 0.625rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+      [data-coco].coco-button[data-size-xl="sm"][data-theme].icon-only .button-icon,[data-coco].coco-button[data-size-xl="sm"][data-theme][data-collapsed="true"] .button-icon {
+    margin-left: -0.375rem;
+    margin-right: -0.375rem;
+  }
+
+    [data-coco].coco-button[data-size-xl="sm"][data-theme|="text"] {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+      [data-coco].coco-button[data-size-xl="sm"][data-theme|="text"].icon-only .button-icon,[data-coco].coco-button[data-size-xl="sm"][data-theme|="text"][data-collapsed="true"] .button-icon {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  [data-coco].coco-button[data-size-xl="md"] .button-content {
+    font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 600;
+  }
+
+    [data-coco].coco-button[data-size-xl="md"] .button-icon [data-component="icon"],[data-coco].coco-button[data-size-xl="md"] .button-toggle {
+    height: 1.25rem;
+    width: 1.25rem;
+  }
+
+    [data-coco].coco-button[data-size-xl="md"][data-theme] {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+
+      [data-coco].coco-button[data-size-xl="md"][data-theme].icon-only .button-icon,[data-coco].coco-button[data-size-xl="md"][data-theme][data-collapsed="true"] .button-icon {
+    margin-left: -0.5rem;
+    margin-right: -0.5rem;
+  }
+
+    [data-coco].coco-button[data-size-xl="md"][data-theme|="text"] {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+
+      [data-coco].coco-button[data-size-xl="md"][data-theme|="text"].icon-only .button-icon,[data-coco].coco-button[data-size-xl="md"][data-theme|="text"][data-collapsed="true"] .button-icon {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  [data-coco].coco-button[data-size-xl="lg"] .button-content {
+    font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-size: 18px;
+    line-height: 24px;
+    font-weight: 600;
+  }
+
+    [data-coco].coco-button[data-size-xl="lg"] .button-icon [data-component="icon"],[data-coco].coco-button[data-size-xl="lg"] .button-toggle {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+
+    [data-coco].coco-button[data-size-xl="lg"][data-theme] {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
+      [data-coco].coco-button[data-size-xl="lg"][data-theme].icon-only .button-icon,[data-coco].coco-button[data-size-xl="lg"][data-theme][data-collapsed="true"] .button-inner {
+    margin-left: -8px;
+    margin-right: -8px;
+  }
+
+    [data-coco].coco-button[data-size-xl="lg"][data-theme|="text"] {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+
+      [data-coco].coco-button[data-size-xl="lg"][data-theme|="text"].icon-only .button-icon,[data-coco].coco-button[data-size-xl="lg"][data-theme|="text"][data-collapsed="true"] .button-icon {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+    }
+@media (min-width: 1400px) {
+    [data-coco].coco-button[data-size-xxl="xs"] .button-content,
+      [data-coco].coco-button[data-size-2xl="xs"] .button-content {
+      font-size: 14px;
+      line-height: 14px;
+    }
+
+    [data-coco].coco-button[data-size-xxl="xs"] .button-icon [data-component="icon"],[data-coco].coco-button[data-size-xxl="xs"] .button-toggle,
+      [data-coco].coco-button[data-size-2xl="xs"] .button-icon [data-component="icon"],
+      [data-coco].coco-button[data-size-2xl="xs"] .button-toggle {
+    height: 0.875rem;
+    width: 0.875rem;
+  }
+
+    [data-coco].coco-button[data-size-xxl="xs"][data-theme],
+      [data-coco].coco-button[data-size-2xl="xs"][data-theme] {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+
+    [data-coco].coco-button[data-size-xxl="xs"].icon-only .button-icon,[data-coco].coco-button[data-size-xxl="xs"][data-collapsed="true"] .button-icon,
+      [data-coco].coco-button[data-size-2xl="xs"].icon-only .button-icon,
+      [data-coco].coco-button[data-size-2xl="xs"][data-collapsed="true"] .button-icon {
+    margin-left: -0.25rem;
+    margin-right: -0.25rem;
+  }
+
+    [data-coco].coco-button[data-size-xxl="xs"][data-theme|="text"],
+      [data-coco].coco-button[data-size-2xl="xs"][data-theme|="text"] {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+      [data-coco].coco-button[data-size-xxl="xs"][data-theme|="text"].icon-only .button-icon,[data-coco].coco-button[data-size-xxl="xs"][data-theme|="text"][data-collapsed="true"] .button-icon,
+      [data-coco].coco-button[data-size-2xl="xs"][data-theme|="text"].icon-only .button-icon,
+      [data-coco].coco-button[data-size-2xl="xs"][data-theme|="text"][data-collapsed="true"] .button-icon {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  [data-coco].coco-button[data-size-xxl="sm"] .button-content,
+      [data-coco].coco-button[data-size-2xl="sm"] .button-content {
+    font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-size: 14px;
+    line-height: 16px;
+    font-weight: 600;
+  }
+
+    [data-coco].coco-button[data-size-xxl="sm"] .button-icon [data-component="icon"],[data-coco].coco-button[data-size-xxl="sm"] .button-toggle,
+      [data-coco].coco-button[data-size-2xl="sm"] .button-icon [data-component="icon"],
+      [data-coco].coco-button[data-size-2xl="sm"] .button-toggle {
+    height: 1rem;
+    width: 1rem;
+  }
+
+    [data-coco].coco-button[data-size-xxl="sm"][data-theme],
+      [data-coco].coco-button[data-size-2xl="sm"][data-theme] {
+    padding-top: 0.625rem;
+    padding-bottom: 0.625rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+      [data-coco].coco-button[data-size-xxl="sm"][data-theme].icon-only .button-icon,[data-coco].coco-button[data-size-xxl="sm"][data-theme][data-collapsed="true"] .button-icon,
+      [data-coco].coco-button[data-size-2xl="sm"][data-theme].icon-only .button-icon,
+      [data-coco].coco-button[data-size-2xl="sm"][data-theme][data-collapsed="true"] .button-icon {
+    margin-left: -0.375rem;
+    margin-right: -0.375rem;
+  }
+
+    [data-coco].coco-button[data-size-xxl="sm"][data-theme|="text"],
+      [data-coco].coco-button[data-size-2xl="sm"][data-theme|="text"] {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+      [data-coco].coco-button[data-size-xxl="sm"][data-theme|="text"].icon-only .button-icon,[data-coco].coco-button[data-size-xxl="sm"][data-theme|="text"][data-collapsed="true"] .button-icon,
+      [data-coco].coco-button[data-size-2xl="sm"][data-theme|="text"].icon-only .button-icon,
+      [data-coco].coco-button[data-size-2xl="sm"][data-theme|="text"][data-collapsed="true"] .button-icon {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  [data-coco].coco-button[data-size-xxl="md"] .button-content,
+      [data-coco].coco-button[data-size-2xl="md"] .button-content {
+    font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 600;
+  }
+
+    [data-coco].coco-button[data-size-xxl="md"] .button-icon [data-component="icon"],[data-coco].coco-button[data-size-xxl="md"] .button-toggle,
+      [data-coco].coco-button[data-size-2xl="md"] .button-icon [data-component="icon"],
+      [data-coco].coco-button[data-size-2xl="md"] .button-toggle {
+    height: 1.25rem;
+    width: 1.25rem;
+  }
+
+    [data-coco].coco-button[data-size-xxl="md"][data-theme],
+      [data-coco].coco-button[data-size-2xl="md"][data-theme] {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+
+      [data-coco].coco-button[data-size-xxl="md"][data-theme].icon-only .button-icon,[data-coco].coco-button[data-size-xxl="md"][data-theme][data-collapsed="true"] .button-icon,
+      [data-coco].coco-button[data-size-2xl="md"][data-theme].icon-only .button-icon,
+      [data-coco].coco-button[data-size-2xl="md"][data-theme][data-collapsed="true"] .button-icon {
+    margin-left: -0.5rem;
+    margin-right: -0.5rem;
+  }
+
+    [data-coco].coco-button[data-size-xxl="md"][data-theme|="text"],
+      [data-coco].coco-button[data-size-2xl="md"][data-theme|="text"] {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+
+      [data-coco].coco-button[data-size-xxl="md"][data-theme|="text"].icon-only .button-icon,[data-coco].coco-button[data-size-xxl="md"][data-theme|="text"][data-collapsed="true"] .button-icon,
+      [data-coco].coco-button[data-size-2xl="md"][data-theme|="text"].icon-only .button-icon,
+      [data-coco].coco-button[data-size-2xl="md"][data-theme|="text"][data-collapsed="true"] .button-icon {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  [data-coco].coco-button[data-size-xxl="lg"] .button-content,
+      [data-coco].coco-button[data-size-2xl="lg"] .button-content {
+    font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-size: 18px;
+    line-height: 24px;
+    font-weight: 600;
+  }
+
+    [data-coco].coco-button[data-size-xxl="lg"] .button-icon [data-component="icon"],[data-coco].coco-button[data-size-xxl="lg"] .button-toggle,
+      [data-coco].coco-button[data-size-2xl="lg"] .button-icon [data-component="icon"],
+      [data-coco].coco-button[data-size-2xl="lg"] .button-toggle {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+
+    [data-coco].coco-button[data-size-xxl="lg"][data-theme],
+      [data-coco].coco-button[data-size-2xl="lg"][data-theme] {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
+      [data-coco].coco-button[data-size-xxl="lg"][data-theme].icon-only .button-icon,[data-coco].coco-button[data-size-xxl="lg"][data-theme][data-collapsed="true"] .button-inner,
+      [data-coco].coco-button[data-size-2xl="lg"][data-theme].icon-only .button-icon,
+      [data-coco].coco-button[data-size-2xl="lg"][data-theme][data-collapsed="true"] .button-inner {
+    margin-left: -8px;
+    margin-right: -8px;
+  }
+
+    [data-coco].coco-button[data-size-xxl="lg"][data-theme|="text"],
+      [data-coco].coco-button[data-size-2xl="lg"][data-theme|="text"] {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+
+      [data-coco].coco-button[data-size-xxl="lg"][data-theme|="text"].icon-only .button-icon,[data-coco].coco-button[data-size-xxl="lg"][data-theme|="text"][data-collapsed="true"] .button-icon,
+      [data-coco].coco-button[data-size-2xl="lg"][data-theme|="text"].icon-only .button-icon,
+      [data-coco].coco-button[data-size-2xl="lg"][data-theme|="text"][data-collapsed="true"] .button-icon {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+    }
+@media (min-width: 1800px) {
+    [data-coco].coco-button[data-size-max="xs"] .button-content {
+      font-size: 14px;
+      line-height: 14px;
+    }
+
+    [data-coco].coco-button[data-size-max="xs"] .button-icon [data-component="icon"],[data-coco].coco-button[data-size-max="xs"] .button-toggle {
+    height: 0.875rem;
+    width: 0.875rem;
+  }
+
+    [data-coco].coco-button[data-size-max="xs"][data-theme] {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+
+    [data-coco].coco-button[data-size-max="xs"].icon-only .button-icon,[data-coco].coco-button[data-size-max="xs"][data-collapsed="true"] .button-icon {
+    margin-left: -0.25rem;
+    margin-right: -0.25rem;
+  }
+
+    [data-coco].coco-button[data-size-max="xs"][data-theme|="text"] {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+      [data-coco].coco-button[data-size-max="xs"][data-theme|="text"].icon-only .button-icon,[data-coco].coco-button[data-size-max="xs"][data-theme|="text"][data-collapsed="true"] .button-icon {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  [data-coco].coco-button[data-size-max="sm"] .button-content {
+    font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-size: 14px;
+    line-height: 16px;
+    font-weight: 600;
+  }
+
+    [data-coco].coco-button[data-size-max="sm"] .button-icon [data-component="icon"],[data-coco].coco-button[data-size-max="sm"] .button-toggle {
+    height: 1rem;
+    width: 1rem;
+  }
+
+    [data-coco].coco-button[data-size-max="sm"][data-theme] {
+    padding-top: 0.625rem;
+    padding-bottom: 0.625rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+      [data-coco].coco-button[data-size-max="sm"][data-theme].icon-only .button-icon,[data-coco].coco-button[data-size-max="sm"][data-theme][data-collapsed="true"] .button-icon {
+    margin-left: -0.375rem;
+    margin-right: -0.375rem;
+  }
+
+    [data-coco].coco-button[data-size-max="sm"][data-theme|="text"] {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+      [data-coco].coco-button[data-size-max="sm"][data-theme|="text"].icon-only .button-icon,[data-coco].coco-button[data-size-max="sm"][data-theme|="text"][data-collapsed="true"] .button-icon {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  [data-coco].coco-button[data-size-max="md"] .button-content {
+    font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 600;
+  }
+
+    [data-coco].coco-button[data-size-max="md"] .button-icon [data-component="icon"],[data-coco].coco-button[data-size-max="md"] .button-toggle {
+    height: 1.25rem;
+    width: 1.25rem;
+  }
+
+    [data-coco].coco-button[data-size-max="md"][data-theme] {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+
+      [data-coco].coco-button[data-size-max="md"][data-theme].icon-only .button-icon,[data-coco].coco-button[data-size-max="md"][data-theme][data-collapsed="true"] .button-icon {
+    margin-left: -0.5rem;
+    margin-right: -0.5rem;
+  }
+
+    [data-coco].coco-button[data-size-max="md"][data-theme|="text"] {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+
+      [data-coco].coco-button[data-size-max="md"][data-theme|="text"].icon-only .button-icon,[data-coco].coco-button[data-size-max="md"][data-theme|="text"][data-collapsed="true"] .button-icon {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  [data-coco].coco-button[data-size-max="lg"] .button-content {
+    font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-size: 18px;
+    line-height: 24px;
+    font-weight: 600;
+  }
+
+    [data-coco].coco-button[data-size-max="lg"] .button-icon [data-component="icon"],[data-coco].coco-button[data-size-max="lg"] .button-toggle {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+
+    [data-coco].coco-button[data-size-max="lg"][data-theme] {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
+      [data-coco].coco-button[data-size-max="lg"][data-theme].icon-only .button-icon,[data-coco].coco-button[data-size-max="lg"][data-theme][data-collapsed="true"] .button-inner {
+    margin-left: -8px;
+    margin-right: -8px;
+  }
+
+    [data-coco].coco-button[data-size-max="lg"][data-theme|="text"] {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+
+      [data-coco].coco-button[data-size-max="lg"][data-theme|="text"].icon-only .button-icon,[data-coco].coco-button[data-size-max="lg"][data-theme|="text"][data-collapsed="true"] .button-icon {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+    }
+[data-coco][data-component="button-group"] {
+    width: -moz-fit-content;
+    width: fit-content;
+    border-radius: 44px;
+  }
+[data-coco][data-component="button-group"][data-collapsible="true"] {
+  opacity: 0;
+}
+[data-coco][data-component="button-group"][data-collapsible="true"].button-group-ready {
+  opacity: 1;
 }
-[data-coco].coco-button {
+[data-coco][data-component="button-group"] .button-group-buttons {
   display: flex;
-  width: auto;
-  flex: none;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  border-width: 1px;
-  border-color: transparent;
-  background-color: transparent;
-  color: currentColor;
-  text-decoration-line: none;
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-[data-coco].coco-button:focus-visible {
-  outline-width: 0px;
-}
-[data-coco].coco-button {
-    width: -moz-min-content;
-    width: min-content;
-  }
-[data-coco].coco-button .button-inner {
-  margin-left: auto;
-  margin-right: auto;
-  display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
-  text-align: center;
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
       width: -moz-fit-content;
       width: fit-content;
 }
-[data-coco].coco-button .button-content {
-  position: relative;
-  order: 2;
-  display: inline-flex;
-  align-items: center;
-  white-space: nowrap;
-  line-height: 1;
-}
-[data-coco].coco-button .button-state-content {
-  display: contents;
-}
-[data-coco].coco-button .button-icon {
-  order: 1;
-  display: inline-flex;
-  align-items: center;
-}
-[data-coco].coco-button .button-dropdown {
-  display: contents;
-  border-radius: 0.375rem;
-}
-[data-coco].coco-button .button-toggle {
-  order: 3;
+[data-coco][data-component="button-group"] .divider {
+  width: 0px;
+  align-self: stretch;
+  border-left-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
-/* disabled */
-[data-coco].coco-button[data-disabled="true"] {
-  pointer-events: none;
-  cursor: not-allowed;
+[data-coco][data-component="button-group"][data-align="end"] .button-group-buttons {
+  margin-left: auto;
 }
-/* loading */
-@keyframes spin {
-
-  to {
-    transform: rotate(360deg);
-  }
+[data-coco][data-component="button-group"][data-segmented="true"] .button-group-buttons {
+  -moz-column-gap: 0px;
+       column-gap: 0px;
 }
-[data-coco].coco-button[data-state="loading"] .button-icon {
-  animation: spin 1.5s linear infinite;
+[data-coco][data-component="button-group"][data-segmented="true"] .coco-button-wrapper:not(:first-child) .coco-button {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+  border-left-width: 0px;
 }
-/* Fit */
-[data-coco].coco-button[data-fit="full"] {
-  width: 100%;
+[data-coco][data-component="button-group"][data-segmented="true"] .coco-button-wrapper:not(:last-child) .coco-button {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
 }
-/* Icons */
-[data-coco].coco-button[data-icon-position="end"] .button-content {
-  order: 1;
+[data-coco][data-component="button-group"][data-segmented="true"][data-floating="true"] {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-[data-coco].coco-button[data-icon-position="end"] .button-icon {
-  order: 2;
+[data-coco][data-component="button-to"] {
+  display: contents;
 }
-[data-coco].coco-button[data-icon-position="end"] .button-toggle {
-  order: 3;
+[data-coco][data-component="button-to"] form,
+    [data-coco][data-component="button-to"] input {
+  display: contents;
 }
-[data-coco].coco-button.with-icon[data-collapsed="true"] .button-content {
-        display: none;
-      }
 [data-coco][data-component="dropdown"] {
     width: -moz-fit-content;
     width: fit-content;
@@ -1970,7 +3281,95 @@ select {
   }
 .icon {
   }
-/* branded */
+/* paragraphs */
+/* labels */
+/* standard headings */
+/* standard subheadings */
+/* display headings */
+/* branded headings */
+/* branded display headings */
+.coco-button-xs .button-content {
+      font-size: 14px;
+      line-height: 14px;
+    }
+.coco-button-xs .button-icon [data-component="icon"],
+    .coco-button-xs .button-toggle {
+  height: 0.875rem;
+  width: 0.875rem;
+}
+.coco-button-xs.icon-only .button-icon,
+    .coco-button-xs[data-collapsed="true"] .button-icon {
+  margin-left: -0.25rem;
+  margin-right: -0.25rem;
+}
+.coco-button-xs[data-theme|="text"].icon-only .button-icon,
+      .coco-button-xs[data-theme|="text"][data-collapsed="true"] .button-icon {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.coco-button-sm .button-content {
+  font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 14px;
+  line-height: 16px;
+  font-weight: 600;
+}
+.coco-button-sm .button-icon [data-component="icon"],
+    .coco-button-sm .button-toggle {
+  height: 1rem;
+  width: 1rem;
+}
+.coco-button-sm[data-theme].icon-only .button-icon,
+      .coco-button-sm[data-theme][data-collapsed="true"] .button-icon {
+  margin-left: -0.375rem;
+  margin-right: -0.375rem;
+}
+.coco-button-sm[data-theme|="text"].icon-only .button-icon,
+      .coco-button-sm[data-theme|="text"][data-collapsed="true"] .button-icon {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.coco-button-md .button-content {
+  font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 600;
+}
+.coco-button-md .button-icon [data-component="icon"],
+    .coco-button-md .button-toggle {
+  height: 1.25rem;
+  width: 1.25rem;
+}
+.coco-button-md[data-theme].icon-only .button-icon,
+      .coco-button-md[data-theme][data-collapsed="true"] .button-icon {
+  margin-left: -0.5rem;
+  margin-right: -0.5rem;
+}
+.coco-button-md[data-theme|="text"].icon-only .button-icon,
+      .coco-button-md[data-theme|="text"][data-collapsed="true"] .button-icon {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.coco-button-lg .button-content {
+  font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 600;
+}
+.coco-button-lg .button-icon [data-component="icon"],
+    .coco-button-lg .button-toggle {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+.coco-button-lg[data-theme].icon-only .button-icon,
+      .coco-button-lg[data-theme][data-collapsed="true"] .button-inner {
+  margin-left: -8px;
+  margin-right: -8px;
+}
+.coco-button-lg[data-theme|="text"].icon-only .button-icon,
+      .coco-button-lg[data-theme|="text"][data-collapsed="true"] .button-icon {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
 .tippy-box[data-animation=fade][data-state=hidden]{opacity:0}
 [data-tippy-root]{max-width:calc(100vw - 10px)}
 .tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}
@@ -2007,3 +3406,4 @@ select {
 .tippy-box[data-placement^=right]>.tippy-svg-arrow>svg:first-child:not(:last-child){right:12px}
 .tippy-arrow{border-color:inherit}
 .tippy-arrow:after{content:"";z-index:-1;position:absolute;border-color:transparent;border-style:solid}
+/* Tippy  */