@code-coaching/vuetiful 0.15.1 → 0.16.0

package/dist/styles/all.css

@@ -956,6 +956,100 @@ progress::-webkit-progress-value {
 
 /* 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 */
@@ -1101,6 +1195,136 @@ progress::-webkit-progress-value {
   color:rgb(var(--color-surface-900));
 }
 
+.variant-filled-primary {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
+  color: rgb(var(--on-primary));
+}
+
+:is(.dark .variant-filled-primary) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
+  color: rgb(var(--on-primary));
+}
+
+.variant-filled-secondary {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-secondary-500) / var(--tw-bg-opacity));
+  color: rgb(var(--on-secondary));
+}
+
+:is(.dark .variant-filled-secondary) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-secondary-500) / var(--tw-bg-opacity));
+  color: rgb(var(--on-secondary));
+}
+
+.variant-filled-tertiary {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
+  color: rgb(var(--on-tertiary));
+}
+
+:is(.dark .variant-filled-tertiary) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
+  color: rgb(var(--on-tertiary));
+}
+
+.variant-filled-success {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-success-500) / var(--tw-bg-opacity));
+  color: rgb(var(--on-success));
+}
+
+:is(.dark .variant-filled-success) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-success-500) / var(--tw-bg-opacity));
+  color: rgb(var(--on-success));
+}
+
+.variant-filled-warning {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-warning-500) / var(--tw-bg-opacity));
+  color: rgb(var(--on-warning));
+}
+
+:is(.dark .variant-filled-warning) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-warning-500) / var(--tw-bg-opacity));
+  color: rgb(var(--on-warning));
+}
+
+.variant-filled-error {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-error-500) / var(--tw-bg-opacity));
+  color: rgb(var(--on-error));
+}
+
+:is(.dark .variant-filled-error) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-error-500) / var(--tw-bg-opacity));
+  color: rgb(var(--on-error));
+}
+
+.variant-filled-surface {
+  background-color: rgb(var(--color-surface-400));
+}
+
+.dark .variant-filled-surface {
+  background-color: rgb(var(--color-surface-500));
+}
+
+.variant-filled-surface {
+  color: rgb(var(--on-surface));
+}
+
+.dark .variant-filled-surface{
+  background-color:rgb(var(--color-surface-500))
+}
+
+:is(.dark .variant-filled-surface) {
+  color: rgb(var(--on-surface));
+}
+
+.variant-ghost,.variant-ghost-surface {
+  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 .variant-ghost),:is(.dark .variant-ghost-surface) {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(var(--color-surface-500) / var(--tw-ring-opacity));
+}
+
+.variant-ghost,.variant-ghost-surface {
+  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 .variant-ghost),:is(.dark .variant-ghost-surface) {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(var(--color-surface-500) / var(--tw-ring-opacity));
+}
+
+.variant-ghost,.variant-ghost-surface {
+  background-color: rgb(var(--color-surface-500) / 0.2);
+}
+
+:is(.dark .variant-ghost),:is(.dark .variant-ghost-surface) {
+  background-color: rgb(var(--color-surface-500) / 0.2);
+}
+
 .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;
@@ -1492,6 +1716,84 @@ progress::-webkit-progress-value {
   margin-bottom:calc(.25rem * var(--tw-space-y-reverse))
 }
 
+.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);
+}
+
 .list,.list-dl,.list-nav ul {
   list-style-type: none;
 }
@@ -2359,10 +2661,146 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
   color:rgb(var(--color-surface-900));
 }
 
+.variant-filled-primary {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
+  color: rgb(var(--on-primary));
+}
+
+:is(.dark .variant-filled-primary) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
+  color: rgb(var(--on-primary));
+}
+
+.variant-filled-secondary {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-secondary-500) / var(--tw-bg-opacity));
+  color: rgb(var(--on-secondary));
+}
+
+:is(.dark .variant-filled-secondary) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-secondary-500) / var(--tw-bg-opacity));
+  color: rgb(var(--on-secondary));
+}
+
+.variant-filled-tertiary {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
+  color: rgb(var(--on-tertiary));
+}
+
+:is(.dark .variant-filled-tertiary) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
+  color: rgb(var(--on-tertiary));
+}
+
+.variant-filled-success {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-success-500) / var(--tw-bg-opacity));
+  color: rgb(var(--on-success));
+}
+
+:is(.dark .variant-filled-success) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-success-500) / var(--tw-bg-opacity));
+  color: rgb(var(--on-success));
+}
+
+.variant-filled-warning {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-warning-500) / var(--tw-bg-opacity));
+  color: rgb(var(--on-warning));
+}
+
+:is(.dark .variant-filled-warning) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-warning-500) / var(--tw-bg-opacity));
+  color: rgb(var(--on-warning));
+}
+
+.variant-filled-error {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-error-500) / var(--tw-bg-opacity));
+  color: rgb(var(--on-error));
+}
+
+:is(.dark .variant-filled-error) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color-error-500) / var(--tw-bg-opacity));
+  color: rgb(var(--on-error));
+}
+
+.variant-filled-surface {
+  background-color: rgb(var(--color-surface-400));
+}
+
+.dark .variant-filled-surface {
+  background-color: rgb(var(--color-surface-500));
+}
+
+.variant-filled-surface {
+  color: rgb(var(--on-surface));
+}
+
+.dark .variant-filled-surface{
+  background-color:rgb(var(--color-surface-500))
+}
+
+:is(.dark .variant-filled-surface) {
+  color: rgb(var(--on-surface));
+}
+
 /* Ringed */
 
 /* Ghost */
 
+.variant-ghost,
+  .variant-ghost-surface {
+  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 .variant-ghost),:is(.dark 
+  .variant-ghost-surface) {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(var(--color-surface-500) / var(--tw-ring-opacity));
+}
+
+.variant-ghost,
+  .variant-ghost-surface {
+  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 .variant-ghost),:is(.dark 
+  .variant-ghost-surface) {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(var(--color-surface-500) / var(--tw-ring-opacity));
+}
+
+.variant-ghost,
+  .variant-ghost-surface {
+  background-color: rgb(var(--color-surface-500) / 0.2);
+}
+
+:is(.dark .variant-ghost),:is(.dark 
+  .variant-ghost-surface) {
+  background-color: rgb(var(--color-surface-500) / 0.2);
+}
+
 /* Soft */
 
 .variant-soft,
@@ -2442,6 +2880,16 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
   margin: -1rem;
 }
 
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -2458,6 +2906,10 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
   display: grid;
 }
 
+.hidden {
+  display: none;
+}
+
 .aspect-square {
   aspect-ratio: 1 / 1;
 }
@@ -2486,6 +2938,10 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
   height: 50%;
 }
 
+.h-\[812px\] {
+  height: 812px;
+}
+
 .h-full {
   height: 100%;
 }
@@ -2510,6 +2966,10 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
   width: 6rem;
 }
 
+.w-4 {
+  width: 1rem;
+}
+
 .w-60 {
   width: 15rem;
 }
@@ -2542,6 +3002,10 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
   width: 100%;
 }
 
+.max-w-\[375px\] {
+  max-width: 375px;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -2578,6 +3042,10 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
   cursor: pointer;
 }
 
+.grid-cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
 .grid-rows-\[auto_1fr_auto\] {
   grid-template-rows: auto 1fr auto;
 }
@@ -2614,6 +3082,10 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
   gap: 0.25rem;
 }
 
+.gap-2 {
+  gap: 0.5rem;
+}
+
 .gap-4 {
   gap: 1rem;
 }
@@ -2660,10 +3132,26 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
   word-break: break-all;
 }
 
+.\!rounded-none {
+  border-radius: 0px !important;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
 
+.rounded-3xl {
+  border-radius: 1.5rem;
+}
+
+.border-8 {
+  border-width: 8px;
+}
+
+.border-black\/50 {
+  border-color: rgb(0 0 0 / 0.5);
+}
+
 .bg-neutral-900\/90 {
   background-color: rgb(23 23 23 / 0.9);
 }
@@ -2688,10 +3176,26 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
   background-color: rgb(var(--color-surface-900) / var(--tw-bg-opacity));
 }
 
+.bg-transparent {
+  background-color: transparent;
+}
+
+.bg-white\/25 {
+  background-color: rgb(255 255 255 / 0.25);
+}
+
+.bg-white\/50 {
+  background-color: rgb(255 255 255 / 0.5);
+}
+
 .bg-opacity-90 {
   --tw-bg-opacity: 0.9;
 }
 
+.bg-gradient-to-br {
+  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
+}
+
 .p-1 {
   padding: 0.25rem;
 }
@@ -2804,12 +3308,23 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-2xl {
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-xl {
   --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);
 }
 
+.shadow-surface-500\/10 {
+  --tw-shadow-color: rgb(var(--color-surface-500) / 0.1);
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 .ring {
   --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(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -2826,6 +3341,10 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
   --tw-ring-color: rgb(var(--color-surface-500) / 0.3);
 }
 
+.ring-surface-500\/50 {
+  --tw-ring-color: rgb(var(--color-surface-500) / 0.5);
+}
+
 .transition {
   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;
@@ -2846,6 +3365,10 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
   transition-duration: 150ms;
 }
 
+.duration-300 {
+  transition-duration: 300ms;
+}
+
 .duration-\[150ms\] {
   transition-duration: 150ms;
 }
@@ -4170,11 +4693,28 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
   background-color: rgb(var(--color-secondary-500) / 0.1);
 }
 
+:is(.dark .dark\:border-white\/50) {
+  border-color: rgb(255 255 255 / 0.5);
+}
+
+:is(.dark .dark\:bg-black\/25) {
+  background-color: rgb(0 0 0 / 0.25);
+}
+
+:is(.dark .dark\:bg-black\/50) {
+  background-color: rgb(0 0 0 / 0.5);
+}
+
 :is(.dark .dark\:text-surface-50) {
   --tw-text-opacity: 1;
   color: rgb(var(--color-surface-50) / var(--tw-text-opacity));
 }
 
+:is(.dark .dark\:shadow-black\/10) {
+  --tw-shadow-color: rgb(0 0 0 / 0.1);
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 :is(.dark .dark\:fill-base-token) {
   fill: rgba(var(--theme-font-color-base));
 }
@@ -4184,9 +4724,23 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
 }
 
 @media (min-width: 640px) {
+  .sm\:\!inline-flex {
+    display: inline-flex !important;
+  }
+
   .sm\:w-20 {
     width: 5rem;
   }
+
+  .sm\:grid-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:p-10 {
+    padding: 2.5rem;
+  }
 }
 
 @media (min-width: 1024px) {
@@ -4265,7 +4819,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);
@@ -4498,6 +5052,14 @@ code.hljs{
   background-color:#67060c
 }
 
+.icon[data-v-11c10f2c]{
+  margin-top:.25rem;
+  margin-bottom:.25rem;
+  height:1rem;
+  width:1rem;
+  fill:currentColor
+}
+
 @font-face{
   font-family:myfont;
 
@@ -4862,6 +5424,16 @@ img,video{
   margin:-1rem
 }
 
+.mx-auto{
+  margin-left:auto;
+  margin-right:auto
+}
+
+.my-1{
+  margin-top:.25rem;
+  margin-bottom:.25rem
+}
+
 .mt-1{
   margin-top:.25rem
 }
@@ -4878,6 +5450,10 @@ img,video{
   display:grid
 }
 
+.hidden{
+  display:none
+}
+
 .aspect-square{
   aspect-ratio:1 / 1
 }
@@ -4906,6 +5482,10 @@ img,video{
   height:50%
 }
 
+.h-\[812px\]{
+  height:812px
+}
+
 .h-full{
   height:100%
 }
@@ -4930,6 +5510,10 @@ img,video{
   width:6rem
 }
 
+.w-4{
+  width:1rem
+}
+
 .w-60{
   width:15rem
 }
@@ -4962,6 +5546,10 @@ img,video{
   width:100%
 }
 
+.max-w-\[375px\]{
+  max-width:375px
+}
+
 .flex-1{
   flex:1 1 0%
 }
@@ -4993,6 +5581,10 @@ img,video{
   cursor:pointer
 }
 
+.grid-cols-6{
+  grid-template-columns:repeat(6,minmax(0,1fr))
+}
+
 .grid-rows-\[auto_1fr_auto\]{
   grid-template-rows:auto 1fr auto
 }
@@ -5029,6 +5621,10 @@ img,video{
   gap:.25rem
 }
 
+.gap-2{
+  gap:.5rem
+}
+
 .gap-4{
   gap:1rem
 }
@@ -5075,10 +5671,26 @@ img,video{
   word-break:break-all
 }
 
+.\!rounded-none{
+  border-radius:0!important
+}
+
 .rounded{
   border-radius:.25rem
 }
 
+.rounded-3xl{
+  border-radius:1.5rem
+}
+
+.border-8{
+  border-width:8px
+}
+
+.border-black\/50{
+  border-color:#00000080
+}
+
 .bg-neutral-900\/90{
   background-color:#171717e6
 }
@@ -5103,10 +5715,26 @@ img,video{
   background-color:rgb(var(--color-surface-900) / var(--tw-bg-opacity))
 }
 
+.bg-transparent{
+  background-color:transparent
+}
+
+.bg-white\/25{
+  background-color:#ffffff40
+}
+
+.bg-white\/50{
+  background-color:#ffffff80
+}
+
 .bg-opacity-90{
   --tw-bg-opacity: .9
 }
 
+.bg-gradient-to-br{
+  background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))
+}
+
 .p-1{
   padding:.25rem
 }
@@ -5219,12 +5847,23 @@ img,video{
   box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)
 }
 
+.shadow-2xl{
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)
+}
+
 .shadow-xl{
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(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)
 }
 
+.shadow-surface-500\/10{
+  --tw-shadow-color: rgb(var(--color-surface-500) / .1);
+  --tw-shadow: var(--tw-shadow-colored)
+}
+
 .ring{
   --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(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -5241,6 +5880,10 @@ img,video{
   --tw-ring-color: rgb(var(--color-surface-500) / .3)
 }
 
+.ring-surface-500\/50{
+  --tw-ring-color: rgb(var(--color-surface-500) / .5)
+}
+
 .transition{
   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;
@@ -5261,6 +5904,10 @@ img,video{
   transition-duration:.15s
 }
 
+.duration-300{
+  transition-duration:.3s
+}
+
 .duration-\[150ms\]{
   transition-duration:.15s
 }
@@ -6509,11 +7156,28 @@ img,video{
   background-color:rgb(var(--color-secondary-500) / .1)
 }
 
+:is(.dark .dark\:border-white\/50){
+  border-color:#ffffff80
+}
+
+:is(.dark .dark\:bg-black\/25){
+  background-color:#00000040
+}
+
+:is(.dark .dark\:bg-black\/50){
+  background-color:#00000080
+}
+
 :is(.dark .dark\:text-surface-50){
   --tw-text-opacity: 1;
   color:rgb(var(--color-surface-50) / var(--tw-text-opacity))
 }
 
+:is(.dark .dark\:shadow-black\/10){
+  --tw-shadow-color: rgb(0 0 0 / .1);
+  --tw-shadow: var(--tw-shadow-colored)
+}
+
 :is(.dark .dark\:fill-base-token){
   fill:rgba(var(--theme-font-color-base))
 }
@@ -6523,9 +7187,23 @@ img,video{
 }
 
 @media (min-width: 640px){
+  .sm\:\!inline-flex{
+    display:inline-flex!important
+  }
+
   .sm\:w-20{
     width:5rem
   }
+
+  .sm\:grid-cols-12{
+    grid-template-columns:repeat(12,minmax(0,1fr))
+  }
+}
+
+@media (min-width: 768px){
+  .md\:p-10{
+    padding:2.5rem
+  }
 }
 
 @media (min-width: 1024px){