@code-coaching/vuetiful 0.12.0 → 0.13.0

package/dist/styles/all.css

@@ -602,9 +602,9 @@ h4:not(.unstyled):is(:not(.prose *)) {
 }
 
 h5:not(.unstyled):is(:not(.prose *)) {
-  font-size: 1rem;
-  line-height: 1.5rem;
   font-family: var(--theme-font-family-heading);
+  font-size:1rem;
+  line-height:1.5rem;
 }
 
 @media (min-width: 768px) {
@@ -631,8 +631,8 @@ h6:not(.unstyled):is(:not(.prose *)) {
 
 p:not(.unstyled):is(:not(.prose *)) {
   /* NOTE: do not hardcode a text color style here. It makes color overrides difficult. */
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size:1rem;
+  line-height:1.5rem;
 }
 
 a:not(.unstyled):not(.permalink):is(:not(.prose *)):not(.btn):not(.btn-icon):not(.app-bar a):not(
@@ -674,7 +674,10 @@ blockquote:not(.unstyled):is(:not(.prose *)) {
 }
 
 blockquote:not(.unstyled):is(:not(.prose *)){
-  padding-left:1rem
+  padding-right:1rem;
+  padding-left:1rem;
+  font-size:1rem;
+  line-height:1.5rem
 }
 
 .dark blockquote:not(.unstyled):is(:not(.prose *)){
@@ -729,11 +732,11 @@ pre:not(.unstyled):not(.code-block pre):is(:not(.prose *)) {
   overflow-x: auto;
   background-color: rgb(23 23 23 / 0.9);
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  font-size: 1rem;
-  line-height: 1.5rem;
   white-space:pre-wrap;
   background-color:#171717e6;
   padding:1rem;
+  font-size:1rem;
+  line-height:1.5rem;
   --tw-text-opacity: 1;
   color:rgb(255 255 255 / var(--tw-text-opacity));
   border-radius:var(--theme-rounded-container);
@@ -1081,6 +1084,23 @@ progress::-webkit-progress-value {
   color: rgb(96 165 250 / var(--tw-text-opacity));
 }
 
+.variant-filled {
+  background-color: rgb(var(--color-surface-900));
+}
+
+.dark .variant-filled {
+  background-color: rgb(var(--color-surface-50));
+}
+
+.variant-filled {
+  color: rgb(var(--color-surface-50));
+}
+
+.dark .variant-filled {
+  background-color:rgb(var(--color-surface-50));
+  color:rgb(var(--color-surface-900));
+}
+
 .variant-soft,.variant-soft-surface {
   background-color: rgb(var(--color-surface-400) / 0.2);
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
@@ -1111,6 +1131,7 @@ progress::-webkit-progress-value {
 
 .badge {
   white-space: nowrap;
+  display:inline-flex;
   align-items:center;
   justify-content:center;
   font-weight: 600;
@@ -1118,8 +1139,8 @@ progress::-webkit-progress-value {
   line-height:1rem;
   padding-left: 0.5rem;
   padding-right: 0.5rem;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
+  padding-top:.25rem;
+  padding-bottom:.25rem;
   border-radius:var(--theme-rounded-base);
 }
 
@@ -1141,13 +1162,14 @@ progress::-webkit-progress-value {
   padding-right: 1.25rem;
   padding-top: 9px;
   padding-bottom: 9px;
-  font-size: 1rem;
-  line-height: 1.5rem;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
+  display:inline-flex;
   align-items:center;
   justify-content:center;
   text-align:center;
+  font-size:1rem;
+  line-height:1.5rem;
   transition-property:all;
   transition-timing-function:cubic-bezier(.4,0,.2,1);
   transition-duration:.15s;
@@ -1164,8 +1186,8 @@ progress::-webkit-progress-value {
   padding-right: 1.25rem;
   padding-top: 9px;
   padding-bottom: 9px;
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size:1rem;
+  line-height:1.5rem;
   /* Core */
   white-space: nowrap;
   text-align:center;
@@ -1182,6 +1204,7 @@ progress::-webkit-progress-value {
 }
 
 .btn{
+  display:inline-flex;
   align-items:center;
   justify-content:center
   /* States */
@@ -1237,13 +1260,14 @@ progress::-webkit-progress-value {
   padding-right: 1.25rem;
   padding-top: 9px;
   padding-bottom: 9px;
-  font-size: 1rem;
-  line-height: 1.5rem;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
+  display:inline-flex;
   align-items:center;
   justify-content:center;
   text-align:center;
+  font-size:1rem;
+  line-height:1.5rem;
   transition-property:all;
   transition-timing-function:cubic-bezier(.4,0,.2,1);
   transition-duration:.15s;
@@ -1260,8 +1284,8 @@ progress::-webkit-progress-value {
   padding-right: 1.25rem;
   padding-top: 9px;
   padding-bottom: 9px;
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size:1rem;
+  line-height:1.5rem;
   /* Core */
   white-space: nowrap;
   text-align:center;
@@ -1278,6 +1302,7 @@ progress::-webkit-progress-value {
 }
 
 .btn-icon{
+  display:inline-flex;
   align-items:center;
   justify-content:center
   /* States */
@@ -1324,13 +1349,14 @@ progress::-webkit-progress-value {
   padding-right: 1.25rem;
   padding-top: 9px;
   padding-bottom: 9px;
-  font-size: 1rem;
-  line-height: 1.5rem;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
+  display:inline-flex;
   align-items:center;
   justify-content:center;
   text-align:center;
+  font-size:1rem;
+  line-height:1.5rem;
   transition-property:all;
   transition-timing-function:cubic-bezier(.4,0,.2,1);
   transition-duration:.15s;
@@ -1347,8 +1373,8 @@ progress::-webkit-progress-value {
   padding-right: 1.25rem;
   padding-top: 9px;
   padding-bottom: 9px;
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size:1rem;
+  line-height:1.5rem;
   /* Core */
   white-space: nowrap;
   text-align:center;
@@ -1365,6 +1391,7 @@ progress::-webkit-progress-value {
 }
 
 .btn-icon{
+  display:inline-flex;
   align-items:center;
   justify-content:center
   /* States */
@@ -1395,9 +1422,9 @@ progress::-webkit-progress-value {
 
 .btn-icon {
   width: 43px;
-  font-size: 1rem;
-  line-height: 1.5rem;
   aspect-ratio:1 / 1;
+  font-size:1rem;
+  line-height:1.5rem;
   border-radius: 9999px;
 }
 
@@ -1424,6 +1451,7 @@ progress::-webkit-progress-value {
 }
 
 .chip{
+  display:inline-flex;
   align-items:center;
   justify-content:center
 }
@@ -1495,10 +1523,10 @@ progress::-webkit-progress-value {
   white-space: nowrap;
   display:flex;
   align-items:center;
-  padding-left: 1rem;
-  padding-right: 1rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
+  padding-left:1rem;
+  padding-right:1rem;
 }
 
 .list-nav a:hover,.list-nav button:hover,.list-option:hover {
@@ -1525,6 +1553,7 @@ progress::-webkit-progress-value {
 
 .badge {
   white-space: nowrap;
+  display:inline-flex;
   align-items:center;
   justify-content:center;
   /* Text */
@@ -1534,8 +1563,8 @@ progress::-webkit-progress-value {
   /* Padding */
   padding-left: 0.5rem;
   padding-right: 0.5rem;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
+  padding-top:.25rem;
+  padding-bottom:.25rem;
   /* Theme: Rounded */
   border-radius:var(--theme-rounded-base);
 }
@@ -1586,13 +1615,14 @@ button:disabled:active {
   padding-right: 1.25rem;
   padding-top: 9px;
   padding-bottom: 9px;
-  font-size: 1rem;
-  line-height: 1.5rem;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
+  display:inline-flex;
   align-items:center;
   justify-content:center;
   text-align:center;
+  font-size:1rem;
+  line-height:1.5rem;
   transition-property:all;
   transition-timing-function:cubic-bezier(.4,0,.2,1);
   transition-duration:.15s;
@@ -1609,8 +1639,8 @@ button:disabled:active {
   padding-right: 1.25rem;
   padding-top: 9px;
   padding-bottom: 9px;
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size:1rem;
+  line-height:1.5rem;
   /* Core */
   white-space: nowrap;
   text-align:center;
@@ -1627,6 +1657,7 @@ button:disabled:active {
 }
 
 .btn{
+  display:inline-flex;
   align-items:center;
   justify-content:center
   /* States */
@@ -1691,13 +1722,14 @@ button:disabled:active {
   padding-right: 1.25rem;
   padding-top: 9px;
   padding-bottom: 9px;
-  font-size: 1rem;
-  line-height: 1.5rem;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
+  display:inline-flex;
   align-items:center;
   justify-content:center;
   text-align:center;
+  font-size:1rem;
+  line-height:1.5rem;
   transition-property:all;
   transition-timing-function:cubic-bezier(.4,0,.2,1);
   transition-duration:.15s;
@@ -1714,8 +1746,8 @@ button:disabled:active {
   padding-right: 1.25rem;
   padding-top: 9px;
   padding-bottom: 9px;
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size:1rem;
+  line-height:1.5rem;
   /* Core */
   white-space: nowrap;
   text-align:center;
@@ -1732,6 +1764,7 @@ button:disabled:active {
 }
 
 .btn-icon{
+  display:inline-flex;
   align-items:center;
   justify-content:center
   /* States */
@@ -1778,13 +1811,14 @@ button:disabled:active {
   padding-right: 1.25rem;
   padding-top: 9px;
   padding-bottom: 9px;
-  font-size: 1rem;
-  line-height: 1.5rem;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
+  display:inline-flex;
   align-items:center;
   justify-content:center;
   text-align:center;
+  font-size:1rem;
+  line-height:1.5rem;
   transition-property:all;
   transition-timing-function:cubic-bezier(.4,0,.2,1);
   transition-duration:.15s;
@@ -1801,8 +1835,8 @@ button:disabled:active {
   padding-right: 1.25rem;
   padding-top: 9px;
   padding-bottom: 9px;
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size:1rem;
+  line-height:1.5rem;
   /* Core */
   white-space: nowrap;
   text-align:center;
@@ -1819,6 +1853,7 @@ button:disabled:active {
 }
 
 .btn-icon{
+  display:inline-flex;
   align-items:center;
   justify-content:center
   /* States */
@@ -1850,9 +1885,9 @@ button:disabled:active {
 .btn-icon {
   /* Size (match base) */
   width: 43px;
-  font-size: 1rem;
-  line-height: 1.5rem;
   aspect-ratio:1 / 1;
+  font-size:1rem;
+  line-height:1.5rem;
   /* Rounded */
   border-radius: 9999px;
 }
@@ -1896,13 +1931,14 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
   padding-right: 1.25rem;
   padding-top: 9px;
   padding-bottom: 9px;
-  font-size: 1rem;
-  line-height: 1.5rem;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
+  display:inline-flex;
   align-items:center;
   justify-content:center;
   text-align:center;
+  font-size:1rem;
+  line-height:1.5rem;
   transition-property:all;
   transition-timing-function:cubic-bezier(.4,0,.2,1);
   transition-duration:.15s;
@@ -1919,8 +1955,8 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
   padding-right: 1.25rem;
   padding-top: 9px;
   padding-bottom: 9px;
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size:1rem;
+  line-height:1.5rem;
   /* Core */
   white-space: nowrap;
   text-align:center;
@@ -1937,6 +1973,7 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button > :not([hidde
 }
 
 input[type="file"]:not(.file-dropzone-input)::file-selector-button{
+  display:inline-flex;
   align-items:center;
   justify-content:center
   /* States */
@@ -1989,13 +2026,14 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
   padding-right: 1.25rem;
   padding-top: 9px;
   padding-bottom: 9px;
-  font-size: 1rem;
-  line-height: 1.5rem;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
+  display:inline-flex;
   align-items:center;
   justify-content:center;
   text-align:center;
+  font-size:1rem;
+  line-height:1.5rem;
   transition-property:all;
   transition-timing-function:cubic-bezier(.4,0,.2,1);
   transition-duration:.15s;
@@ -2012,8 +2050,8 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
   padding-right: 1.25rem;
   padding-top: 9px;
   padding-bottom: 9px;
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size:1rem;
+  line-height:1.5rem;
   /* Core */
   white-space: nowrap;
   text-align:center;
@@ -2030,6 +2068,7 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button > :not([hidde
 }
 
 input[type="file"]:not(.file-dropzone-input)::file-selector-button{
+  display:inline-flex;
   align-items:center;
   justify-content:center
   /* States */
@@ -2122,6 +2161,7 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
 }
 
 .chip{
+  display:inline-flex;
   align-items:center;
   justify-content:center
   /* States */
@@ -2204,10 +2244,10 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
   display:flex;
   align-items:center;
   /* Padding */
-  padding-left: 1rem;
-  padding-right: 1rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
+  padding-left:1rem;
+  padding-right:1rem;
   /* Hover */
 }
 
@@ -2275,6 +2315,23 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
 
 /* Filled */
 
+.variant-filled {
+  background-color: rgb(var(--color-surface-900));
+}
+
+.dark .variant-filled {
+  background-color: rgb(var(--color-surface-50));
+}
+
+.variant-filled {
+  color: rgb(var(--color-surface-50));
+}
+
+.dark .variant-filled {
+  background-color:rgb(var(--color-surface-50));
+  color:rgb(var(--color-surface-900));
+}
+
 /* Ringed */
 
 /* Ghost */
@@ -2346,6 +2403,10 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
   display: flex;
 }
 
+.inline-flex {
+  display: inline-flex;
+}
+
 .grid {
   display: grid;
 }
@@ -2425,6 +2486,10 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -2461,6 +2526,10 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
   gap: 0px;
 }
 
+.gap-1 {
+  gap: 0.25rem;
+}
+
 .gap-4 {
   gap: 1rem;
 }
@@ -2535,6 +2604,10 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
   background-color: rgb(var(--color-surface-900) / var(--tw-bg-opacity));
 }
 
+.p-1 {
+  padding: 0.25rem;
+}
+
 .p-2 {
   padding: 0.5rem;
 }
@@ -2543,6 +2616,16 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
   padding: 1rem;
 }
 
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
 .pb-0 {
   padding-bottom: 0px;
 }
@@ -2559,6 +2642,11 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
   text-align: center;
 }
 
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -2610,6 +2698,10 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
   color: rgb(255 255 255 / 0.5);
 }
 
+.opacity-50 {
+  opacity: 0.5;
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -2952,6 +3044,10 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
   background-color: rgb(var(--color-surface-800));
 }
 
+.bg-surface-200-700-token {
+  background-color: rgb(var(--color-surface-200));
+}
+
 .dark .bg-surface-200-700-token {
   background-color: rgb(var(--color-surface-700));
 }
@@ -3244,6 +3340,10 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
   border-color: rgb(var(--color-surface-600));
 }
 
+.border-surface-400-500-token {
+  border-color: rgb(var(--color-surface-400));
+}
+
 .dark .border-surface-400-500-token {
   border-color: rgb(var(--color-surface-500));
 }
@@ -3868,6 +3968,82 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
   --tw-ring-color: rgb(var(--color-surface-400) / 1);
 }
 
+.hover\:variant-ghost:hover {
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-inset: inset;
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(var(--color-surface-500) / var(--tw-ring-opacity));
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);
+}
+
+:is(.dark .hover\:variant-ghost:hover) {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(var(--color-surface-500) / var(--tw-ring-opacity));
+}
+
+.hover\:variant-ghost:hover {
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-inset: inset;
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(var(--color-surface-500) / var(--tw-ring-opacity));
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);
+}
+
+:is(.dark .hover\:variant-ghost:hover) {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(var(--color-surface-500) / var(--tw-ring-opacity));
+}
+
+.hover\:variant-ghost:hover {
+  background-color: rgb(var(--color-surface-500) / 0.2);
+}
+
+:is(.dark .hover\:variant-ghost:hover) {
+  background-color: rgb(var(--color-surface-500) / 0.2);
+}
+
+.hover\:variant-ghost:hover {
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-inset: inset;
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(var(--color-surface-500) / var(--tw-ring-opacity));
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);
+}
+
+:is(.dark .hover\:variant-ghost:hover) {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(var(--color-surface-500) / var(--tw-ring-opacity));
+}
+
+.hover\:variant-ghost:hover {
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-inset: inset;
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(var(--color-surface-500) / var(--tw-ring-opacity));
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);
+}
+
+:is(.dark .hover\:variant-ghost:hover) {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(var(--color-surface-500) / var(--tw-ring-opacity));
+}
+
+.hover\:variant-ghost:hover {
+  background-color: rgb(var(--color-surface-500) / 0.2);
+}
+
+:is(.dark .hover\:variant-ghost:hover) {
+  background-color: rgb(var(--color-surface-500) / 0.2);
+}
+
 .hover\:cursor-pointer:hover {
   cursor: pointer;
 }
@@ -3886,6 +4062,11 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
   background-color: rgb(var(--color-secondary-500) / 0.1);
 }
 
+:is(.dark .dark\:text-surface-50) {
+  --tw-text-opacity: 1;
+  color: rgb(var(--color-surface-50) / var(--tw-text-opacity));
+}
+
 @media (min-width: 640px) {
   .sm\:w-20 {
     width: 5rem;
@@ -4466,6 +4647,10 @@ img,video{
   display:flex
 }
 
+.inline-flex{
+  display:inline-flex
+}
+
 .grid{
   display:grid
 }
@@ -4545,6 +4730,10 @@ img,video{
   transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }
 
+.cursor-not-allowed{
+  cursor:not-allowed
+}
+
 .cursor-pointer{
   cursor:pointer
 }
@@ -4581,6 +4770,10 @@ img,video{
   gap:0px
 }
 
+.gap-1{
+  gap:.25rem
+}
+
 .gap-4{
   gap:1rem
 }
@@ -4655,6 +4848,10 @@ img,video{
   background-color:rgb(var(--color-surface-900) / var(--tw-bg-opacity))
 }
 
+.p-1{
+  padding:.25rem
+}
+
 .p-2{
   padding:.5rem
 }
@@ -4663,6 +4860,16 @@ img,video{
   padding:1rem
 }
 
+.px-4{
+  padding-left:1rem;
+  padding-right:1rem
+}
+
+.py-1{
+  padding-top:.25rem;
+  padding-bottom:.25rem
+}
+
 .pb-0{
   padding-bottom:0
 }
@@ -4679,6 +4886,11 @@ img,video{
   text-align:center
 }
 
+.text-base{
+  font-size:1rem;
+  line-height:1.5rem
+}
+
 .text-sm{
   font-size:.875rem;
   line-height:1.25rem
@@ -4730,6 +4942,10 @@ img,video{
   color:#ffffff80
 }
 
+.opacity-50{
+  opacity:.5
+}
+
 .shadow{
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -5072,6 +5288,10 @@ img,video{
   background-color:rgb(var(--color-surface-800))
 }
 
+.bg-surface-200-700-token{
+  background-color:rgb(var(--color-surface-200))
+}
+
 .dark .bg-surface-200-700-token{
   background-color:rgb(var(--color-surface-700))
 }
@@ -5364,6 +5584,10 @@ img,video{
   border-color:rgb(var(--color-surface-600))
 }
 
+.border-surface-400-500-token{
+  border-color:rgb(var(--color-surface-400))
+}
+
 .dark .border-surface-400-500-token{
   border-color:rgb(var(--color-surface-500))
 }
@@ -6006,6 +6230,11 @@ img,video{
   background-color:rgb(var(--color-secondary-500) / .1)
 }
 
+:is(.dark .dark\:text-surface-50){
+  --tw-text-opacity: 1;
+  color:rgb(var(--color-surface-50) / var(--tw-text-opacity))
+}
+
 @media (min-width: 640px){
   .sm\:w-20{
     width:5rem