@skiddph/prui 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/dist/app.js +1 -1
  2. package/dist/chunks/{auth-shell-DsAwGqf8.js → auth-shell-DWnZhpVf.js} +123 -122
  3. package/dist/core/button.d.ts +7 -2
  4. package/dist/core/button.js +45 -32
  5. package/dist/core/card.d.ts +9 -2
  6. package/dist/core/card.js +73 -58
  7. package/dist/core/index.d.ts +1 -0
  8. package/dist/core/input.d.ts +14 -1
  9. package/dist/core/input.js +32 -17
  10. package/dist/core/surface.d.ts +40 -0
  11. package/dist/core/surface.js +37 -0
  12. package/dist/core.js +63 -60
  13. package/dist/forms/form.d.ts +78 -0
  14. package/dist/forms/index.d.ts +8 -0
  15. package/dist/forms/registry.d.ts +4 -0
  16. package/dist/forms/types.d.ts +55 -0
  17. package/dist/forms.js +364 -0
  18. package/dist/index.d.ts +1 -0
  19. package/dist/index.js +150 -131
  20. package/dist/prui-utilities.css +1 -1
  21. package/dist/prui.css +37 -1
  22. package/dist/theme/base.css +36 -0
  23. package/dist/theme/index.d.ts +51 -0
  24. package/dist/theme.js +110 -35
  25. package/package.json +5 -1
package/dist/prui.css CHANGED
@@ -50,6 +50,42 @@ body.modal-open { overflow: hidden; }
50
50
  .prui-app aside::-webkit-scrollbar-thumb:hover { background: var(--prui-line); }
51
51
  .prui-app aside { scrollbar-width: thin; scrollbar-color: var(--prui-raise) transparent; }
52
52
 
53
+ /* Surface flexibility layer: per-component overrides via custom properties.
54
+ Components consume var(--prui-s-*, theme token) so an unset property
55
+ degrades to the theme default. Textures draw subtle patterns from
56
+ --prui-tex-c (default: the line token). */
57
+ .prui-tex-dots {
58
+ background-image: radial-gradient(var(--prui-tex-c, var(--prui-line)) 1px, transparent 1px);
59
+ background-size: 12px 12px;
60
+ }
61
+ .prui-tex-grid {
62
+ background-image:
63
+ linear-gradient(var(--prui-tex-c, var(--prui-line)) 1px, transparent 1px),
64
+ linear-gradient(90deg, var(--prui-tex-c, var(--prui-line)) 1px, transparent 1px);
65
+ background-size: 16px 16px;
66
+ }
67
+ .prui-tex-stripes {
68
+ background-image: repeating-linear-gradient(45deg, var(--prui-tex-c, var(--prui-line)) 0 1px, transparent 1px 10px);
69
+ }
70
+ .prui-tex-diagonal {
71
+ background-image: repeating-linear-gradient(-45deg, var(--prui-tex-c, var(--prui-line)) 0 1px, transparent 1px 8px);
72
+ }
73
+ .prui-elev-sm { box-shadow: 0 1px 2px rgb(0 0 0 / 0.28); }
74
+ .prui-elev-md { box-shadow: 0 4px 12px rgb(0 0 0 / 0.32); }
75
+ .prui-elev-lg { box-shadow: 0 12px 32px rgb(0 0 0 / 0.4); }
76
+
77
+ /* prui-card participates in the surface layer */
78
+ .prui-card {
79
+ background-color: var(--prui-s-bg, var(--prui-surface));
80
+ color: var(--prui-s-fg, inherit);
81
+ border-radius: var(--prui-s-radius, var(--prui-radius));
82
+ }
83
+ .prui-f-control {
84
+ background-color: var(--prui-s-bg, var(--prui-background));
85
+ color: var(--prui-s-fg, var(--prui-fg));
86
+ border-radius: var(--prui-s-radius, var(--prui-radius));
87
+ }
88
+
53
89
  /* Theme: control. Direction D "Control Room" — pure black, periwinkle accent. Default theme. */
54
90
  .prui-theme-control {
55
91
  color-scheme: dark;
@@ -119,4 +155,4 @@ body.modal-open { overflow: hidden; }
119
155
  }
120
156
 
121
157
  /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
122
- @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-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-4xl:56rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-wide:.025em;--leading-normal:1.5;--animate-spin:spin 1s linear infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:0}.top-0{top:0}.top-1\/2{top:50%}.top-3{top:calc(var(--spacing) * 3)}.top-4{top:calc(var(--spacing) * 4)}.right-0{right:0}.right-2{right:calc(var(--spacing) * 2)}.right-3{right:calc(var(--spacing) * 3)}.right-4{right:calc(var(--spacing) * 4)}.left-0{left:0}.left-2{left:calc(var(--spacing) * 2)}.left-2\.5{left:calc(var(--spacing) * 2.5)}.z-10{z-index:10}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.z-\[10000\]{z-index:10000}.z-\[10001\]{z-index:10001}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-0{margin:0}.m-auto{margin:auto}.mx-auto{margin-inline:auto}.my-1{margin-block:var(--spacing)}.my-3{margin-block:calc(var(--spacing) * 3)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mr-2{margin-right:calc(var(--spacing) * 2)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.ml-0\.5{margin-left:calc(var(--spacing) * .5)}.ml-1{margin-left:var(--spacing)}.ml-4{margin-left:calc(var(--spacing) * 4)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.h-3{height:calc(var(--spacing) * 3)}.h-3\.5{height:calc(var(--spacing) * 3.5)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.h-11{height:calc(var(--spacing) * 11)}.h-12{height:calc(var(--spacing) * 12)}.h-14{height:calc(var(--spacing) * 14)}.h-auto{height:auto}.h-fit{height:fit-content}.h-full{height:100%}.h-px{height:1px}.max-h-60{max-height:calc(var(--spacing) * 60)}.max-h-64{max-height:calc(var(--spacing) * 64)}.max-h-\[85vh\]{max-height:85vh}.min-h-4{min-height:calc(var(--spacing) * 4)}.min-h-20{min-height:calc(var(--spacing) * 20)}.min-h-\[100dvh\]{min-height:100dvh}.min-h-screen{min-height:100vh}.w-3{width:calc(var(--spacing) * 3)}.w-3\.5{width:calc(var(--spacing) * 3.5)}.w-4{width:calc(var(--spacing) * 4)}.w-6{width:calc(var(--spacing) * 6)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-10{width:calc(var(--spacing) * 10)}.w-12{width:calc(var(--spacing) * 12)}.w-20{width:calc(var(--spacing) * 20)}.w-24{width:calc(var(--spacing) * 24)}.w-28{width:calc(var(--spacing) * 28)}.w-36{width:calc(var(--spacing) * 36)}.w-56{width:calc(var(--spacing) * 56)}.w-64{width:calc(var(--spacing) * 64)}.w-\[min\(420px\,34vw\)\]{width:min(420px,34vw)}.w-full{width:100%}.w-px{width:1px}.max-w-4xl{max-width:var(--container-4xl)}.max-w-lg{max-width:var(--container-lg)}.max-w-md{max-width:var(--container-md)}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:0}.min-w-40{min-width:calc(var(--spacing) * 40)}.min-w-44{min-width:calc(var(--spacing) * 44)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.translate-x-0\.5{--tw-translate-x:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-4{--tw-translate-x:calc(var(--spacing) * 4);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-rotate-90{rotate:-90deg}.rotate-180{rotate:180deg}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize-y{resize:vertical}.scrollbar-thin{scrollbar-width:thin}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-\[1fr_auto_1fr\]{grid-template-columns:1fr auto 1fr}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-\[var\(--prui-line\)\]>:not(:last-child)){border-color:var(--prui-line)}.justify-self-end{justify-self:flex-end}.justify-self-start{justify-self:flex-start}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded-\[calc\(var\(--prui-radius\)-1px\)\]{border-radius:calc(var(--prui-radius) - 1px)}.rounded-\[var\(--prui-radius\)\]{border-radius:var(--prui-radius)}.rounded-\[var\(--prui-radius-1\)\]{border-radius:var(--prui-radius-1)}.rounded-\[var\(--prui-radius-full\)\]{border-radius:var(--prui-radius-full)}.rounded-full{border-radius:3.40282e38px}.rounded-t-\[var\(--prui-radius\)\]{border-top-left-radius:var(--prui-radius);border-top-right-radius:var(--prui-radius)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-\[var\(--prui-danger\)\]\/40{border-color:var(--prui-danger)}@supports (color:color-mix(in lab, red, red)){.border-\[var\(--prui-danger\)\]\/40{border-color:color-mix(in oklab, var(--prui-danger) 40%, transparent)}}.border-\[var\(--prui-line\)\]{border-color:var(--prui-line)}.border-\[var\(--prui-ok\)\]\/40{border-color:var(--prui-ok)}@supports (color:color-mix(in lab, red, red)){.border-\[var\(--prui-ok\)\]\/40{border-color:color-mix(in oklab, var(--prui-ok) 40%, transparent)}}.border-\[var\(--prui-warn\)\]\/40{border-color:var(--prui-warn)}@supports (color:color-mix(in lab, red, red)){.border-\[var\(--prui-warn\)\]\/40{border-color:color-mix(in oklab, var(--prui-warn) 40%, transparent)}}.border-transparent{border-color:#0000}.bg-\[var\(--prui-background\)\]{background-color:var(--prui-background)}.bg-\[var\(--prui-brand\)\],.bg-\[var\(--prui-brand\)\]\/15{background-color:var(--prui-brand)}@supports (color:color-mix(in lab, red, red)){.bg-\[var\(--prui-brand\)\]\/15{background-color:color-mix(in oklab, var(--prui-brand) 15%, transparent)}}.bg-\[var\(--prui-danger\)\],.bg-\[var\(--prui-danger\)\]\/10{background-color:var(--prui-danger)}@supports (color:color-mix(in lab, red, red)){.bg-\[var\(--prui-danger\)\]\/10{background-color:color-mix(in oklab, var(--prui-danger) 10%, transparent)}}.bg-\[var\(--prui-danger\)\]\/15{background-color:var(--prui-danger)}@supports (color:color-mix(in lab, red, red)){.bg-\[var\(--prui-danger\)\]\/15{background-color:color-mix(in oklab, var(--prui-danger) 15%, transparent)}}.bg-\[var\(--prui-line\)\]{background-color:var(--prui-line)}.bg-\[var\(--prui-ok\)\]\/10{background-color:var(--prui-ok)}@supports (color:color-mix(in lab, red, red)){.bg-\[var\(--prui-ok\)\]\/10{background-color:color-mix(in oklab, var(--prui-ok) 10%, transparent)}}.bg-\[var\(--prui-ok\)\]\/15{background-color:var(--prui-ok)}@supports (color:color-mix(in lab, red, red)){.bg-\[var\(--prui-ok\)\]\/15{background-color:color-mix(in oklab, var(--prui-ok) 15%, transparent)}}.bg-\[var\(--prui-raise\)\]{background-color:var(--prui-raise)}.bg-\[var\(--prui-surface\)\]{background-color:var(--prui-surface)}.bg-\[var\(--prui-warn\)\]\/10{background-color:var(--prui-warn)}@supports (color:color-mix(in lab, red, red)){.bg-\[var\(--prui-warn\)\]\/10{background-color:color-mix(in oklab, var(--prui-warn) 10%, transparent)}}.bg-\[var\(--prui-warn\)\]\/15{background-color:var(--prui-warn)}@supports (color:color-mix(in lab, red, red)){.bg-\[var\(--prui-warn\)\]\/15{background-color:color-mix(in oklab, var(--prui-warn) 15%, transparent)}}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.object-cover{object-fit:cover}.p-0{padding:0}.p-1{padding:var(--spacing)}.p-2{padding:calc(var(--spacing) * 2)}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.px-1{padding-inline:var(--spacing)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-3\.5{padding-inline:calc(var(--spacing) * 3.5)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-8{padding-inline:calc(var(--spacing) * 8)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-0{padding-top:0}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pt-8{padding-top:calc(var(--spacing) * 8)}.pt-24{padding-top:calc(var(--spacing) * 24)}.pr-8{padding-right:calc(var(--spacing) * 8)}.pb-1{padding-bottom:var(--spacing)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pb-8{padding-bottom:calc(var(--spacing) * 8)}.pl-2{padding-left:calc(var(--spacing) * 2)}.pl-2\.5{padding-left:calc(var(--spacing) * 2.5)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-6{padding-left:calc(var(--spacing) * 6)}.pl-8{padding-left:calc(var(--spacing) * 8)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[10px\]{font-size:10px}.leading-normal{--tw-leading:var(--leading-normal);line-height:var(--leading-normal)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[0\.1em\]{--tw-tracking:.1em;letter-spacing:.1em}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.whitespace-nowrap{white-space:nowrap}.text-\[var\(--prui-brand\)\]{color:var(--prui-brand)}.text-\[var\(--prui-brand-fg\)\]{color:var(--prui-brand-fg)}.text-\[var\(--prui-danger\)\]{color:var(--prui-danger)}.text-\[var\(--prui-dim\)\]{color:var(--prui-dim)}.text-\[var\(--prui-fg\)\]{color:var(--prui-fg)}.text-\[var\(--prui-ok\)\]{color:var(--prui-ok)}.text-\[var\(--prui-warn\)\]{color:var(--prui-warn)}.text-white{color:var(--color-white)}.capitalize{text-transform:capitalize}.uppercase{text-transform:uppercase}.accent-\[var\(--prui-brand\)\]{accent-color:var(--prui-brand)}.opacity-50{opacity:.5}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);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}.filter{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,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[filter\,background-color\,border-color\]{transition-property:filter,background-color,border-color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-150{--tw-duration:.15s;transition-duration:.15s}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.placeholder\:text-\[var\(--prui-dim\)\]::placeholder{color:var(--prui-dim)}.first\:pt-0:first-child{padding-top:0}.last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.last\:pb-0:last-child{padding-bottom:0}@media (hover:hover){.hover\:border-\[var\(--prui-dim\)\]:hover{border-color:var(--prui-dim)}.hover\:bg-\[var\(--prui-raise\)\]:hover{background-color:var(--prui-raise)}.hover\:text-\[var\(--prui-fg\)\]:hover{color:var(--prui-fg)}.hover\:underline:hover{text-decoration-line:underline}.hover\:brightness-110:hover{--tw-brightness:brightness(110%);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,)}}.focus\:border-\[var\(--prui-brand\)\]:focus{border-color:var(--prui-brand)}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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)}.focus\:ring-\[var\(--prui-brand\)\]\/30:focus{--tw-ring-color:var(--prui-brand)}@supports (color:color-mix(in lab, red, red)){.focus\:ring-\[var\(--prui-brand\)\]\/30:focus{--tw-ring-color:color-mix(in oklab, var(--prui-brand) 30%, transparent)}}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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)}.focus-visible\:ring-\[var\(--prui-brand\)\]:focus-visible{--tw-ring-color:var(--prui-brand)}.focus-visible\:ring-offset-1:focus-visible{--tw-ring-offset-width:1px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.active\:brightness-95:active{--tw-brightness:brightness(95%);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,)}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:opacity-60:disabled{opacity:.6}@media (min-width:40rem){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:justify-between{justify-content:space-between}}@media (min-width:48rem){.md\:fixed{position:fixed}.md\:inset-y-0{inset-block:0}.md\:left-0{left:0}.md\:z-30{z-index:30}.md\:col-span-2{grid-column:span 2/span 2}.md\:ml-\[var\(--prui-sidebar-width\)\]{margin-left:var(--prui-sidebar-width)}.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:w-56{width:calc(var(--spacing) * 56)}.md\:w-\[var\(--prui-sidebar-width\)\]{width:var(--prui-sidebar-width)}.md\:shrink-0{flex-shrink:0}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:flex-col{flex-direction:column}.md\:flex-row{flex-direction:row}.md\:border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.md\:border-\[var\(--prui-line\)\]{border-color:var(--prui-line)}.md\:bg-\[var\(--prui-surface\)\]{background-color:var(--prui-surface)}.md\:p-6{padding:calc(var(--spacing) * 6)}.md\:px-6{padding-inline:calc(var(--spacing) * 6)}}@media (min-width:64rem){.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}
158
+ @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-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-4xl:56rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-wide:.025em;--leading-normal:1.5;--animate-spin:spin 1s linear infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:0}.top-0{top:0}.top-1\/2{top:50%}.top-3{top:calc(var(--spacing) * 3)}.top-4{top:calc(var(--spacing) * 4)}.right-0{right:0}.right-2{right:calc(var(--spacing) * 2)}.right-3{right:calc(var(--spacing) * 3)}.right-4{right:calc(var(--spacing) * 4)}.left-0{left:0}.left-2{left:calc(var(--spacing) * 2)}.left-2\.5{left:calc(var(--spacing) * 2.5)}.z-10{z-index:10}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.z-\[10000\]{z-index:10000}.z-\[10001\]{z-index:10001}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-0{margin:0}.m-auto{margin:auto}.mx-auto{margin-inline:auto}.my-1{margin-block:var(--spacing)}.my-3{margin-block:calc(var(--spacing) * 3)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mr-2{margin-right:calc(var(--spacing) * 2)}.mb-1{margin-bottom:var(--spacing)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.ml-0\.5{margin-left:calc(var(--spacing) * .5)}.ml-1{margin-left:var(--spacing)}.ml-4{margin-left:calc(var(--spacing) * 4)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.h-3{height:calc(var(--spacing) * 3)}.h-3\.5{height:calc(var(--spacing) * 3.5)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.h-11{height:calc(var(--spacing) * 11)}.h-12{height:calc(var(--spacing) * 12)}.h-14{height:calc(var(--spacing) * 14)}.h-auto{height:auto}.h-fit{height:fit-content}.h-full{height:100%}.h-px{height:1px}.max-h-60{max-height:calc(var(--spacing) * 60)}.max-h-64{max-height:calc(var(--spacing) * 64)}.max-h-\[85vh\]{max-height:85vh}.min-h-4{min-height:calc(var(--spacing) * 4)}.min-h-20{min-height:calc(var(--spacing) * 20)}.min-h-\[100dvh\]{min-height:100dvh}.min-h-screen{min-height:100vh}.w-3{width:calc(var(--spacing) * 3)}.w-3\.5{width:calc(var(--spacing) * 3.5)}.w-4{width:calc(var(--spacing) * 4)}.w-6{width:calc(var(--spacing) * 6)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-10{width:calc(var(--spacing) * 10)}.w-12{width:calc(var(--spacing) * 12)}.w-20{width:calc(var(--spacing) * 20)}.w-24{width:calc(var(--spacing) * 24)}.w-28{width:calc(var(--spacing) * 28)}.w-36{width:calc(var(--spacing) * 36)}.w-56{width:calc(var(--spacing) * 56)}.w-64{width:calc(var(--spacing) * 64)}.w-\[min\(420px\,34vw\)\]{width:min(420px,34vw)}.w-full{width:100%}.w-px{width:1px}.max-w-4xl{max-width:var(--container-4xl)}.max-w-lg{max-width:var(--container-lg)}.max-w-md{max-width:var(--container-md)}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:0}.min-w-40{min-width:calc(var(--spacing) * 40)}.min-w-44{min-width:calc(var(--spacing) * 44)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.translate-x-0\.5{--tw-translate-x:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-4{--tw-translate-x:calc(var(--spacing) * 4);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-rotate-90{rotate:-90deg}.rotate-180{rotate:180deg}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize-y{resize:vertical}.scrollbar-thin{scrollbar-width:thin}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-\[1fr_auto_1fr\]{grid-template-columns:1fr auto 1fr}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-x-2{column-gap:calc(var(--spacing) * 2)}.gap-x-4{column-gap:calc(var(--spacing) * 4)}.gap-x-6{column-gap:calc(var(--spacing) * 6)}.gap-y-3{row-gap:calc(var(--spacing) * 3)}.gap-y-4{row-gap:calc(var(--spacing) * 4)}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-\[var\(--prui-line\)\]>:not(:last-child)){border-color:var(--prui-line)}.justify-self-end{justify-self:flex-end}.justify-self-start{justify-self:flex-start}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded-\[calc\(var\(--prui-radius\)-1px\)\]{border-radius:calc(var(--prui-radius) - 1px)}.rounded-\[var\(--prui-radius\)\]{border-radius:var(--prui-radius)}.rounded-\[var\(--prui-radius-1\)\]{border-radius:var(--prui-radius-1)}.rounded-\[var\(--prui-radius-full\)\]{border-radius:var(--prui-radius-full)}.rounded-\[var\(--prui-s-radius\,var\(--prui-radius\)\)\]{border-radius:var(--prui-s-radius,var(--prui-radius))}.rounded-\[var\(--prui-s-radius\,var\(--prui-radius-full\)\)\]{border-radius:var(--prui-s-radius,var(--prui-radius-full))}.rounded-full{border-radius:3.40282e38px}.rounded-t-\[var\(--prui-radius\)\]{border-top-left-radius:var(--prui-radius);border-top-right-radius:var(--prui-radius)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-\[var\(--prui-danger\)\]\/40{border-color:var(--prui-danger)}@supports (color:color-mix(in lab, red, red)){.border-\[var\(--prui-danger\)\]\/40{border-color:color-mix(in oklab, var(--prui-danger) 40%, transparent)}}.border-\[var\(--prui-line\)\]{border-color:var(--prui-line)}.border-\[var\(--prui-ok\)\]\/40{border-color:var(--prui-ok)}@supports (color:color-mix(in lab, red, red)){.border-\[var\(--prui-ok\)\]\/40{border-color:color-mix(in oklab, var(--prui-ok) 40%, transparent)}}.border-\[var\(--prui-s-border\,var\(--prui-brand\)\)\]{border-color:var(--prui-s-border,var(--prui-brand))}.border-\[var\(--prui-warn\)\]\/40{border-color:var(--prui-warn)}@supports (color:color-mix(in lab, red, red)){.border-\[var\(--prui-warn\)\]\/40{border-color:color-mix(in oklab, var(--prui-warn) 40%, transparent)}}.border-transparent{border-color:#0000}.bg-\[var\(--prui-background\)\]{background-color:var(--prui-background)}.bg-\[var\(--prui-brand\)\],.bg-\[var\(--prui-brand\)\]\/12{background-color:var(--prui-brand)}@supports (color:color-mix(in lab, red, red)){.bg-\[var\(--prui-brand\)\]\/12{background-color:color-mix(in oklab, var(--prui-brand) 12%, transparent)}}.bg-\[var\(--prui-brand\)\]\/15{background-color:var(--prui-brand)}@supports (color:color-mix(in lab, red, red)){.bg-\[var\(--prui-brand\)\]\/15{background-color:color-mix(in oklab, var(--prui-brand) 15%, transparent)}}.bg-\[var\(--prui-danger\)\]\/10{background-color:var(--prui-danger)}@supports (color:color-mix(in lab, red, red)){.bg-\[var\(--prui-danger\)\]\/10{background-color:color-mix(in oklab, var(--prui-danger) 10%, transparent)}}.bg-\[var\(--prui-danger\)\]\/15{background-color:var(--prui-danger)}@supports (color:color-mix(in lab, red, red)){.bg-\[var\(--prui-danger\)\]\/15{background-color:color-mix(in oklab, var(--prui-danger) 15%, transparent)}}.bg-\[var\(--prui-line\)\]{background-color:var(--prui-line)}.bg-\[var\(--prui-ok\)\]\/10{background-color:var(--prui-ok)}@supports (color:color-mix(in lab, red, red)){.bg-\[var\(--prui-ok\)\]\/10{background-color:color-mix(in oklab, var(--prui-ok) 10%, transparent)}}.bg-\[var\(--prui-ok\)\]\/15{background-color:var(--prui-ok)}@supports (color:color-mix(in lab, red, red)){.bg-\[var\(--prui-ok\)\]\/15{background-color:color-mix(in oklab, var(--prui-ok) 15%, transparent)}}.bg-\[var\(--prui-raise\)\]{background-color:var(--prui-raise)}.bg-\[var\(--prui-s-bg\,transparent\)\]{background-color:var(--prui-s-bg,transparent)}.bg-\[var\(--prui-s-bg\,var\(--prui-background\)\)\]{background-color:var(--prui-s-bg,var(--prui-background))}.bg-\[var\(--prui-s-bg\,var\(--prui-brand\)\)\]{background-color:var(--prui-s-bg,var(--prui-brand))}.bg-\[var\(--prui-s-bg\,var\(--prui-danger\)\)\]{background-color:var(--prui-s-bg,var(--prui-danger))}.bg-\[var\(--prui-s-bg\,var\(--prui-raise\)\)\]{background-color:var(--prui-s-bg,var(--prui-raise))}.bg-\[var\(--prui-surface\)\]{background-color:var(--prui-surface)}.bg-\[var\(--prui-warn\)\]\/10{background-color:var(--prui-warn)}@supports (color:color-mix(in lab, red, red)){.bg-\[var\(--prui-warn\)\]\/10{background-color:color-mix(in oklab, var(--prui-warn) 10%, transparent)}}.bg-\[var\(--prui-warn\)\]\/15{background-color:var(--prui-warn)}@supports (color:color-mix(in lab, red, red)){.bg-\[var\(--prui-warn\)\]\/15{background-color:color-mix(in oklab, var(--prui-warn) 15%, transparent)}}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.object-cover{object-fit:cover}.p-0{padding:0}.p-1{padding:var(--spacing)}.p-2{padding:calc(var(--spacing) * 2)}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.px-1{padding-inline:var(--spacing)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-3\.5{padding-inline:calc(var(--spacing) * 3.5)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-8{padding-inline:calc(var(--spacing) * 8)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-0{padding-top:0}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pt-8{padding-top:calc(var(--spacing) * 8)}.pt-24{padding-top:calc(var(--spacing) * 24)}.pr-8{padding-right:calc(var(--spacing) * 8)}.pb-1{padding-bottom:var(--spacing)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pb-8{padding-bottom:calc(var(--spacing) * 8)}.pl-2{padding-left:calc(var(--spacing) * 2)}.pl-2\.5{padding-left:calc(var(--spacing) * 2.5)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-6{padding-left:calc(var(--spacing) * 6)}.pl-8{padding-left:calc(var(--spacing) * 8)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[10px\]{font-size:10px}.leading-normal{--tw-leading:var(--leading-normal);line-height:var(--leading-normal)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[0\.1em\]{--tw-tracking:.1em;letter-spacing:.1em}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.whitespace-nowrap{white-space:nowrap}.text-\[var\(--prui-brand\)\]{color:var(--prui-brand)}.text-\[var\(--prui-danger\)\]{color:var(--prui-danger)}.text-\[var\(--prui-dim\)\]{color:var(--prui-dim)}.text-\[var\(--prui-fg\)\]{color:var(--prui-fg)}.text-\[var\(--prui-ok\)\]{color:var(--prui-ok)}.text-\[var\(--prui-s-fg\,\#fff\)\]{color:var(--prui-s-fg,#fff)}.text-\[var\(--prui-s-fg\,var\(--prui-brand\)\)\]{color:var(--prui-s-fg,var(--prui-brand))}.text-\[var\(--prui-s-fg\,var\(--prui-brand-fg\)\)\]{color:var(--prui-s-fg,var(--prui-brand-fg))}.text-\[var\(--prui-s-fg\,var\(--prui-fg\)\)\]{color:var(--prui-s-fg,var(--prui-fg))}.text-\[var\(--prui-warn\)\]{color:var(--prui-warn)}.text-white{color:var(--color-white)}.capitalize{text-transform:capitalize}.uppercase{text-transform:uppercase}.underline-offset-4{text-underline-offset:4px}.accent-\[var\(--prui-brand\)\]{accent-color:var(--prui-brand)}.opacity-50{opacity:.5}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);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}.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,)}.filter{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,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[filter\,background-color\,border-color\]{transition-property:filter,background-color,border-color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-150{--tw-duration:.15s;transition-duration:.15s}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.placeholder\:text-\[var\(--prui-dim\)\]::placeholder{color:var(--prui-dim)}.first\:pt-0:first-child{padding-top:0}.last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.last\:pb-0:last-child{padding-bottom:0}@media (hover:hover){.hover\:border-\[var\(--prui-dim\)\]:hover{border-color:var(--prui-dim)}.hover\:bg-\[var\(--prui-brand\)\]\/10:hover{background-color:var(--prui-brand)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-\[var\(--prui-brand\)\]\/10:hover{background-color:color-mix(in oklab, var(--prui-brand) 10%, transparent)}}.hover\:bg-\[var\(--prui-brand\)\]\/20:hover{background-color:var(--prui-brand)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-\[var\(--prui-brand\)\]\/20:hover{background-color:color-mix(in oklab, var(--prui-brand) 20%, transparent)}}.hover\:bg-\[var\(--prui-raise\)\]:hover{background-color:var(--prui-raise)}.hover\:text-\[var\(--prui-fg\)\]:hover{color:var(--prui-fg)}.hover\:underline:hover{text-decoration-line:underline}.hover\:brightness-110:hover{--tw-brightness:brightness(110%);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,)}}.focus\:border-\[var\(--prui-brand\)\]:focus{border-color:var(--prui-brand)}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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)}.focus\:ring-\[var\(--prui-brand\)\]\/30:focus{--tw-ring-color:var(--prui-brand)}@supports (color:color-mix(in lab, red, red)){.focus\:ring-\[var\(--prui-brand\)\]\/30:focus{--tw-ring-color:color-mix(in oklab, var(--prui-brand) 30%, transparent)}}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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)}.focus-visible\:ring-\[var\(--prui-brand\)\]:focus-visible{--tw-ring-color:var(--prui-brand)}.focus-visible\:ring-offset-1:focus-visible{--tw-ring-offset-width:1px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.active\:brightness-95:active{--tw-brightness:brightness(95%);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,)}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:opacity-60:disabled{opacity:.6}@media (min-width:40rem){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:justify-between{justify-content:space-between}}@media (min-width:48rem){.md\:fixed{position:fixed}.md\:inset-y-0{inset-block:0}.md\:left-0{left:0}.md\:z-30{z-index:30}.md\:col-span-2{grid-column:span 2/span 2}.md\:ml-\[var\(--prui-sidebar-width\)\]{margin-left:var(--prui-sidebar-width)}.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:w-56{width:calc(var(--spacing) * 56)}.md\:w-\[var\(--prui-sidebar-width\)\]{width:var(--prui-sidebar-width)}.md\:shrink-0{flex-shrink:0}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:flex-col{flex-direction:column}.md\:flex-row{flex-direction:row}.md\:border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.md\:border-\[var\(--prui-line\)\]{border-color:var(--prui-line)}.md\:bg-\[var\(--prui-surface\)\]{background-color:var(--prui-surface)}.md\:p-6{padding:calc(var(--spacing) * 6)}.md\:px-6{padding-inline:calc(var(--spacing) * 6)}}@media (min-width:64rem){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}
package/dist/theme/base.css CHANGED
@@ -34,3 +34,39 @@ body.modal-open { overflow: hidden; }
34
34
  .prui-app aside ::-webkit-scrollbar-thumb:hover,
35
35
  .prui-app aside::-webkit-scrollbar-thumb:hover { background: var(--prui-line); }
36
36
  .prui-app aside { scrollbar-width: thin; scrollbar-color: var(--prui-raise) transparent; }
37
+
38
+ /* Surface flexibility layer: per-component overrides via custom properties.
39
+ Components consume var(--prui-s-*, theme token) so an unset property
40
+ degrades to the theme default. Textures draw subtle patterns from
41
+ --prui-tex-c (default: the line token). */
42
+ .prui-tex-dots {
43
+ background-image: radial-gradient(var(--prui-tex-c, var(--prui-line)) 1px, transparent 1px);
44
+ background-size: 12px 12px;
45
+ }
46
+ .prui-tex-grid {
47
+ background-image:
48
+ linear-gradient(var(--prui-tex-c, var(--prui-line)) 1px, transparent 1px),
49
+ linear-gradient(90deg, var(--prui-tex-c, var(--prui-line)) 1px, transparent 1px);
50
+ background-size: 16px 16px;
51
+ }
52
+ .prui-tex-stripes {
53
+ background-image: repeating-linear-gradient(45deg, var(--prui-tex-c, var(--prui-line)) 0 1px, transparent 1px 10px);
54
+ }
55
+ .prui-tex-diagonal {
56
+ background-image: repeating-linear-gradient(-45deg, var(--prui-tex-c, var(--prui-line)) 0 1px, transparent 1px 8px);
57
+ }
58
+ .prui-elev-sm { box-shadow: 0 1px 2px rgb(0 0 0 / 0.28); }
59
+ .prui-elev-md { box-shadow: 0 4px 12px rgb(0 0 0 / 0.32); }
60
+ .prui-elev-lg { box-shadow: 0 12px 32px rgb(0 0 0 / 0.4); }
61
+
62
+ /* prui-card participates in the surface layer */
63
+ .prui-card {
64
+ background-color: var(--prui-s-bg, var(--prui-surface));
65
+ color: var(--prui-s-fg, inherit);
66
+ border-radius: var(--prui-s-radius, var(--prui-radius));
67
+ }
68
+ .prui-f-control {
69
+ background-color: var(--prui-s-bg, var(--prui-background));
70
+ color: var(--prui-s-fg, var(--prui-fg));
71
+ border-radius: var(--prui-s-radius, var(--prui-radius));
72
+ }
package/dist/theme/index.d.ts CHANGED
@@ -5,6 +5,57 @@
5
5
  */
6
6
  export declare const PRUI_THEMES: readonly ["control", "workshop", "ember", "daylight"];
7
7
  export type ThemeName = (typeof PRUI_THEMES)[number];
8
+ /** Token names understood by defineTheme / applyThemeTokens. */
9
+ export declare const PRUI_TOKENS: readonly ["background", "surface", "raise", "line", "fg", "dim", "brand", "brand-fg", "ok", "warn", "danger"];
10
+ export type ThemeTokenName = (typeof PRUI_TOKENS)[number];
11
+ export interface ThemeTokens {
12
+ background?: string;
13
+ surface?: string;
14
+ raise?: string;
15
+ line?: string;
16
+ fg?: string;
17
+ dim?: string;
18
+ brand?: string;
19
+ "brand-fg"?: string;
20
+ ok?: string;
21
+ warn?: string;
22
+ danger?: string;
23
+ /** Base corner radius, any CSS length. */
24
+ radius?: string;
25
+ /** Secondary-text opacity, 0 to 1. */
26
+ "dim-op"?: string | number;
27
+ /** Whether the custom theme reads as light or dark (default: dark). */
28
+ mode?: "light" | "dark";
29
+ }
30
+ /**
31
+ * Register a custom theme under a name. The theme becomes first-class:
32
+ * applyTheme({ theme: name }), the persisted-theme reader, and listThemes()
33
+ * all accept it. Call again with the same name to update it.
34
+ */
35
+ export declare function defineTheme(name: string, tokens: ThemeTokens): string;
36
+ /** All theme names: the four built-ins plus every theme from defineTheme. */
37
+ export declare function listThemes(): ThemeName[];
38
+ /**
39
+ * Overlay token values on top of the CURRENT theme without switching it.
40
+ * Vars are written inline on the target (documentElement by default), so a
41
+ * single call re-skins the running app. Pass a storageKey to persist the
42
+ * overlay and re-apply it on the next page load; pass null to skip
43
+ * persistence. Returns the list of vars written.
44
+ */
45
+ export declare function applyThemeTokens(tokens: ThemeTokens, options?: {
46
+ target?: HTMLElement | null;
47
+ storageKey?: string | null;
48
+ }): string[];
49
+ /** Remove a token overlay written by applyThemeTokens and forget its persistence. */
50
+ export declare function clearAppliedTokens(options?: {
51
+ target?: HTMLElement | null;
52
+ storageKey?: string | null;
53
+ }): void;
54
+ /** Re-apply a persisted token overlay (call once at startup if you use it). */
55
+ export declare function restoreAppliedTokens(options?: {
56
+ target?: HTMLElement | null;
57
+ storageKey?: string;
58
+ }): ThemeTokens | null;
8
59
  export type ThemeMode = "light" | "dark";
9
60
  /**
10
61
  * A theme default may be a named theme or the shorthand 'dark' / 'light',
package/dist/theme.js CHANGED
@@ -1,51 +1,120 @@
1
- const l = ["control", "workshop", "ember", "daylight"];
1
+ const u = ["control", "workshop", "ember", "daylight"], d = "prui-theme-", c = /* @__PURE__ */ new Map(), m = [
2
+ "background",
3
+ "surface",
4
+ "raise",
5
+ "line",
6
+ "fg",
7
+ "dim",
8
+ "brand",
9
+ "brand-fg",
10
+ "ok",
11
+ "warn",
12
+ "danger"
13
+ ];
2
14
  function s(e) {
15
+ return `--prui-${e}`;
16
+ }
17
+ function f(e) {
18
+ const t = [];
19
+ for (const [r, n] of Object.entries(e))
20
+ n !== void 0 && t.push(` ${s(r)}: ${n};`);
21
+ return t.join(`
22
+ `);
23
+ }
24
+ function E(e, t) {
25
+ const r = e.trim().toLowerCase().replace(/[^a-z0-9-]+/g, "-").replace(/^-+|-+$/g, "") || "custom";
26
+ if (c.set(r, { ...t }), typeof document < "u") {
27
+ let n = document.getElementById(`prui-custom-theme-${r}`);
28
+ n || (n = document.createElement("style"), n.id = `prui-custom-theme-${r}`, document.head.appendChild(n)), n.textContent = `.${d}${r} {
29
+ ${f(t)}
30
+ }`;
31
+ }
32
+ return r;
33
+ }
34
+ function v() {
35
+ return [...u, ...c.keys()];
36
+ }
37
+ function p(e, t = {}) {
38
+ const r = t.target ?? (typeof document < "u" ? document.documentElement : null), n = [];
39
+ if (r) {
40
+ for (const [o, l] of Object.entries(e))
41
+ l !== void 0 && (r.style.setProperty(s(o), String(l)), n.push(s(o)));
42
+ e.radius !== void 0 && (r.style.setProperty("--prui-radius", String(e.radius)), n.push("--prui-radius")), e["dim-op"] !== void 0 && (r.style.setProperty("--prui-dim-op", String(e["dim-op"])), n.push("--prui-dim-op"));
43
+ }
44
+ const i = t.storageKey === void 0 ? "prui:tokens" : t.storageKey;
45
+ return i && typeof localStorage < "u" && localStorage.setItem(i, JSON.stringify(e)), n;
46
+ }
47
+ function $(e = {}) {
48
+ const t = e.target ?? (typeof document < "u" ? document.documentElement : null);
49
+ if (t) {
50
+ for (const n of [...m, "radius", "dim-op"])
51
+ t.style.removeProperty(s(n));
52
+ t.style.removeProperty("--prui-radius"), t.style.removeProperty("--prui-dim-op");
53
+ }
54
+ const r = e.storageKey === void 0 ? "prui:tokens" : e.storageKey;
55
+ r && typeof localStorage < "u" && localStorage.removeItem(r);
56
+ }
57
+ function w(e = {}) {
58
+ if (typeof localStorage > "u") return null;
59
+ const t = e.storageKey ?? "prui:tokens", r = localStorage.getItem(t);
60
+ if (!r) return null;
61
+ try {
62
+ const n = JSON.parse(r);
63
+ return p(n, { target: e.target, storageKey: null }), n;
64
+ } catch {
65
+ return null;
66
+ }
67
+ }
68
+ function I(e) {
3
69
  return e === "dark" ? "control" : e === "light" ? "daylight" : e;
4
70
  }
5
- const u = ["control", "workshop", "ember"], d = ["daylight"];
6
- function m(e) {
7
- return u.includes(e);
71
+ const h = ["control", "workshop", "ember"], g = ["daylight"];
72
+ function y(e) {
73
+ return h.includes(e);
8
74
  }
9
- function p(e) {
10
- return d.includes(e);
75
+ function K(e) {
76
+ return g.includes(e);
11
77
  }
12
- function c(e) {
13
- return m(e) ? "dark" : "light";
78
+ function a(e) {
79
+ const t = c.get(e);
80
+ return t != null && t.mode ? t.mode : y(e) ? "dark" : "light";
14
81
  }
15
- const i = "prui-theme-";
16
- function h(e, t) {
17
- return [`${i}${e}`, "prui-root", `prui-mode-${t}`];
82
+ function k(e, t) {
83
+ return [`${d}${e}`, "prui-root", `prui-mode-${t}`];
18
84
  }
19
- function f(e) {
85
+ function S(e) {
20
86
  const t = [...e.classList].filter(
21
- (r) => r.startsWith(i) || r === "prui-root" || r.startsWith("prui-mode-")
87
+ (r) => r.startsWith(d) || r === "prui-root" || r.startsWith("prui-mode-")
22
88
  );
23
89
  t.length && e.classList.remove(...t);
24
90
  }
25
- function g(e = {}) {
26
- const t = s(e.theme ?? "control"), r = e.mode ?? c(t), n = e.target ?? (typeof document < "u" ? document.documentElement : null);
27
- n && (f(n), n.classList.add(...h(t, r)), n.dataset.pruiTheme = t, n.dataset.pruiMode = r, n.style.colorScheme = r);
28
- const o = e.storageKey === void 0 ? "prui:theme" : e.storageKey;
29
- return o && typeof localStorage < "u" && localStorage.setItem(o, JSON.stringify({ theme: t, mode: r })), { theme: t, mode: r };
91
+ function T(e = {}) {
92
+ const t = e.theme ?? "control";
93
+ if (!(t === "dark" || t === "light" || u.includes(t) || c.has(t)))
94
+ return T({ ...e, theme: "control" });
95
+ const n = t === "dark" ? "control" : t === "light" ? "daylight" : t, i = e.mode ?? a(n), o = e.target ?? (typeof document < "u" ? document.documentElement : null);
96
+ o && (S(o), o.classList.add(...k(n, i)), o.dataset.pruiTheme = n, o.dataset.pruiMode = i, o.style.colorScheme = i);
97
+ const l = e.storageKey === void 0 ? "prui:theme" : e.storageKey;
98
+ return l && typeof localStorage < "u" && localStorage.setItem(l, JSON.stringify({ theme: n, mode: i })), { theme: n, mode: i };
30
99
  }
31
- function y(e = "prui:theme") {
100
+ function P(e = "prui:theme") {
32
101
  if (typeof localStorage > "u") return null;
33
102
  const t = localStorage.getItem(e);
34
103
  if (!t) return null;
35
104
  try {
36
- const r = JSON.parse(t), n = l.find((a) => a === r.theme);
105
+ const r = JSON.parse(t), n = u.find((o) => o === r.theme);
37
106
  if (!n) return null;
38
- const o = r.mode === "light" || r.mode === "dark" ? r.mode : c(n);
39
- return { theme: n, mode: o };
107
+ const i = r.mode === "light" || r.mode === "dark" ? r.mode : a(n);
108
+ return { theme: n, mode: i };
40
109
  } catch {
41
110
  return null;
42
111
  }
43
112
  }
44
- function T(e) {
45
- const t = l.indexOf(e);
46
- return l[(t + 1) % l.length] ?? "control";
113
+ function M(e) {
114
+ const t = u.indexOf(e);
115
+ return u[(t + 1) % u.length] ?? "control";
47
116
  }
48
- const E = {
117
+ const b = {
49
118
  name: "applyTheme",
50
119
  description: "Apply a named PRUI theme and persist the choice.",
51
120
  props: [
@@ -56,13 +125,19 @@ const E = {
56
125
  ]
57
126
  };
58
127
  export {
59
- l as PRUI_THEMES,
60
- g as applyTheme,
61
- m as isDarkTheme,
62
- p as isLightTheme,
63
- T as nextTheme,
64
- y as readPersistedTheme,
65
- s as resolveThemeName,
66
- E as themeMeta,
67
- c as themeMode
128
+ u as PRUI_THEMES,
129
+ m as PRUI_TOKENS,
130
+ T as applyTheme,
131
+ p as applyThemeTokens,
132
+ $ as clearAppliedTokens,
133
+ E as defineTheme,
134
+ y as isDarkTheme,
135
+ K as isLightTheme,
136
+ v as listThemes,
137
+ M as nextTheme,
138
+ P as readPersistedTheme,
139
+ I as resolveThemeName,
140
+ w as restoreAppliedTokens,
141
+ b as themeMeta,
142
+ a as themeMode
68
143
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skiddph/prui",
3
- "version": "0.3.0",
3
+ "version": "0.4.0",
4
4
  "description": "PRUI component system: primitives, app-layer super-components, pages, and themes",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
@@ -27,6 +27,10 @@
27
27
  "types": "./dist/app/index.d.ts",
28
28
  "import": "./dist/app.js"
29
29
  },
30
+ "./forms": {
31
+ "types": "./dist/forms/index.d.ts",
32
+ "import": "./dist/forms.js"
33
+ },
30
34
  "./pages": {
31
35
  "types": "./dist/pages/index.d.ts",
32
36
  "import": "./dist/pages.js"