@code-coaching/vuetiful 0.12.1 → 0.13.0

package/dist/styles/all.css

@@ -948,282 +948,24 @@ progress::-webkit-progress-value {
 
 /* === Core Styles === */
 
-.input,
-  .textarea,
-  .select,
-  .input-group {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 200ms;
-  width:100%;
-  transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;
-  transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
-  transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;
-  transition-timing-function:cubic-bezier(.4,0,.2,1);
-  transition-duration:.15s;
-  /* Background */
-  background-color: rgb(var(--color-surface-200));
-}
-
-.dark .input,.dark 
-  .textarea,.dark 
-  .select,.dark 
-  .input-group {
-  background-color: rgb(var(--color-surface-700));
-}
-
-.input,
-  .textarea,
-  .select,
-  .input-group{
-  background-color:rgb(var(--color-surface-200))
-}
-
-.dark .input,.dark 
-  .textarea,.dark 
-  .select,.dark 
-  .input-group{
-  background-color:rgb(var(--color-surface-700))
-}
-
-.input:hover,
-  .textarea:hover,
-  .select:hover,
-  .input-group:hover {
-  --tw-brightness: brightness(1.05);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.input:focus,
-  .textarea:focus,
-  .select:focus,
-  .input-group:focus {
-  --tw-brightness: brightness(1.05);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.input,
-  .textarea,
-  .select,
-  .input-group {
-  /* Ring */
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
-  /* Border */
-  border-width: var(--theme-border-base);
-  border-color: rgb(var(--color-surface-400));
-}
-
-.dark .input,.dark 
-  .textarea,.dark 
-  .select,.dark 
-  .input-group {
-  border-color: rgb(var(--color-surface-500));
-}
-
-.input,
-  .textarea,
-  .select,
-  .input-group{
-  border-width:var(--theme-border-base);
-  border-color:rgb(var(--color-surface-400))
-}
-
-.dark .input,.dark 
-  .textarea,.dark 
-  .select,.dark 
-  .input-group{
-  border-color:rgb(var(--color-surface-500))
-}
-
-.input:focus-within,
-  .textarea:focus-within,
-  .select:focus-within,
-  .input-group:focus-within {
-  --tw-border-opacity: 1;
-  border-color: rgb(var(--color-primary-500) / var(--tw-border-opacity));
-}
-
 /* Base Inputs */
 
-.input,
-  .input-group {
-  border-radius:var(--theme-rounded-base);
-}
-
 /* Container Inputs */
 
 /* Select (size/multiple) */
 
 /* Checkbox & Radio */
 
-.checkbox,
-  .radio {
-  height: 1.25rem;
-  width: 1.25rem;
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
-  cursor:pointer;
-  border-radius:.25rem;
-  /* Background */
-  background-color: rgb(var(--color-surface-200));
-}
-
-.dark .checkbox,.dark 
-  .radio {
-  background-color: rgb(var(--color-surface-700));
-}
-
-.checkbox,
-  .radio{
-  background-color:rgb(var(--color-surface-200))
-}
-
-.dark .checkbox,.dark 
-  .radio{
-  background-color:rgb(var(--color-surface-700))
-}
-
-.checkbox:hover,
-  .radio:hover {
-  --tw-brightness: brightness(1.05);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.checkbox:focus,
-  .radio:focus {
-  --tw-brightness: brightness(1.05);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.checkbox,
-  .radio {
-  /* Border */
-  border-width: var(--theme-border-base);
-  border-color: rgb(var(--color-surface-400));
-}
-
-.dark .checkbox,.dark 
-  .radio {
-  border-color: rgb(var(--color-surface-500));
-}
-
-.checkbox,
-  .radio{
-  border-width:var(--theme-border-base);
-  border-color:rgb(var(--color-surface-400))
-}
-
-.dark .checkbox,.dark 
-  .radio{
-  border-color:rgb(var(--color-surface-500))
-}
-
-.checkbox:focus,
-  .radio:focus {
-  --tw-border-opacity: 1;
-  border-color: rgb(var(--color-primary-500) / var(--tw-border-opacity));
-}
-
-.checkbox:checked,
-  .radio:checked {
-  --tw-bg-opacity: 1;
-  background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
-}
-
-.checkbox:checked:hover,
-  .radio:checked:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
-}
-
-.checkbox:checked:focus,
-  .radio:checked:focus {
-  --tw-bg-opacity: 1;
-  background-color: rgb(var(--color-primary-500) / var(--tw-bg-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(0px + 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);
-}
-
-.radio {
-  border-radius:var(--theme-rounded-base);
-}
-
 /* === Specialized === */
 
 /* File Inputs */
 
-.input[type="file"] {
-  padding:.25rem;
-}
-
 /* Color Picker */
 
 /* https://stackoverflow.com/questions/11167281/webkit-css-to-control-the-box-around-the-color-in-an-inputtype-color */
 
-.input[type="color"] {
-  height: 2.5rem;
-  width: 2.5rem;
-  border-style: none;
-  cursor:pointer;
-  overflow:hidden;
-  border-radius:var(--theme-rounded-base);
-  -webkit-appearance: none;
-  /* WebKit Only */
-}
-
-.input[type="color"]::-webkit-color-swatch-wrapper {
-  padding: 0px;
-}
-
-.input[type="color"]::-webkit-color-swatch {
-  border-style: none;
-}
-
-.input[type="color"]:hover::-webkit-color-swatch {
-  --tw-brightness: brightness(1.1);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.input[type="color"]::-moz-color-swatch {
-  border-style: none;
-}
-
 /* === States === */
 
-.input:disabled,
-  .textarea:disabled,
-  .select:disabled {
-  cursor: not-allowed !important;
-  opacity: 0.5 !important;
-}
-
-.input:disabled:hover,
-  .textarea:disabled:hover,
-  .select:disabled:hover {
-  --tw-brightness: brightness(1) !important;
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
-}
-
-.input[readonly],
-  .textarea[readonly],
-  .select[readonly] {
-  cursor: not-allowed !important;
-  border-width: 0px !important;
-}
-
-.input[readonly]:hover,
-  .textarea[readonly]:hover,
-  .select[readonly]:hover {
-  --tw-brightness: brightness(1) !important;
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
-}
-
 /* === Input Groups === */
 
 /* === Variants === */
@@ -1750,202 +1492,6 @@ progress::-webkit-progress-value {
   margin-bottom:calc(.25rem * var(--tw-space-y-reverse))
 }
 
-.input,.textarea,.select,.input-group {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 200ms;
-  width:100%;
-  transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;
-  transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
-  transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;
-  transition-timing-function:cubic-bezier(.4,0,.2,1);
-  transition-duration:.15s;
-  background-color: rgb(var(--color-surface-200));
-}
-
-.dark .input,.dark .textarea,.dark .select,.dark .input-group {
-  background-color: rgb(var(--color-surface-700));
-}
-
-.input,.textarea,.select,.input-group{
-  background-color:rgb(var(--color-surface-200))
-}
-
-.dark .input,.dark .textarea,.dark .select,.dark .input-group{
-  background-color:rgb(var(--color-surface-700))
-}
-
-.input:hover,.textarea:hover,.select:hover,.input-group:hover {
-  --tw-brightness: brightness(1.05);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.input:focus,.textarea:focus,.select:focus,.input-group:focus {
-  --tw-brightness: brightness(1.05);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.input,.textarea,.select,.input-group {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
-  border-width: var(--theme-border-base);
-  border-color: rgb(var(--color-surface-400));
-}
-
-.dark .input,.dark .textarea,.dark .select,.dark .input-group {
-  border-color: rgb(var(--color-surface-500));
-}
-
-.input,.textarea,.select,.input-group{
-  border-width:var(--theme-border-base);
-  border-color:rgb(var(--color-surface-400))
-}
-
-.dark .input,.dark .textarea,.dark .select,.dark .input-group{
-  border-color:rgb(var(--color-surface-500))
-}
-
-.input:focus-within,.textarea:focus-within,.select:focus-within,.input-group:focus-within {
-  --tw-border-opacity: 1;
-  border-color: rgb(var(--color-primary-500) / var(--tw-border-opacity));
-}
-
-.input,.input-group {
-  border-radius:var(--theme-rounded-base);
-}
-
-.checkbox,.radio {
-  height: 1.25rem;
-  width: 1.25rem;
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
-  cursor:pointer;
-  border-radius:.25rem;
-  background-color: rgb(var(--color-surface-200));
-}
-
-.dark .checkbox,.dark .radio {
-  background-color: rgb(var(--color-surface-700));
-}
-
-.checkbox,.radio{
-  background-color:rgb(var(--color-surface-200))
-}
-
-.dark .checkbox,.dark .radio{
-  background-color:rgb(var(--color-surface-700))
-}
-
-.checkbox:hover,.radio:hover {
-  --tw-brightness: brightness(1.05);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.checkbox:focus,.radio:focus {
-  --tw-brightness: brightness(1.05);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.checkbox,.radio {
-  border-width: var(--theme-border-base);
-  border-color: rgb(var(--color-surface-400));
-}
-
-.dark .checkbox,.dark .radio {
-  border-color: rgb(var(--color-surface-500));
-}
-
-.checkbox,.radio{
-  border-width:var(--theme-border-base);
-  border-color:rgb(var(--color-surface-400))
-}
-
-.dark .checkbox,.dark .radio{
-  border-color:rgb(var(--color-surface-500))
-}
-
-.checkbox:focus,.radio:focus {
-  --tw-border-opacity: 1;
-  border-color: rgb(var(--color-primary-500) / var(--tw-border-opacity));
-}
-
-.checkbox:checked,.radio:checked {
-  --tw-bg-opacity: 1;
-  background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
-}
-
-.checkbox:checked:hover,.radio:checked:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
-}
-
-.checkbox:checked:focus,.radio:checked:focus {
-  --tw-bg-opacity: 1;
-  background-color: rgb(var(--color-primary-500) / var(--tw-bg-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(0px + 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);
-}
-
-.radio {
-  border-radius:var(--theme-rounded-base);
-}
-
-.input[type='file'] {
-  padding:.25rem;
-}
-
-.input[type='color'] {
-  height: 2.5rem;
-  width: 2.5rem;
-  border-style: none;
-  cursor:pointer;
-  overflow:hidden;
-  border-radius:var(--theme-rounded-base);
-  -webkit-appearance: none ;
-}
-
-.input[type='color']::-webkit-color-swatch-wrapper {
-  padding: 0px;
-}
-
-.input[type='color']::-webkit-color-swatch {
-  border-style: none;
-}
-
-.input[type='color']:hover::-webkit-color-swatch {
-  --tw-brightness: brightness(1.1);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.input[type='color']::-moz-color-swatch {
-  border-style: none;
-}
-
-.input:disabled,.textarea:disabled,.select:disabled {
-  cursor: not-allowed !important;
-  opacity: 0.5 !important;
-}
-
-.input:disabled:hover,.textarea:disabled:hover,.select:disabled:hover {
-  --tw-brightness: brightness(1) !important;
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
-}
-
-.input[readonly],.textarea[readonly],.select[readonly] {
-  cursor: not-allowed !important;
-  border-width: 0px !important;
-}
-
-.input[readonly]:hover,.textarea[readonly]:hover,.select[readonly]:hover {
-  --tw-brightness: brightness(1) !important;
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
-}
-
 .list,.list-dl,.list-nav ul {
   list-style-type: none;
 }
@@ -2865,18 +2411,10 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
   display: grid;
 }
 
-.hidden {
-  display: none;
-}
-
 .aspect-square {
   aspect-ratio: 1 / 1;
 }
 
-.h-0 {
-  height: 0px;
-}
-
 .h-6 {
   height: 1.5rem;
 }
@@ -2893,10 +2431,6 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
   max-height: 16rem;
 }
 
-.w-0 {
-  width: 0px;
-}
-
 .w-12 {
   width: 3rem;
 }
@@ -2952,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;
 }
@@ -2988,14 +2526,12 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
   gap: 0px;
 }
 
-.gap-4 {
-  gap: 1rem;
+.gap-1 {
+  gap: 0.25rem;
 }
 
-.space-x-1 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
-  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
+.gap-4 {
+  gap: 1rem;
 }
 
 .space-y-1 > :not([hidden]) ~ :not([hidden]) {
@@ -3162,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);
@@ -4428,35 +3968,79 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
   --tw-ring-color: rgb(var(--color-surface-400) / 1);
 }
 
-.hover\:variant-soft:hover {
-  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;
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
-  color: rgb(var(--color-surface-700));
+.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);
 }
 
-.dark .hover\:variant-soft:hover {
-  color:rgb(var(--color-surface-200));
+: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));
 }
 
-:is(.dark .hover\:variant-soft:hover) {
+.hover\:variant-ghost:hover {
   background-color: rgb(var(--color-surface-500) / 0.2);
 }
 
-.hover\:variant-soft:hover {
-  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;
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
-  color: rgb(var(--color-surface-700));
+:is(.dark .hover\:variant-ghost:hover) {
+  background-color: rgb(var(--color-surface-500) / 0.2);
 }
 
-.dark .hover\:variant-soft:hover {
-  color:rgb(var(--color-surface-200));
+.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));
 }
 
-:is(.dark .hover\:variant-soft:hover) {
+.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);
 }
 
@@ -4478,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;
@@ -4560,7 +4149,7 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
   top:0px;
   /* max-w-max */
   /* Set hidden on page load */
-  display:none;
+  display: none;
   /* Transitions */
   transition-property: opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -5066,18 +4655,10 @@ img,video{
   display:grid
 }
 
-.hidden{
-  display:none
-}
-
 .aspect-square{
   aspect-ratio:1 / 1
 }
 
-.h-0{
-  height:0px
-}
-
 .h-6{
   height:1.5rem
 }
@@ -5094,10 +4675,6 @@ img,video{
   max-height:16rem
 }
 
-.w-0{
-  width:0px
-}
-
 .w-12{
   width:3rem
 }
@@ -5153,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
 }
@@ -5189,14 +4770,12 @@ img,video{
   gap:0px
 }
 
-.gap-4{
-  gap:1rem
+.gap-1{
+  gap:.25rem
 }
 
-.space-x-1>:not([hidden])~:not([hidden]){
-  --tw-space-x-reverse: 0;
-  margin-right:calc(.25rem * var(--tw-space-x-reverse));
-  margin-left:calc(.25rem * calc(1 - var(--tw-space-x-reverse)))
+.gap-4{
+  gap:1rem
 }
 
 .space-y-1>:not([hidden])~:not([hidden]){
@@ -5363,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);
@@ -6647,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