@poveste/app 0.14.0 → 0.16.0

package/dist/style.css

@@ -1,306 +1,724 @@
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
   /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
   @layer properties;
-  .resize-observer[data-v-b329ee4c] {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: -1;
-    width: 100%;
-    height: 100%;
+  .poveste-tooltip {
+    color: #fff;
+    z-index: 100;
+    background: #000c;
+    border-radius: 6px;
+    padding: 7px 12px 6px;
+    line-height: normal;
+  }
+  .poveste-tooltip-arrow {
+    fill: #000c;
+  }
+  .poveste-button {
+    --_poveste-button-surface: var(--color-gray-200);
+    --_poveste-button-surface-hover: var(--color-primary-200);
+    --_poveste-button-text: var(--color-gray-900);
+    border-radius: var(--radius-sm);
+    background: var(--_poveste-button-surface);
+    color: var(--_poveste-button-text);
+    cursor: pointer;
     border: none;
-    background-color: transparent;
-    pointer-events: none;
+  }
+  .poveste-button:where(.ptw-dark,.ptw-dark *) {
+    --_poveste-button-surface: var(--color-gray-750);
+    --_poveste-button-surface-hover: var(--color-primary-900);
+    --_poveste-button-text: var(--color-gray-100);
+  }
+  .poveste-button:hover {
+    background: var(--_poveste-button-surface-hover);
+  }
+  .poveste-button[data-color=primary] {
+    --_poveste-button-surface: var(--color-primary-500);
+    --_poveste-button-surface-hover: var(--color-primary-600);
+    --_poveste-button-text: var(--color-white);
+  }
+  .poveste-button[data-color=primary]:where(.ptw-dark,.ptw-dark *) {
+    --_poveste-button-surface: var(--color-primary-500);
+    --_poveste-button-surface-hover: var(--color-primary-600);
+    --_poveste-button-text: var(--color-black);
+  }
+  .poveste-button[data-color=flat] {
+    --_poveste-button-surface: transparent;
+    --_poveste-button-surface-hover: var(--color-gray-500);
+    @supports (color: color-mix(in lab, red, red)) {
+      --_poveste-button-surface-hover: color-mix(in oklab, var(--color-gray-500) 20%, transparent);
+    }
+  }
+  .poveste-button[data-color=flat]:where(.ptw-dark,.ptw-dark *) {
+    --_poveste-button-surface: transparent;
+    --_poveste-button-surface-hover: var(--color-gray-500);
+    @supports (color: color-mix(in lab, red, red)) {
+      --_poveste-button-surface-hover: color-mix(in oklab, var(--color-gray-500) 20%, transparent);
+    }
+  }
+  .poveste-button-group {
+    flex-wrap: nowrap;
+    align-items: center;
+  }
+  .poveste-button-group-options {
+    border-radius: var(--radius-sm);
+    border: 1px solid #00000040;
+    gap: 1px;
+    padding: 1px;
+    display: flex;
+  }
+  .poveste-button-group-options:where(.ptw-dark,.ptw-dark *) {
+    border-color: #ffffff40;
+  }
+  .poveste-button-group-option {
+    border-radius: 3px;
+    flex: 1;
+    height: 22px;
+    padding-inline: .25rem;
+  }
+  .poveste-button-group-option[data-state=off] {
+    --_poveste-button-surface: transparent;
+    --_poveste-button-surface-hover: var(--color-gray-500);
+    @supports (color: color-mix(in lab, red, red)) {
+      --_poveste-button-surface-hover: color-mix(in oklab, var(--color-gray-500) 20%, transparent);
+    }
+  }
+  .poveste-button-group-option[data-state=on] {
+    --_poveste-button-surface: var(--color-primary-500);
+    --_poveste-button-surface-hover: var(--color-primary-600);
+    --_poveste-button-text: var(--color-white);
+  }
+  .poveste-button-group-option[data-state=on]:where(.ptw-dark,.ptw-dark *) {
+    --_poveste-button-text: var(--color-black);
+  }
+  .poveste-simple-checkbox {
+    box-sizing: border-box;
+    width: 16px;
+    height: 16px;
+    color: var(--color-white);
+    background: 0 0;
+    border: 0;
+    padding: 0;
     display: block;
-    overflow: hidden;
-    opacity: 0;
+    position: relative;
+  }
+  .poveste-simple-checkbox:focus-visible {
+    outline: 2px solid var(--color-primary-500);
+    outline-offset: 2px;
   }
-  .resize-observer[data-v-b329ee4c] object {
+  .poveste-simple-checkbox-interactive {
+    cursor: pointer;
+  }
+  .poveste-checkbox-visual {
     display: block;
     position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-    pointer-events: none;
-    z-index: -1;
+    inset: 0;
   }
-  .v-popper__popper {
-    z-index: 10000;
-    top: 0;
-    left: 0;
-    outline: none;
+  .poveste-checkbox-visual-box {
+    box-sizing: border-box;
+    border-radius: var(--radius-sm);
+    border: 1px solid #00000040;
+    position: absolute;
+    inset: 0;
   }
-  .v-popper__popper.v-popper__popper--hidden {
-    visibility: hidden;
-    opacity: 0;
-    transition: opacity .15s,visibility .15s;
-    pointer-events: none;
+  @media (prefers-reduced-motion:no-preference) {
+    .poveste-checkbox-visual-box {
+      transition: border .15s ease-out .15s;
+    }
   }
-  .v-popper__popper.v-popper__popper--shown {
-    visibility: visible;
-    opacity: 1;
-    transition: opacity .15s;
+  .poveste-checkbox-visual-box:where(.ptw-dark,.ptw-dark *) {
+    border-color: #ffffff40;
   }
-  .v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper {
-    transition: none !important;
+  .poveste-simple-checkbox[data-checked] .poveste-checkbox-visual-box {
+    border-color: var(--color-primary-500);
+    border-width: 8px;
   }
-  .v-popper__backdrop {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: none;
+  @media (prefers-reduced-motion:no-preference) {
+    .poveste-simple-checkbox[data-checked] .poveste-checkbox-visual-box {
+      transition-delay: 0s;
+    }
   }
-  .v-popper__inner {
-    position: relative;
-    box-sizing: border-box;
-    overflow-y: auto;
+  .poveste-simple-checkbox:hover .poveste-checkbox-visual-box {
+    border-color: var(--color-primary-500);
   }
-  .v-popper__inner>div {
+  .poveste-simple-checkbox:active .poveste-checkbox-visual-box {
+    background: #6b728033;
+  }
+  .poveste-checkbox-visual-check {
+    z-index: 10;
     position: relative;
-    z-index: 1;
-    max-width: inherit;
-    max-height: inherit;
   }
-  .v-popper__arrow-container {
-    position: absolute;
-    width: 10px;
-    height: 10px;
+  .poveste-checkbox-visual-check path {
+    stroke: var(--color-white);
+    stroke-width: 2px;
   }
-  .v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container {
-    display: none;
+  @media (prefers-reduced-motion:no-preference) {
+    .poveste-checkbox-visual-animated {
+      transition: all .2s ease-in-out;
+    }
+    .poveste-simple-checkbox[data-checked] .poveste-checkbox-visual-animated {
+      transition-delay: .15s;
+    }
   }
-  .v-popper__arrow-inner,.v-popper__arrow-outer {
-    border-style: solid;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 0;
-    height: 0;
+  .poveste-checkbox {
+    cursor: pointer;
+    align-items: center;
   }
-  .v-popper__arrow-inner {
-    visibility: hidden;
-    border-width: 7px;
+  .poveste-checkbox-box {
+    background: 0 0;
+    border: 0;
+    padding: 0;
+    display: block;
   }
-  .v-popper__arrow-outer {
-    border-width: 6px;
+  .poveste-checkbox-box:focus-visible {
+    outline: 2px solid var(--color-primary-500);
+    outline-offset: 2px;
   }
-  .v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner {
-    left: -2px;
+  .poveste-checkbox-list {
+    cursor: text;
   }
-  .v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer {
-    left: -1px;
+  .poveste-checkbox-list-options {
+    margin-block: -.25rem;
   }
-  .v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer {
-    border-bottom-width: 0;
-    border-left-color: transparent !important;
-    border-right-color: transparent !important;
-    border-bottom-color: transparent !important;
+  .poveste-checkbox-list-option {
+    cursor: pointer;
+    align-items: center;
+    gap: .5rem;
+    padding-block: .25rem;
+    display: flex;
+    position: relative;
   }
-  .v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner {
-    top: -2px;
+  .poveste-checkbox-list-box {
+    background: 0 0;
+    border: 0;
+    padding: 0;
+    display: block;
   }
-  .v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container {
-    top: 0;
+  .poveste-checkbox-list-box:focus-visible {
+    outline: 2px solid var(--color-primary-500);
+    outline-offset: 2px;
   }
-  .v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer {
-    border-top-width: 0;
-    border-left-color: transparent !important;
-    border-right-color: transparent !important;
-    border-top-color: transparent !important;
+  .bind-col-size {
+    grid-template-columns: repeat(auto-fill, minmax(var(--poveste-col-size), 1fr));
   }
-  .v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner {
-    top: -4px;
+  .poveste-number {
+    cursor: ew-resize;
+    align-items: center;
   }
-  .v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer {
-    top: -6px;
+  .poveste-number[data-dragging] {
+    -webkit-user-select: none;
+    user-select: none;
   }
-  .v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner {
-    top: -2px;
+  .poveste-number-input {
+    box-sizing: border-box;
+    border-radius: var(--radius-sm);
+    width: 100%;
+    color: inherit;
+    cursor: ew-resize;
+    background: 0 0;
+    border: 1px solid #00000040;
+    outline: none;
+    margin-block: -.25rem;
+    padding: .25rem 0 .25rem .5rem;
   }
-  .v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer {
-    top: -1px;
+  .poveste-number-input:where(.ptw-dark,.ptw-dark *) {
+    border-color: #ffffff40;
   }
-  .v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer {
-    border-left-width: 0;
-    border-left-color: transparent !important;
-    border-top-color: transparent !important;
-    border-bottom-color: transparent !important;
+  .poveste-number-input:focus {
+    border-color: var(--color-primary-500);
   }
-  .v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner {
-    left: -4px;
+  .poveste-radio {
+    cursor: text;
   }
-  .v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer {
-    left: -6px;
+  .poveste-radio-options {
+    margin-block: -.25rem;
   }
-  .v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container {
-    right: -10px;
+  .poveste-radio-option {
+    cursor: pointer;
+    align-items: center;
+    gap: .5rem;
+    padding-block: .25rem;
+    display: flex;
+    position: relative;
   }
-  .v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer {
-    border-right-width: 0;
-    border-top-color: transparent !important;
-    border-right-color: transparent !important;
-    border-bottom-color: transparent !important;
+  .poveste-radio-box {
+    box-sizing: border-box;
+    background: 0 0;
+    border: 1px solid #00000040;
+    border-radius: 9999px;
+    width: 16px;
+    height: 16px;
+    padding: 0;
+    display: block;
+    position: relative;
   }
-  .v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner {
-    left: -2px;
+  @media (prefers-reduced-motion:no-preference) {
+    .poveste-radio-box {
+      transition: border-color .15s ease-out;
+    }
   }
-  .v-popper--theme-tooltip .v-popper__inner {
-    background: rgba(0,0,0,.8);
-    color: #fff;
-    border-radius: 6px;
-    padding: 7px 12px 6px;
+  .poveste-radio-box:where(.ptw-dark,.ptw-dark *) {
+    border-color: #ffffff40;
   }
-  .v-popper--theme-tooltip .v-popper__arrow-outer {
-    border-color: #000c;
+  .poveste-radio-box:hover,.poveste-radio-box[data-state=checked] {
+    border-color: var(--color-primary-500);
   }
-  .v-popper--theme-dropdown .v-popper__inner {
-    background: #fff;
-    color: #000;
-    border-radius: 6px;
-    border: 1px solid #ddd;
-    box-shadow: 0 6px 30px #0000001a;
+  .poveste-radio-box:focus-visible {
+    outline: 2px solid var(--color-primary-500);
+    outline-offset: 2px;
   }
-  .v-popper--theme-dropdown .v-popper__arrow-inner {
-    visibility: visible;
-    border-color: #fff;
+  .poveste-radio-dot {
+    background: var(--color-primary-500);
+    border-radius: 9999px;
+    display: block;
+    position: absolute;
+    inset: 3px;
+    transform: scale(0);
   }
-  .v-popper--theme-dropdown .v-popper__arrow-outer {
-    border-color: #ddd;
+  @media (prefers-reduced-motion:no-preference) {
+    .poveste-radio-dot {
+      transition: transform .2s ease-in-out;
+    }
   }
-  .bind-col-size {
-    grid-template-columns: repeat(auto-fill, minmax(var(--poveste-col-size), 1fr));
+  [data-state=checked]>.poveste-radio-dot {
+    transform: scale(1);
   }
-  .v-popper {
-    line-height: 0;
+  @media (prefers-reduced-motion:no-preference) {
+    [data-state=checked]>.poveste-radio-dot {
+      transition-delay: .15s;
+    }
   }
-  .v-popper--theme-dropdown .v-popper__inner:where(.ptw-dark,.ptw-dark *) {
-    border-color: var(--color-gray-850,#1f1f21);
-    background-color: var(--color-gray-700,var(--color-zinc-700));
-    color: var(--color-gray-100,var(--color-zinc-100));
+  .poveste-select-trigger {
+    border-radius: var(--radius-sm);
+    width: 100%;
+    height: 27px;
+    color: inherit;
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+    background: 0 0;
+    border: 1px solid #00000040;
+    outline: none;
+    align-items: center;
+    gap: .5rem;
+    margin-block: -.25rem;
+    padding-inline: .5rem;
+    line-height: normal;
+    display: flex;
+  }
+  .poveste-select-trigger:where(.ptw-dark,.ptw-dark *) {
+    border-color: #ffffff40;
   }
-  .v-popper--theme-dropdown .v-popper__arrow-inner:where(.ptw-dark,.ptw-dark *) {
-    border-color: var(--color-gray-700,var(--color-zinc-700));
+  .poveste-select-trigger:hover {
+    border-color: var(--color-primary-500);
   }
-  .v-popper--theme-dropdown .v-popper__arrow-outer:where(.ptw-dark,.ptw-dark *) {
-    border-color: var(--color-gray-850,#1f1f21);
+  .poveste-select-label {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    flex: 1;
+    overflow: hidden;
   }
-  .v-popper--theme-dropdown.v-popper__popper--show-from .v-popper__wrapper {
-    transform: scale(.75);
+  .poveste-select-chevron {
+    flex: none;
+    width: 1rem;
+    height: 1rem;
+    margin-left: auto;
   }
-  .v-popper--theme-dropdown.v-popper__popper--show-to .v-popper__wrapper {
-    transition: transform .15s cubic-bezier(0,1,.5,1);
-    transform: none;
+  .poveste-select-popper {
+    min-width: var(--reka-popper-anchor-width);
+    z-index: 100;
   }
-  .v-popper__popper:focus-visible {
+  .poveste-select-popper:focus-visible {
     outline: none;
   }
-  @layer properties {
-    @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
-      *,:before,:after,::backdrop {
-        --tw-border-style: solid;
-      }
-    }
+  .poveste-select-popper[data-state=open] {
+    animation: .15s cubic-bezier(0,1,.5,1) poveste-select-in;
   }
-  .range-input::-webkit-slider-thumb {
-    height: calc(var(--spacing,.25rem) * 3);
-    width: calc(var(--spacing,.25rem) * 3);
-    appearance: none;
-    border-style: var(--tw-border-style);
-    --tw-border-style: solid;
-    border: 1px solid #00000040;
-    border-radius: 2147483647px;
+  .poveste-select-options {
+    max-height: var(--reka-popover-content-available-height);
+    border: 1px solid var(--color-gray-200);
+    border-radius: var(--radius-sm);
+    background: var(--color-gray-50);
+    color: var(--color-gray-900);
+    overflow-y: auto;
+    box-shadow: 0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;
   }
-  @supports (color:color-mix(in lab, red, red)) {
-    .range-input::-webkit-slider-thumb {
-      border-color: color-mix(in oklab, var(--color-black,#000) 25%, transparent);
+  .poveste-select-options:where(.ptw-dark,.ptw-dark *) {
+    border-color: var(--color-gray-850);
+    background: var(--color-gray-700);
+    color: var(--color-gray-100);
+  }
+  .poveste-select-list {
+    flex-direction: column;
+    display: flex;
+  }
+  .poveste-select-list:focus-visible {
+    outline: none;
+  }
+  .poveste-select-option {
+    cursor: pointer;
+    outline: none;
+    padding: .25rem .5rem;
+  }
+  .poveste-select-option[data-state=checked] {
+    background: var(--color-primary-200);
+  }
+  .poveste-select-option[data-state=checked]:where(.ptw-dark,.ptw-dark *) {
+    background: var(--color-primary-800);
+  }
+  .poveste-select-option[data-highlighted] {
+    background: var(--color-primary-100);
+  }
+  .poveste-select-option[data-highlighted]:where(.ptw-dark,.ptw-dark *) {
+    background: var(--color-primary-700);
+  }
+  @keyframes poveste-select-in {
+    0% {
+      transform: scale(.75);
     }
   }
-  .range-input::-webkit-slider-thumb {
-    background-color: var(--color-white,#fff);
+  .poveste-select {
+    cursor: text;
+    align-items: center;
+  }
+  .poveste-slider {
+    align-items: center;
+  }
+  .poveste-slider-field {
+    --_poveste-slider-thumb: .75rem;
+    align-items: center;
+    width: 100%;
+    display: flex;
+    position: relative;
+  }
+  .poveste-slider-track-area {
+    align-items: center;
+    display: flex;
+    position: absolute;
+    inset: 0;
   }
-  .range-input::-webkit-slider-thumb:where(.ptw-dark,.ptw-dark *) {
+  .poveste-slider-track {
+    border: 1px solid #00000040;
+    border-radius: 9999px;
+    width: 100%;
+    height: .25rem;
+  }
+  .poveste-slider-track:where(.ptw-dark,.ptw-dark *) {
     border-color: #ffffff40;
   }
-  @supports (color:color-mix(in lab, red, red)) {
-    .range-input::-webkit-slider-thumb:where(.ptw-dark,.ptw-dark *) {
-      border-color: color-mix(in oklab, var(--color-white,#fff) 25%, transparent);
-    }
+  .poveste-slider-tooltip-anchor {
+    left: calc(var(--_poveste-slider-fraction,0) * (100% - var(--_poveste-slider-thumb)) + var(--_poveste-slider-thumb) / 2);
+    position: absolute;
   }
-  .range-input::-webkit-slider-thumb:where(.ptw-dark,.ptw-dark *) {
-    background-color: var(--color-gray-700,var(--color-zinc-700));
+  .poveste-slider-input {
+    appearance: none;
+    cursor: pointer;
+    background: 0 0;
+    border: 0;
+    width: 100%;
+    margin: 0;
+    position: relative;
   }
-  .range-input:hover::-webkit-slider-thumb {
-    border-color: var(--color-primary-500,var(--color-emerald-500)) !important;
-    background-color: var(--color-primary-500,var(--color-emerald-500)) !important;
+  .poveste-slider-input::-webkit-slider-thumb {
+    width: var(--_poveste-slider-thumb);
+    height: var(--_poveste-slider-thumb);
+    appearance: none;
+    background: var(--color-white);
+    border: 1px solid #00000040;
+    border-radius: 9999px;
+  }
+  .poveste-slider-input:where(.ptw-dark,.ptw-dark *)::-webkit-slider-thumb {
+    background: var(--color-gray-700);
+    border-color: #ffffff40;
   }
-  .range-input::-moz-range-thumb {
-    height: calc(var(--spacing,.25rem) * 3);
-    width: calc(var(--spacing,.25rem) * 3);
+  .poveste-slider-input:hover::-webkit-slider-thumb {
+    border-color: var(--color-primary-500);
+    background: var(--color-primary-500);
+  }
+  .poveste-slider-input::-moz-range-thumb {
+    width: var(--_poveste-slider-thumb);
+    height: var(--_poveste-slider-thumb);
     appearance: none;
-    border-style: var(--tw-border-style);
-    --tw-border-style: solid;
+    background: var(--color-white);
     border: 1px solid #00000040;
-    border-radius: 2147483647px;
+    border-radius: 9999px;
   }
-  @supports (color:color-mix(in lab, red, red)) {
-    .range-input::-moz-range-thumb {
-      border-color: color-mix(in oklab, var(--color-black,#000) 25%, transparent);
-    }
+  .poveste-slider-input:where(.ptw-dark,.ptw-dark *)::-moz-range-thumb {
+    background: var(--color-gray-700);
+    border-color: #ffffff40;
   }
-  .range-input::-moz-range-thumb {
-    background-color: var(--color-white,#fff);
+  .poveste-slider-input:hover::-moz-range-thumb {
+    border-color: var(--color-primary-500);
+    background: var(--color-primary-500);
   }
-  .range-input::-moz-range-thumb:where(.ptw-dark,.ptw-dark *) {
+  .poveste-text {
+    cursor: text;
+    align-items: center;
+  }
+  .poveste-text-input {
+    box-sizing: border-box;
+    border-radius: var(--radius-sm);
+    width: 100%;
+    color: inherit;
+    background: 0 0;
+    border: 1px solid #00000040;
+    outline: none;
+    margin-block: -.25rem;
+    padding: .25rem .5rem;
+  }
+  .poveste-text-input:where(.ptw-dark,.ptw-dark *) {
     border-color: #ffffff40;
   }
-  @supports (color:color-mix(in lab, red, red)) {
-    .range-input::-moz-range-thumb:where(.ptw-dark,.ptw-dark *) {
-      border-color: color-mix(in oklab, var(--color-white,#fff) 25%, transparent);
-    }
+  .poveste-text-input:focus {
+    border-color: var(--color-primary-500);
   }
-  .range-input::-moz-range-thumb:where(.ptw-dark,.ptw-dark *) {
-    background-color: var(--color-gray-700,var(--color-zinc-700));
+  .poveste-textarea {
+    cursor: text;
   }
-  .range-input:hover::-moz-range-thumb {
-    border-color: var(--color-primary-500,var(--color-emerald-500)) !important;
-    background-color: var(--color-primary-500,var(--color-emerald-500)) !important;
+  .poveste-textarea-input {
+    box-sizing: border-box;
+    border-radius: var(--radius-sm);
+    width: 100%;
+    min-height: 26px;
+    color: inherit;
+    resize: vertical;
+    background: 0 0;
+    border: 1px solid #00000040;
+    outline: none;
+    margin-block: -.25rem;
+    padding: .25rem .5rem;
   }
-  @property --tw-border-style {
-    syntax: "*";
-    inherits: false;
-    initial-value: solid;
+  .poveste-textarea-input:where(.ptw-dark,.ptw-dark *) {
+    border-color: #ffffff40;
   }
-  .__poveste-json-code[data-v-e4c89a1b] .cm-editor {
+  .poveste-textarea-input:focus {
+    border-color: var(--color-primary-500);
+  }
+  .__poveste-json-code[data-v-4b978a74] .cm-editor {
     min-width: 280px;
     height: 100%;
   }
-  .v-popper {
-    line-height: 0;
+  .poveste-date {
+    align-items: center;
   }
-  .v-popper--theme-dropdown .v-popper__inner:where(.ptw-dark, .ptw-dark *) {
-    border-color: var(--color-gray-850);
-    background-color: var(--color-gray-700);
-    color: var(--color-gray-100);
+  .poveste-date-row {
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem;
+    display: flex;
+  }
+  .poveste-date-field {
+    box-sizing: border-box;
+    border-radius: var(--radius-sm);
+    border: 1px solid #00000040;
+    align-items: center;
+    gap: 1px;
+    height: 27px;
+    margin-block: -.25rem;
+    padding-inline: .5rem;
+    display: flex;
+  }
+  .poveste-date-field:where(.ptw-dark,.ptw-dark *) {
+    border-color: #ffffff40;
+  }
+  .poveste-date-field:focus-within {
+    border-color: var(--color-primary-500);
+  }
+  .poveste-date-segment {
+    border-radius: var(--radius-sm);
+    padding-inline: .125rem;
+  }
+  .poveste-date-segment:focus {
+    background: var(--color-primary-500);
+    color: var(--color-white);
+    outline: none;
+  }
+  .poveste-date-segment[data-placeholder] {
+    opacity: .5;
+  }
+  .poveste-date-separator {
+    opacity: .5;
+  }
+  .poveste-date-trigger {
+    color: inherit;
+    opacity: .5;
+    cursor: pointer;
+    background: 0 0;
+    border: 0;
+    margin-left: .25rem;
+    padding: 0;
+    display: flex;
+  }
+  .poveste-date-trigger:hover {
+    opacity: 1;
+    color: var(--color-primary-500);
   }
-  .v-popper--theme-dropdown .v-popper__arrow-inner:where(.ptw-dark, .ptw-dark *) {
-    border-color: var(--color-gray-700);
+  .poveste-date-icon {
+    width: 1rem;
+    height: 1rem;
   }
-  .v-popper--theme-dropdown .v-popper__arrow-outer:where(.ptw-dark, .ptw-dark *) {
+  .poveste-date-calendar {
+    z-index: 100;
+    border: 1px solid var(--color-gray-200);
+    border-radius: var(--radius-sm);
+    background: var(--color-gray-50);
+    box-shadow: 0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;
+  }
+  .poveste-date-calendar:where(.ptw-dark,.ptw-dark *) {
     border-color: var(--color-gray-850);
+    background: var(--color-gray-700);
+  }
+  .poveste-date-calendar-body {
+    padding: .5rem;
+  }
+  .poveste-date-header {
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: .5rem;
+    display: flex;
+  }
+  .poveste-date-step {
+    border-radius: var(--radius-sm);
+    color: inherit;
+    cursor: pointer;
+    background: 0 0;
+    border: 0;
+    padding: .25rem;
+    display: flex;
+  }
+  .poveste-date-step:hover {
+    background: var(--color-primary-100);
+  }
+  .poveste-date-step:hover:where(.ptw-dark,.ptw-dark *) {
+    background: var(--color-primary-800);
+  }
+  .poveste-date-grid {
+    border-collapse: collapse;
+  }
+  .poveste-date-weekday {
+    opacity: .5;
+    width: 1.75rem;
+    font-size: .75rem;
+    font-weight: 400;
+  }
+  .poveste-date-day {
+    border-radius: var(--radius-sm);
+    width: 1.75rem;
+    height: 1.75rem;
+    color: inherit;
+    cursor: pointer;
+    background: 0 0;
+    border: 0;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+  }
+  .poveste-date-day[data-outside-view] {
+    opacity: .3;
+  }
+  .poveste-date-day[data-today] {
+    color: var(--color-primary-500);
+    font-weight: 700;
+  }
+  .poveste-date-day:hover:not([data-selected]) {
+    background: var(--color-primary-100);
+  }
+  .poveste-date-day:hover:not([data-selected]):where(.ptw-dark,.ptw-dark *) {
+    background: var(--color-primary-800);
+  }
+  .poveste-date-day[data-selected] {
+    background: var(--color-primary-500);
+    color: var(--color-white);
+  }
+  .poveste-color {
+    align-items: center;
+  }
+  .poveste-color-row {
+    align-items: center;
+    gap: .5rem;
+    width: 100%;
+    display: flex;
+  }
+  .poveste-color-swatch {
+    box-sizing: border-box;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    background: 0 0;
+    border: 1px solid #00000040;
+    flex: none;
+    width: 27px;
+    height: 27px;
+    margin-block: -.25rem;
+    padding: .125rem;
+  }
+  .poveste-color-swatch:where(.ptw-dark,.ptw-dark *) {
+    border-color: #ffffff40;
+  }
+  .poveste-color-swatch:hover {
+    border-color: var(--color-primary-500);
   }
-  .v-popper--theme-dropdown.v-popper__popper--show-from .v-popper__wrapper {
-    transform: scale(.75);
+  .poveste-color-swatch-fill {
+    border-radius: var(--radius-sm);
+    width: 100%;
+    height: 100%;
   }
-  .v-popper--theme-dropdown.v-popper__popper--show-to .v-popper__wrapper {
-    transform: none;
-    transition: transform .15s cubic-bezier(0, 1, .5, 1);
+  .poveste-color-field-root {
+    flex-grow: 1;
   }
-  .v-popper__popper:focus-visible {
+  .poveste-color-field {
+    box-sizing: border-box;
+    border-radius: var(--radius-sm);
+    width: 100%;
+    color: inherit;
+    background: 0 0;
+    border: 1px solid #00000040;
     outline: none;
+    margin-block: -.25rem;
+    padding: .25rem .5rem;
+  }
+  .poveste-color-field:where(.ptw-dark,.ptw-dark *) {
+    border-color: #ffffff40;
+  }
+  .poveste-color-field:focus {
+    border-color: var(--color-primary-500);
+  }
+  .poveste-color-picker {
+    z-index: 100;
+    border: 1px solid var(--color-gray-200);
+    border-radius: var(--radius-sm);
+    background: var(--color-gray-50);
+    flex-direction: column;
+    gap: .5rem;
+    padding: .5rem;
+    display: flex;
+    box-shadow: 0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;
+  }
+  .poveste-color-picker:where(.ptw-dark,.ptw-dark *) {
+    border-color: var(--color-gray-850);
+    background: var(--color-gray-700);
+  }
+  .poveste-color-area {
+    width: 10rem;
+    height: 8rem;
+  }
+  .poveste-color-area-surface {
+    border-radius: var(--radius-sm);
+    width: 100%;
+    height: 100%;
+  }
+  .poveste-color-hue {
+    width: 10rem;
+    height: .75rem;
+  }
+  .poveste-color-hue-track {
+    border-radius: 9999px;
+    width: 100%;
+    height: 100%;
+  }
+  .poveste-color-thumb {
+    border: 2px solid var(--color-white);
+    border-radius: 9999px;
+    width: .75rem;
+    height: .75rem;
+    box-shadow: 0 0 0 1px #00000080;
   }
   .__poveste-scale-x-enter-active, .__poveste-scale-x-leave-active {
     transition: transform .15s, opacity .15s;
@@ -341,38 +759,16 @@
       --color-red-600: oklch(57.7% 0.245 27.325);
       --color-red-700: oklch(50.5% 0.213 27.518);
       --color-orange-500: oklch(70.5% 0.213 47.604);
-      --color-emerald-50: oklch(97.9% 0.021 166.113);
-      --color-emerald-100: oklch(95% 0.052 163.051);
-      --color-emerald-200: oklch(90.5% 0.093 164.15);
-      --color-emerald-300: oklch(84.5% 0.143 164.978);
-      --color-emerald-400: oklch(76.5% 0.177 163.223);
-      --color-emerald-500: oklch(69.6% 0.17 162.48);
-      --color-emerald-600: oklch(59.6% 0.145 163.225);
-      --color-emerald-700: oklch(50.8% 0.118 165.612);
-      --color-emerald-800: oklch(43.2% 0.095 166.913);
-      --color-emerald-900: oklch(37.8% 0.077 168.94);
-      --color-emerald-950: oklch(26.2% 0.051 172.552);
-      --color-gray-50: rgb(var(--_poveste-color-gray-50));
-      --color-gray-100: rgb(var(--_poveste-color-gray-100));
-      --color-gray-200: rgb(var(--_poveste-color-gray-200));
-      --color-gray-300: rgb(var(--_poveste-color-gray-300));
-      --color-gray-400: rgb(var(--_poveste-color-gray-400));
-      --color-gray-500: rgb(var(--_poveste-color-gray-500));
-      --color-gray-600: rgb(var(--_poveste-color-gray-600));
-      --color-gray-700: rgb(var(--_poveste-color-gray-700));
-      --color-gray-800: rgb(var(--_poveste-color-gray-800));
-      --color-gray-900: rgb(var(--_poveste-color-gray-900));
-      --color-gray-950: rgb(var(--_poveste-color-gray-950));
-      --color-zinc-50: oklch(98.5% 0 none);
-      --color-zinc-100: oklch(96.7% 0.001 286.375);
-      --color-zinc-200: oklch(92% 0.004 286.32);
-      --color-zinc-300: oklch(87.1% 0.006 286.286);
-      --color-zinc-400: oklch(70.5% 0.015 286.067);
-      --color-zinc-500: oklch(55.2% 0.016 285.938);
-      --color-zinc-600: oklch(44.2% 0.017 285.786);
-      --color-zinc-700: oklch(37% 0.013 285.805);
-      --color-zinc-800: oklch(27.4% 0.006 286.033);
-      --color-zinc-900: oklch(21% 0.006 285.885);
+      --color-gray-50: var(--_poveste-color-gray-50, #fafafa);
+      --color-gray-100: var(--_poveste-color-gray-100, #f4f4f5);
+      --color-gray-200: var(--_poveste-color-gray-200, #e4e4e7);
+      --color-gray-300: var(--_poveste-color-gray-300, #d4d4d8);
+      --color-gray-400: var(--_poveste-color-gray-400, #a1a1aa);
+      --color-gray-500: var(--_poveste-color-gray-500, #71717a);
+      --color-gray-600: var(--_poveste-color-gray-600, #52525b);
+      --color-gray-700: var(--_poveste-color-gray-700, #3f3f46);
+      --color-gray-800: var(--_poveste-color-gray-800, #27272a);
+      --color-gray-900: var(--_poveste-color-gray-900, #18181b);
       --color-black: #000;
       --color-white: #fff;
       --spacing: 0.25rem;
@@ -392,29 +788,25 @@
       --leading-tight: 1.25;
       --leading-normal: 1.5;
       --radius-sm: 0.25rem;
-      --radius-md: 0.5rem;
       --radius-lg: 0.75rem;
-      --radius-xl: 1rem;
-      --radius-2xl: 1.5rem;
-      --radius-3xl: 2rem;
       --ease-out: cubic-bezier(0, 0, 0.2, 1);
       --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
       --blur-md: 12px;
       --default-transition-duration: 150ms;
       --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
       --radius: 0.375rem;
-      --color-primary-50: rgb(var(--_poveste-color-primary-50));
-      --color-primary-100: rgb(var(--_poveste-color-primary-100));
-      --color-primary-200: rgb(var(--_poveste-color-primary-200));
-      --color-primary-300: rgb(var(--_poveste-color-primary-300));
-      --color-primary-400: rgb(var(--_poveste-color-primary-400));
-      --color-primary-500: rgb(var(--_poveste-color-primary-500));
-      --color-primary-600: rgb(var(--_poveste-color-primary-600));
-      --color-primary-700: rgb(var(--_poveste-color-primary-700));
-      --color-primary-800: rgb(var(--_poveste-color-primary-800));
-      --color-primary-900: rgb(var(--_poveste-color-primary-900));
-      --color-gray-750: rgb(var(--_poveste-color-gray-750));
-      --color-gray-850: rgb(var(--_poveste-color-gray-850));
+      --color-primary-50: var(--_poveste-color-primary-50, #ecfdf5);
+      --color-primary-100: var(--_poveste-color-primary-100, #d1fae5);
+      --color-primary-200: var(--_poveste-color-primary-200, #a7f3d0);
+      --color-primary-300: var(--_poveste-color-primary-300, #6ee7b7);
+      --color-primary-400: var(--_poveste-color-primary-400, #34d399);
+      --color-primary-500: var(--_poveste-color-primary-500, #10b981);
+      --color-primary-600: var(--_poveste-color-primary-600, #059669);
+      --color-primary-700: var(--_poveste-color-primary-700, #047857);
+      --color-primary-800: var(--_poveste-color-primary-800, #065f46);
+      --color-primary-900: var(--_poveste-color-primary-900, #064e3b);
+      --color-gray-750: var(--_poveste-color-gray-750, #323238);
+      --color-gray-850: var(--_poveste-color-gray-850, #1f1f21);
     }
   }
   @layer utilities {
@@ -1012,6 +1404,9 @@
     .mb-8 {
       margin-bottom: calc(var(--spacing) * 8);
     }
+    .mb-\[10px\] {
+      margin-bottom: 10px;
+    }
     .ml-4 {
       margin-left: calc(var(--spacing) * 4);
     }
@@ -1036,18 +1431,12 @@
     .hidden {
       display: none;
     }
-    .hidden\! {
-      display: none !important;
-    }
     .inline {
       display: inline;
     }
     .inline-flex {
       display: inline-flex;
     }
-    .h-1 {
-      height: var(--spacing);
-    }
     .h-2 {
       height: calc(var(--spacing) * 2);
     }
@@ -1102,9 +1491,6 @@
     .h-\[16px\] {
       height: 16px;
     }
-    .h-\[22px\] {
-      height: 22px;
-    }
     .h-\[27px\] {
       height: 27px;
     }
@@ -1144,9 +1530,6 @@
     .min-h-32 {
       min-height: calc(var(--spacing) * 32);
     }
-    .min-h-\[26px\] {
-      min-height: 26px;
-    }
     .min-h-full {
       min-height: 100%;
     }
@@ -1255,9 +1638,15 @@
     .shrink-0 {
       flex-shrink: 0;
     }
+    .flex-grow {
+      flex-grow: 1;
+    }
     .grow {
       flex-grow: 1;
     }
+    .border-collapse {
+      border-collapse: collapse;
+    }
     .scale-0 {
       --tw-scale-x: 0%;
       --tw-scale-y: 0%;
@@ -1297,9 +1686,6 @@
     .resize-y {
       resize: vertical;
     }
-    .appearance-none {
-      appearance: none;
-    }
     .grid-cols-\[1fr_auto_1fr\] {
       grid-template-columns: 1fr auto 1fr;
     }
@@ -1312,9 +1698,6 @@
     .flex-row {
       flex-direction: row;
     }
-    .flex-nowrap {
-      flex-wrap: nowrap;
-    }
     .flex-wrap {
       flex-wrap: wrap;
     }
@@ -1425,9 +1808,6 @@
     .rounded {
       border-radius: var(--radius);
     }
-    .rounded-\[3px\]\! {
-      border-radius: 3px !important;
-    }
     .rounded-full {
       border-radius: calc(infinity * 1px);
     }
@@ -1485,10 +1865,6 @@
       border-left-style: var(--tw-border-style);
       border-left-width: 2px;
     }
-    .border-none {
-      --tw-border-style: none;
-      border-style: none;
-    }
     .border-solid {
       --tw-border-style: solid;
       border-style: solid;
@@ -1515,37 +1891,37 @@
       border-color: var(--color-gray-200);
     }
     .border-gray-300\/30 {
-      border-color: color-mix(in srgb, rgb(var(--_poveste-color-gray-300)) 30%, transparent);
+      border-color: var(--color-gray-300);
       @supports (color: color-mix(in lab, red, red)) {
         border-color: color-mix(in oklab, var(--color-gray-300) 30%, transparent);
       }
     }
     .border-gray-500\/5 {
-      border-color: color-mix(in srgb, rgb(var(--_poveste-color-gray-500)) 5%, transparent);
+      border-color: var(--color-gray-500);
       @supports (color: color-mix(in lab, red, red)) {
         border-color: color-mix(in oklab, var(--color-gray-500) 5%, transparent);
       }
     }
     .border-gray-500\/10 {
-      border-color: color-mix(in srgb, rgb(var(--_poveste-color-gray-500)) 10%, transparent);
+      border-color: var(--color-gray-500);
       @supports (color: color-mix(in lab, red, red)) {
         border-color: color-mix(in oklab, var(--color-gray-500) 10%, transparent);
       }
     }
     .border-gray-500\/30 {
-      border-color: color-mix(in srgb, rgb(var(--_poveste-color-gray-500)) 30%, transparent);
+      border-color: var(--color-gray-500);
       @supports (color: color-mix(in lab, red, red)) {
         border-color: color-mix(in oklab, var(--color-gray-500) 30%, transparent);
       }
     }
     .border-gray-500\/40 {
-      border-color: color-mix(in srgb, rgb(var(--_poveste-color-gray-500)) 40%, transparent);
+      border-color: var(--color-gray-500);
       @supports (color: color-mix(in lab, red, red)) {
         border-color: color-mix(in oklab, var(--color-gray-500) 40%, transparent);
       }
     }
     .border-gray-500\/50 {
-      border-color: color-mix(in srgb, rgb(var(--_poveste-color-gray-500)) 50%, transparent);
+      border-color: var(--color-gray-500);
       @supports (color: color-mix(in lab, red, red)) {
         border-color: color-mix(in oklab, var(--color-gray-500) 50%, transparent);
       }
@@ -1578,19 +1954,25 @@
       background-color: var(--color-gray-200);
     }
     .bg-gray-400\/25 {
-      background-color: color-mix(in srgb, rgb(var(--_poveste-color-gray-400)) 25%, transparent);
+      background-color: var(--color-gray-400);
       @supports (color: color-mix(in lab, red, red)) {
         background-color: color-mix(in oklab, var(--color-gray-400) 25%, transparent);
       }
     }
     .bg-gray-500\/10 {
-      background-color: color-mix(in srgb, rgb(var(--_poveste-color-gray-500)) 10%, transparent);
+      background-color: var(--color-gray-500);
       @supports (color: color-mix(in lab, red, red)) {
         background-color: color-mix(in oklab, var(--color-gray-500) 10%, transparent);
       }
     }
+    .bg-gray-500\/20 {
+      background-color: var(--color-gray-500);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-gray-500) 20%, transparent);
+      }
+    }
     .bg-gray-500\/50 {
-      background-color: color-mix(in srgb, rgb(var(--_poveste-color-gray-500)) 50%, transparent);
+      background-color: var(--color-gray-500);
       @supports (color: color-mix(in lab, red, red)) {
         background-color: color-mix(in oklab, var(--color-gray-500) 50%, transparent);
       }
@@ -1604,23 +1986,20 @@
     .bg-primary-500 {
       background-color: var(--color-primary-500);
     }
-    .bg-primary-500\! {
-      background-color: var(--color-primary-500) !important;
-    }
     .bg-primary-500\/10 {
-      background-color: color-mix(in srgb, rgb(var(--_poveste-color-primary-500)) 10%, transparent);
+      background-color: var(--color-primary-500);
       @supports (color: color-mix(in lab, red, red)) {
         background-color: color-mix(in oklab, var(--color-primary-500) 10%, transparent);
       }
     }
     .bg-primary-500\/20 {
-      background-color: color-mix(in srgb, rgb(var(--_poveste-color-primary-500)) 20%, transparent);
+      background-color: var(--color-primary-500);
       @supports (color: color-mix(in lab, red, red)) {
         background-color: color-mix(in oklab, var(--color-primary-500) 20%, transparent);
       }
     }
     .bg-primary-500\/25 {
-      background-color: color-mix(in srgb, rgb(var(--_poveste-color-primary-500)) 25%, transparent);
+      background-color: var(--color-primary-500);
       @supports (color: color-mix(in lab, red, red)) {
         background-color: color-mix(in oklab, var(--color-primary-500) 25%, transparent);
       }
@@ -1658,18 +2037,15 @@
       }
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
-    .fill-primary-500 {
-      fill: var(--color-primary-500);
-    }
-    .fill-transparent {
-      fill: transparent;
-    }
     .stroke-white {
       stroke: var(--color-white);
     }
     .stroke-2 {
       stroke-width: 2;
     }
+    .p-0 {
+      padding: 0px;
+    }
     .p-1 {
       padding: var(--spacing);
     }
@@ -1685,9 +2061,6 @@
     .p-8 {
       padding: calc(var(--spacing) * 8);
     }
-    .p-px {
-      padding: 1px;
-    }
     .px-0\.5 {
       padding-inline: calc(var(--spacing) * 0.5);
     }
@@ -1757,9 +2130,6 @@
     .pl-0\.5 {
       padding-left: calc(var(--spacing) * 0.5);
     }
-    .pl-2 {
-      padding-left: calc(var(--spacing) * 2);
-    }
     .pl-4 {
       padding-left: calc(var(--spacing) * 4);
     }
@@ -1841,7 +2211,7 @@
       color: var(--color-gray-500);
     }
     .text-gray-500\/20 {
-      color: color-mix(in srgb, rgb(var(--_poveste-color-gray-500)) 20%, transparent);
+      color: var(--color-gray-500);
       @supports (color: color-mix(in lab, red, red)) {
         color: color-mix(in oklab, var(--color-gray-500) 20%, transparent);
       }
@@ -1923,10 +2293,24 @@
       --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
+    .ring {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
     .outline {
       outline-style: var(--tw-outline-style);
       outline-width: 1px;
     }
+    .outline-2 {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+    .-outline-offset-2 {
+      outline-offset: calc(2px * -1);
+    }
+    .outline-primary-500 {
+      outline-color: var(--color-primary-500);
+    }
     .blur {
       --tw-blur: blur(8px);
       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,);
@@ -1999,9 +2383,6 @@
       --tw-ease: var(--ease-out);
       transition-timing-function: var(--ease-out);
     }
-    .will-change-transform {
-      will-change: transform;
-    }
     .outline-none {
       --tw-outline-style: none;
       outline-style: none;
@@ -2014,7 +2395,7 @@
       display: none;
     }
     .group-odd\:bg-gray-100\/50:is(:where(.group):nth-child(odd) *) {
-      background-color: color-mix(in srgb, rgb(var(--_poveste-color-gray-100)) 50%, transparent);
+      background-color: var(--color-gray-100);
       @supports (color: color-mix(in lab, red, red)) {
         background-color: color-mix(in oklab, var(--color-gray-100) 50%, transparent);
       }
@@ -2022,13 +2403,13 @@
     .group-focus-within\:visible:is(:where(.group):focus-within *) {
       visibility: visible;
     }
+    .group-focus-within\:flex:is(:where(.group):focus-within *) {
+      display: flex;
+    }
     @media (hover: hover) {
       .group-hover\:flex:is(:where(.group):hover *) {
         display: flex;
       }
-      .group-hover\:border-primary-500:is(:where(.group):hover *) {
-        border-color: var(--color-primary-500);
-      }
       .group-hover\:bg-primary-100:is(:where(.group):hover *) {
         background-color: var(--color-primary-100);
       }
@@ -2043,7 +2424,7 @@
       }
     }
     .group-active\:bg-gray-500\/20:is(:where(.group):active *) {
-      background-color: color-mix(in srgb, rgb(var(--_poveste-color-gray-500)) 20%, transparent);
+      background-color: var(--color-gray-500);
       @supports (color: color-mix(in lab, red, red)) {
         background-color: color-mix(in oklab, var(--color-gray-500) 20%, transparent);
       }
@@ -2058,7 +2439,7 @@
       border-color: var(--color-primary-500);
     }
     .focus-within\:bg-gray-500\/5:focus-within {
-      background-color: color-mix(in srgb, rgb(var(--_poveste-color-gray-500)) 5%, transparent);
+      background-color: var(--color-gray-500);
       @supports (color: color-mix(in lab, red, red)) {
         background-color: color-mix(in oklab, var(--color-gray-500) 5%, transparent);
       }
@@ -2071,23 +2452,15 @@
         background-color: var(--color-gray-200);
       }
       .hover\:bg-gray-500\/10:hover {
-        background-color: color-mix(in srgb, rgb(var(--_poveste-color-gray-500)) 10%, transparent);
+        background-color: var(--color-gray-500);
       }
       @supports (color: color-mix(in lab, red, red)) {
         .hover\:bg-gray-500\/10:hover {
           background-color: color-mix(in oklab, var(--color-gray-500) 10%, transparent);
         }
       }
-      .hover\:bg-gray-500\/20:hover {
-        background-color: color-mix(in srgb, rgb(var(--_poveste-color-gray-500)) 20%, transparent);
-      }
-      @supports (color: color-mix(in lab, red, red)) {
-        .hover\:bg-gray-500\/20:hover {
-          background-color: color-mix(in oklab, var(--color-gray-500) 20%, transparent);
-        }
-      }
       .hover\:bg-gray-500\/30:hover {
-        background-color: color-mix(in srgb, rgb(var(--_poveste-color-gray-500)) 30%, transparent);
+        background-color: var(--color-gray-500);
       }
       @supports (color: color-mix(in lab, red, red)) {
         .hover\:bg-gray-500\/30:hover {
@@ -2100,14 +2473,11 @@
       .hover\:bg-primary-100:hover {
         background-color: var(--color-primary-100);
       }
-      .hover\:bg-primary-200:hover {
-        background-color: var(--color-primary-200);
-      }
       .hover\:bg-primary-300:hover {
         background-color: var(--color-primary-300);
       }
       .hover\:bg-primary-500\/10:hover {
-        background-color: color-mix(in srgb, rgb(var(--_poveste-color-primary-500)) 10%, transparent);
+        background-color: var(--color-primary-500);
       }
       @supports (color: color-mix(in lab, red, red)) {
         .hover\:bg-primary-500\/10:hover {
@@ -2115,7 +2485,7 @@
         }
       }
       .hover\:bg-primary-500\/30:hover {
-        background-color: color-mix(in srgb, rgb(var(--_poveste-color-primary-500)) 30%, transparent);
+        background-color: var(--color-primary-500);
       }
       @supports (color: color-mix(in lab, red, red)) {
         .hover\:bg-primary-500\/30:hover {
@@ -2123,7 +2493,7 @@
         }
       }
       .hover\:bg-primary-500\/50:hover {
-        background-color: color-mix(in srgb, rgb(var(--_poveste-color-primary-500)) 50%, transparent);
+        background-color: var(--color-primary-500);
       }
       @supports (color: color-mix(in lab, red, red)) {
         .hover\:bg-primary-500\/50:hover {
@@ -2155,7 +2525,7 @@
       border-color: var(--color-primary-500);
     }
     .focus\:border-primary-500\/50:focus {
-      border-color: color-mix(in srgb, rgb(var(--_poveste-color-primary-500)) 50%, transparent);
+      border-color: var(--color-primary-500);
       @supports (color: color-mix(in lab, red, red)) {
         border-color: color-mix(in oklab, var(--color-primary-500) 50%, transparent);
       }
@@ -2166,8 +2536,24 @@
     .focus-visible\:border-primary-500:focus-visible {
       border-color: var(--color-primary-500);
     }
+    .focus-visible\:bg-primary-500\/50:focus-visible {
+      background-color: var(--color-primary-500);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-primary-500) 50%, transparent);
+      }
+    }
+    .focus-visible\:opacity-100:focus-visible {
+      opacity: 100%;
+    }
+    .focus-visible\:outline-2:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+    .focus-visible\:outline-primary-500:focus-visible {
+      outline-color: var(--color-primary-500);
+    }
     .active\:bg-gray-600\/50:active {
-      background-color: color-mix(in srgb, rgb(var(--_poveste-color-gray-600)) 50%, transparent);
+      background-color: var(--color-gray-600);
       @supports (color: color-mix(in lab, red, red)) {
         background-color: color-mix(in oklab, var(--color-gray-600) 50%, transparent);
       }
@@ -2235,7 +2621,7 @@
       border-color: var(--color-gray-700);
     }
     .dark\:border-gray-700\/30:where(.ptw-dark, .ptw-dark *) {
-      border-color: color-mix(in srgb, rgb(var(--_poveste-color-gray-700)) 30%, transparent);
+      border-color: var(--color-gray-700);
       @supports (color: color-mix(in lab, red, red)) {
         border-color: color-mix(in oklab, var(--color-gray-700) 30%, transparent);
       }
@@ -2286,7 +2672,7 @@
       background-color: var(--color-gray-900);
     }
     .dark\:bg-gray-900\/80:where(.ptw-dark, .ptw-dark *) {
-      background-color: color-mix(in srgb, rgb(var(--_poveste-color-gray-900)) 80%, transparent);
+      background-color: var(--color-gray-900);
       @supports (color: color-mix(in lab, red, red)) {
         background-color: color-mix(in oklab, var(--color-gray-900) 80%, transparent);
       }
@@ -2307,14 +2693,14 @@
       background-color: var(--color-primary-800);
     }
     .dark\:from-gray-800\/65:where(.ptw-dark, .ptw-dark *) {
-      --tw-gradient-from: color-mix(in srgb, rgb(var(--_poveste-color-gray-800)) 65%, transparent);
+      --tw-gradient-from: var(--color-gray-800);
       @supports (color: color-mix(in lab, red, red)) {
         --tw-gradient-from: color-mix(in oklab, var(--color-gray-800) 65%, transparent);
       }
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
     .dark\:to-gray-800\/40:where(.ptw-dark, .ptw-dark *) {
-      --tw-gradient-to: color-mix(in srgb, rgb(var(--_poveste-color-gray-800)) 40%, transparent);
+      --tw-gradient-to: var(--color-gray-800);
       @supports (color: color-mix(in lab, red, red)) {
         --tw-gradient-to: color-mix(in oklab, var(--color-gray-800) 40%, transparent);
       }
@@ -2371,15 +2757,12 @@
       --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
     }
     .dark\:group-odd\:bg-gray-750\/40:where(.ptw-dark, .ptw-dark *):is(:where(.group):nth-child(odd) *) {
-      background-color: color-mix(in srgb, rgb(var(--_poveste-color-gray-750)) 40%, transparent);
+      background-color: var(--color-gray-750);
       @supports (color: color-mix(in lab, red, red)) {
         background-color: color-mix(in oklab, var(--color-gray-750) 40%, transparent);
       }
     }
     @media (hover: hover) {
-      .group-hover\:dark\:border-primary-500:is(:where(.group):hover *):where(.ptw-dark, .ptw-dark *) {
-        border-color: var(--color-primary-500);
-      }
       .dark\:group-hover\:bg-primary-700:where(.ptw-dark, .ptw-dark *):is(:where(.group):hover *) {
         background-color: var(--color-primary-700);
       }
@@ -2451,6 +2834,14 @@
     input, button {
       font-family: inherit;
     }
+    button,
+  [type='button'],
+  [type='reset'],
+  [type='submit'] {
+      appearance: button;
+      background-color: transparent;
+      background-image: none;
+    }
     a,
   button {
       user-select: none;
@@ -2537,7 +2928,7 @@
         margin-bottom: 0.1rem;
       }
       &:is(code):not(:where(pre *)) {
-        background-color: color-mix(in srgb, rgb(var(--_poveste-color-gray-500)) 20%, transparent);
+        background-color: var(--color-gray-500);
         @supports (color: color-mix(in lab, red, red)) {
           background-color: color-mix(in oklab, var(--color-gray-500) 20%, transparent);
         }
@@ -2596,6 +2987,11 @@
     inherits: false;
     initial-value: 0;
   }
+  @property --tw-border-style {
+    syntax: "*";
+    inherits: false;
+    initial-value: solid;
+  }
   @property --tw-gradient-position {
     syntax: "*";
     inherits: false;
@@ -2820,7 +3216,6 @@
   @layer properties {
     @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
       *, ::before, ::after, ::backdrop {
-        --tw-border-style: solid;
         --tw-scale-x: 1;
         --tw-scale-y: 1;
         --tw-scale-z: 1;
@@ -2831,6 +3226,7 @@
         --tw-skew-y: initial;
         --tw-space-y-reverse: 0;
         --tw-divide-y-reverse: 0;
+        --tw-border-style: solid;
         --tw-gradient-position: initial;
         --tw-gradient-from: #0000;
         --tw-gradient-via: #0000;