@handamade/psi-react 0.25.0 → 0.27.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 (42) hide show
  1. package/README.md +23 -1
  2. package/dist/Checkbox/Checkbox.d.ts +11 -2
  3. package/dist/Checkbox/Checkbox.d.ts.map +1 -1
  4. package/dist/Dialog/Dialog.d.ts +17 -3
  5. package/dist/Dialog/Dialog.d.ts.map +1 -1
  6. package/dist/Field/Field.d.ts +3 -0
  7. package/dist/Field/Field.d.ts.map +1 -1
  8. package/dist/Menu/Menu.d.ts +11 -2
  9. package/dist/Menu/Menu.d.ts.map +1 -1
  10. package/dist/Menu/useMenuKeyboard.d.ts +5 -1
  11. package/dist/Menu/useMenuKeyboard.d.ts.map +1 -1
  12. package/dist/RadioGroup/Radio.d.ts +17 -0
  13. package/dist/RadioGroup/Radio.d.ts.map +1 -0
  14. package/dist/RadioGroup/RadioGroup.d.ts +40 -0
  15. package/dist/RadioGroup/RadioGroup.d.ts.map +1 -0
  16. package/dist/Stack/Stack.d.ts +19 -0
  17. package/dist/Stack/Stack.d.ts.map +1 -0
  18. package/dist/Table/TableSelectionCell.d.ts.map +1 -1
  19. package/dist/Text/Text.d.ts +24 -0
  20. package/dist/Text/Text.d.ts.map +1 -0
  21. package/dist/Textarea/Textarea.d.ts +25 -0
  22. package/dist/Textarea/Textarea.d.ts.map +1 -0
  23. package/dist/Tooltip/Tooltip.d.ts +1 -1
  24. package/dist/Tooltip/Tooltip.d.ts.map +1 -1
  25. package/dist/a11y-meta.d.ts.map +1 -1
  26. package/dist/index.d.ts +11 -1
  27. package/dist/index.d.ts.map +1 -1
  28. package/dist/index.js +1393 -1188
  29. package/dist/manifest.json +345 -5
  30. package/dist/patterns.json +153 -6
  31. package/dist/styles.css +1 -1
  32. package/docs/Checkbox.md +2 -1
  33. package/docs/Dialog.md +5 -2
  34. package/docs/Menu.md +4 -1
  35. package/docs/Radio.md +40 -0
  36. package/docs/RadioGroup.md +46 -0
  37. package/docs/Stack.md +40 -0
  38. package/docs/Text.md +42 -0
  39. package/docs/Textarea.md +43 -0
  40. package/docs/Tooltip.md +1 -1
  41. package/llms.txt +12 -5
  42. package/package.json +2 -2
package/dist/styles.css CHANGED
@@ -1 +1 @@
1
- @layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._button_1rxq8_3{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--psi-button-radius);cursor:pointer;font-family:var(--psi-font-sans);white-space:nowrap;text-decoration:none;-webkit-user-select:none;user-select:none;transition:background-color var(--psi-duration-150) var(--psi-ease-standard),color var(--psi-duration-150) var(--psi-ease-standard)}._button_1rxq8_3:focus-visible{outline:var(--psi-focus-ring-width) solid var(--psi-button-focus-ring);outline-offset:var(--psi-focus-ring-offset)}._button_1rxq8_3:disabled{opacity:.4;cursor:not-allowed}._button_1rxq8_3>span{max-inline-size:var(--psi-button-label-max-width);overflow:hidden;text-overflow:ellipsis;flex:none}._button_1rxq8_3._disabled_1rxq8_45{opacity:.4;cursor:not-allowed;pointer-events:none}._size24_1rxq8_70{height:var(--psi-button-24-height);padding-inline:var(--psi-button-24-padding-inline);gap:var(--psi-button-24-gap);font:var(--psi-button-font, var(--psi-button-24-font))}._size24_1rxq8_70:has(>svg:first-child){padding-inline-start:var(--psi-button-24-padding-inline-icon)}._size24_1rxq8_70:has(>svg:last-child:not(:first-child)){padding-inline-end:var(--psi-button-24-padding-inline-icon)}._size24_1rxq8_70>svg{inline-size:var(--psi-button-24-icon-size);block-size:var(--psi-button-24-icon-size);flex:none}._size32_1rxq8_88{height:var(--psi-button-32-height);padding-inline:var(--psi-button-32-padding-inline);gap:var(--psi-button-32-gap);font:var(--psi-button-font, var(--psi-button-32-font))}._size32_1rxq8_88:has(>svg:first-child){padding-inline-start:var(--psi-button-32-padding-inline-icon)}._size32_1rxq8_88:has(>svg:last-child:not(:first-child)){padding-inline-end:var(--psi-button-32-padding-inline-icon)}._size32_1rxq8_88>svg{inline-size:var(--psi-button-32-icon-size);block-size:var(--psi-button-32-icon-size);flex:none}._size40_1rxq8_106{height:var(--psi-button-40-height);padding-inline:var(--psi-button-40-padding-inline);gap:var(--psi-button-40-gap);font:var(--psi-button-font, var(--psi-button-40-font))}._size40_1rxq8_106:has(>svg:first-child){padding-inline-start:var(--psi-button-40-padding-inline-icon)}._size40_1rxq8_106:has(>svg:last-child:not(:first-child)){padding-inline-end:var(--psi-button-40-padding-inline-icon)}._size40_1rxq8_106>svg{inline-size:var(--psi-button-40-icon-size);block-size:var(--psi-button-40-icon-size);flex:none}._size48_1rxq8_124{height:var(--psi-button-48-height);padding-inline:var(--psi-button-48-padding-inline);gap:var(--psi-button-48-gap);font:var(--psi-button-font, var(--psi-button-48-font))}._size48_1rxq8_124:has(>svg:first-child){padding-inline-start:var(--psi-button-48-padding-inline-icon)}._size48_1rxq8_124:has(>svg:last-child:not(:first-child)){padding-inline-end:var(--psi-button-48-padding-inline-icon)}._size48_1rxq8_124>svg{inline-size:var(--psi-button-48-icon-size);block-size:var(--psi-button-48-icon-size);flex:none}._accent_1rxq8_145{background:var(--psi-button-accent-bg);color:var(--psi-button-accent-fg)}._accent_1rxq8_145:hover:not(:disabled):not(._disabled_1rxq8_45){background:var(--psi-button-accent-bg-hover)}._accent_1rxq8_145:active:not(:disabled):not(._disabled_1rxq8_45){background:var(--psi-button-accent-bg-active)}._accentSubtle_1rxq8_157{background:var(--psi-button-accent-subtle-bg);color:var(--psi-button-accent-subtle-fg)}._accentSubtle_1rxq8_157:hover:not(:disabled):not(._disabled_1rxq8_45){background:var(--psi-button-accent-subtle-bg-hover)}._accentSubtle_1rxq8_157:active:not(:disabled):not(._disabled_1rxq8_45){background:var(--psi-button-accent-subtle-bg-active)}._neutral_1rxq8_169{background:var(--psi-button-neutral-bg);color:var(--psi-button-neutral-fg)}._neutral_1rxq8_169:hover:not(:disabled):not(._disabled_1rxq8_45){background:var(--psi-button-neutral-bg-hover)}._neutral_1rxq8_169:active:not(:disabled):not(._disabled_1rxq8_45){background:var(--psi-button-neutral-bg-active)}._neutralSubtle_1rxq8_181{background:var(--psi-button-neutral-subtle-bg);color:var(--psi-button-neutral-subtle-fg)}._neutralSubtle_1rxq8_181:hover:not(:disabled):not(._disabled_1rxq8_45){background:var(--psi-button-neutral-subtle-bg-hover)}._neutralSubtle_1rxq8_181:active:not(:disabled):not(._disabled_1rxq8_45){background:var(--psi-button-neutral-subtle-bg-active)}._ghost_1rxq8_193{background:var(--psi-button-ghost-bg);color:var(--psi-button-ghost-fg)}._ghost_1rxq8_193:hover:not(:disabled):not(._disabled_1rxq8_45){background:var(--psi-button-ghost-bg-hover)}._ghost_1rxq8_193:active:not(:disabled):not(._disabled_1rxq8_45){background:var(--psi-button-ghost-bg-active)}._danger_1rxq8_205{background:var(--psi-button-danger-bg);color:var(--psi-button-danger-fg)}._danger_1rxq8_205:hover:not(:disabled):not(._disabled_1rxq8_45){background:var(--psi-button-danger-bg-hover)}._danger_1rxq8_205:active:not(:disabled):not(._disabled_1rxq8_45){background:var(--psi-button-danger-bg-active)}._dangerSubtle_1rxq8_217{background:var(--psi-button-danger-subtle-bg);color:var(--psi-button-danger-subtle-fg)}._dangerSubtle_1rxq8_217:hover:not(:disabled):not(._disabled_1rxq8_45){background:var(--psi-button-danger-subtle-bg-hover)}._dangerSubtle_1rxq8_217:active:not(:disabled):not(._disabled_1rxq8_45){background:var(--psi-button-danger-subtle-bg-active)}._outline_1rxq8_229{background:var(--psi-button-outline-bg);color:var(--psi-button-outline-fg);border:1px solid var(--psi-button-outline-border)}._outline_1rxq8_229:hover:not(:disabled):not(._disabled_1rxq8_45){background:var(--psi-button-outline-bg-hover);color:var(--psi-button-outline-fg-hover);border-color:transparent}._outline_1rxq8_229:active:not(:disabled):not(._disabled_1rxq8_45){background:var(--psi-button-outline-bg-active)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._iconButton_1q4hx_3{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--psi-button-radius);cursor:pointer;padding:0;text-decoration:none;-webkit-user-select:none;user-select:none;transition:background-color var(--psi-duration-150) var(--psi-ease-standard),color var(--psi-duration-150) var(--psi-ease-standard)}._iconButton_1q4hx_3:focus-visible{outline:var(--psi-focus-ring-width) solid var(--psi-button-focus-ring);outline-offset:var(--psi-focus-ring-offset)}._iconButton_1q4hx_3:disabled{opacity:.4;cursor:not-allowed}._iconButton_1q4hx_3._disabled_1q4hx_29{opacity:.4;cursor:not-allowed;pointer-events:none}._size24_1q4hx_37{width:var(--psi-button-24-height);height:var(--psi-button-24-height)}._size32_1q4hx_42{width:var(--psi-button-32-height);height:var(--psi-button-32-height)}._size40_1q4hx_47{width:var(--psi-button-40-height);height:var(--psi-button-40-height)}._size48_1q4hx_52{width:var(--psi-button-48-height);height:var(--psi-button-48-height)}._accent_1q4hx_60{background:var(--psi-button-accent-bg);color:var(--psi-button-accent-fg)}._accent_1q4hx_60:hover:not(:disabled):not(._disabled_1q4hx_29){background:var(--psi-button-accent-bg-hover)}._accent_1q4hx_60:active:not(:disabled):not(._disabled_1q4hx_29){background:var(--psi-button-accent-bg-active)}._neutral_1q4hx_72{background:var(--psi-button-neutral-bg);color:var(--psi-button-neutral-fg)}._neutral_1q4hx_72:hover:not(:disabled):not(._disabled_1q4hx_29){background:var(--psi-button-neutral-bg-hover)}._neutral_1q4hx_72:active:not(:disabled):not(._disabled_1q4hx_29){background:var(--psi-button-neutral-bg-active)}._ghost_1q4hx_84{background:var(--psi-button-ghost-bg);color:var(--psi-button-ghost-fg)}._ghost_1q4hx_84:hover:not(:disabled):not(._disabled_1q4hx_29){background:var(--psi-button-ghost-bg-hover)}._ghost_1q4hx_84:active:not(:disabled):not(._disabled_1q4hx_29){background:var(--psi-button-ghost-bg-active)}._danger_1q4hx_96{background:var(--psi-button-danger-bg);color:var(--psi-button-danger-fg)}._danger_1q4hx_96:hover:not(:disabled):not(._disabled_1q4hx_29){background:var(--psi-button-danger-bg-hover)}._danger_1q4hx_96:active:not(:disabled):not(._disabled_1q4hx_29){background:var(--psi-button-danger-bg-active)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._card_1btb3_1{background:var(--psi-card-bg);border:1px solid var(--psi-card-border);border-radius:var(--psi-card-radius);overflow:hidden}._stacked_1btb3_8{display:flex;flex-direction:column;gap:var(--psi-card-gap)}._featured_1btb3_10{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--psi-card-gap);align-items:start}@media(max-width:960px){._featured_1btb3_10{grid-template-columns:1fr}}._media_1btb3_22{min-width:0}._body_1btb3_23{min-width:0;display:flex;flex-direction:column;gap:var(--psi-card-gap);padding:var(--psi-card-gap)}._hoverLift_1btb3_31{transition:transform var(--psi-duration-350) var(--psi-ease-standard)}._hoverLift_1btb3_31:hover{transform:translateY(-6px)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._panel_jn8w4_1{background:var(--psi-panel-bg);border:1px solid var(--psi-panel-border);border-radius:var(--psi-panel-radius);padding:var(--psi-panel-padding)}._padding16_jn8w4_8{padding:var(--psi-space-16)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._list_1lh3q_8{display:flex;flex-direction:column;gap:var(--psi-space-12);margin:var(--psi-space-0)}._list_1lh3q_8[data-gap="8"]{gap:var(--psi-space-8)}._list_1lh3q_8[data-gap="16"]{gap:var(--psi-space-16)}._item_1lh3q_26{display:flex;flex-direction:column;gap:var(--psi-space-4);min-width:0}._list_1lh3q_8[data-layout=inline] ._item_1lh3q_26{display:grid;grid-template-columns:auto 1fr;column-gap:var(--psi-space-16);row-gap:var(--psi-space-0);align-items:start}._term_1lh3q_44{color:var(--psi-description-list-term-fg);font:var(--psi-text-14-20-medium);min-width:0}._value_1lh3q_50{color:var(--psi-description-list-value-fg);font:var(--psi-text-14-20-regular);margin:var(--psi-space-0);min-width:0;overflow-wrap:anywhere}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._navbar_1w24e_1{font:var(--psi-text-14-20-medium);position:sticky;top:0;z-index:var(--psi-z-nav);background:var(--psi-navbar-bg);backdrop-filter:blur(var(--psi-navbar-blur));-webkit-backdrop-filter:blur(var(--psi-navbar-blur));border-bottom:1px solid var(--psi-navbar-border)}._inner_1w24e_12{display:flex;align-items:center;gap:var(--psi-space-24);height:var(--psi-navbar-height)}._fluid_1w24e_20{padding-inline:var(--psi-navbar-gutter)}._brand_1w24e_22{display:flex;align-items:center}._links_1w24e_23{display:flex;align-items:center;gap:var(--psi-space-20);margin-inline-start:auto}._links_1w24e_23 a,._brand_1w24e_22 a{text-decoration:none;transition:color var(--psi-duration-150) var(--psi-ease-soft)}._links_1w24e_23 a{color:var(--psi-navbar-link-fg)}._links_1w24e_23 a:hover,._brand_1w24e_22 a{color:var(--psi-navbar-link-fg-hover)}._links_1w24e_23 a:focus-visible,._brand_1w24e_22 a:focus-visible{outline:var(--psi-focus-ring-width) solid var(--psi-navbar-focus-ring);outline-offset:var(--psi-focus-ring-offset)}._actions_1w24e_53{display:flex;align-items:center;gap:var(--psi-space-8)}._brand_1w24e_22+._actions_1w24e_53,._actions_1w24e_53:first-child{margin-inline-start:auto}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._skipLink_1fn0y_4{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}._skipLink_1fn0y_4:focus-visible{position:fixed;inset-block-start:0;inset-inline-start:0;margin:var(--psi-space-8);z-index:var(--psi-z-overlay);display:inline-flex;align-items:center;box-sizing:border-box;width:auto;height:var(--psi-size-32);padding-inline:var(--psi-space-12);overflow:visible;clip:auto;clip-path:none;background:var(--psi-skip-link-bg);color:var(--psi-skip-link-fg);border:1px solid var(--psi-skip-link-border);border-radius:var(--psi-skip-link-radius);font:var(--psi-text-14-20-medium);text-decoration:none;outline:var(--psi-focus-ring-width) solid var(--psi-skip-link-focus-ring);outline-offset:var(--psi-focus-ring-offset)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._navTree_1ktoe_7{display:block}._list_1ktoe_11,._groupList_1ktoe_12{display:flex;flex-direction:column;gap:var(--psi-space-2);margin:0;padding:0;list-style:none}._item_1ktoe_23 a{position:relative;display:flex;align-items:center;box-sizing:border-box;min-height:var(--psi-size-32);padding-block:var(--psi-space-4);padding-inline:var(--psi-space-12);border-radius:var(--psi-nav-tree-radius);color:var(--psi-nav-tree-item-fg);font:var(--psi-text-14-20-regular);text-decoration:none}._item_1ktoe_23 a:hover{background:var(--psi-nav-tree-item-bg-hover)}._item_1ktoe_23 a:focus-visible{outline:var(--psi-focus-ring-width) solid var(--psi-nav-tree-focus-ring);outline-offset:var(--psi-focus-ring-offset-inset)}._item_1ktoe_23 a[aria-current=page]{background:var(--psi-nav-tree-item-bg-current);color:var(--psi-nav-tree-item-fg-current);font:var(--psi-text-14-20-medium)}._item_1ktoe_23 a[aria-current=page]:before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;border-radius:var(--psi-nav-tree-radius);background:var(--psi-nav-tree-indicator)}._item_1ktoe_23 a[aria-current=true]{color:var(--psi-nav-tree-item-fg-current);font:var(--psi-text-14-20-medium)}._groupButton_1ktoe_79{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:flex;align-items:center;justify-content:space-between;gap:var(--psi-space-8);box-sizing:border-box;width:100%;min-height:var(--psi-size-32);padding-block:var(--psi-space-4);padding-inline:var(--psi-space-12);border:0;border-radius:var(--psi-nav-tree-radius);background:none;color:var(--psi-nav-tree-group-fg);font:var(--psi-text-14-20-medium);text-align:start;cursor:pointer}._groupButton_1ktoe_79:hover{background:var(--psi-nav-tree-item-bg-hover)}._groupButton_1ktoe_79:focus-visible{outline:var(--psi-focus-ring-width) solid var(--psi-nav-tree-focus-ring);outline-offset:var(--psi-focus-ring-offset-inset)}._groupLabel_1ktoe_108{min-width:0}._chevron_1ktoe_112{flex:none;transition:transform var(--psi-duration-150) var(--psi-ease-standard)}._groupButton_1ktoe_79[aria-expanded=true] ._chevron_1ktoe_112{transform:rotate(180deg)}._groupList_1ktoe_12{padding-inline-start:var(--psi-space-12);margin-block-start:var(--psi-space-2)}._groupList_1ktoe_12[hidden]{display:none}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._appShell_i1tds_10{display:grid;grid-template-rows:auto 1fr;grid-template-columns:var(--psi-app-shell-sidebar-width) minmax(0,1fr);height:100dvh}._sidebarClosed_i1tds_18{grid-template-columns:minmax(0,1fr)}._header_i1tds_22{grid-row:1;grid-column:1 / -1;min-width:0}._sidebar_i1tds_18{grid-row:2;min-height:0;overflow:auto;padding:var(--psi-space-8);background:var(--psi-app-shell-sidebar-bg);color:var(--psi-app-shell-sidebar-fg)}._sidebar_i1tds_18[hidden]{display:none}._main_i1tds_45{grid-row:2;min-width:0;min-height:0;overflow:auto}._main_i1tds_45:focus-visible{outline:var(--psi-focus-ring-width) solid var(--psi-app-shell-focus-ring);outline-offset:var(--psi-focus-ring-offset-inset)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._frame_et4fc_1{overflow:hidden}._frame_et4fc_1>img,._frame_et4fc_1>video{width:100%;height:100%;object-fit:cover;display:block}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._field_x989o_1{display:grid;gap:var(--psi-field-gap);border:0;margin:0;padding:0;min-width:0}._label_x989o_10{font:var(--psi-text-14-20-medium);color:var(--psi-field-label-fg);padding:0;min-block-size:var(--psi-field-label-height)}._marker_x989o_19{color:var(--psi-field-marker-fg)}._requiredText_x989o_25{font:var(--psi-text-14-20-regular);color:var(--psi-field-required-text-fg)}._message_x989o_30{margin:0;font:var(--psi-text-12-16-regular);color:var(--psi-field-message-fg)}._invalid_x989o_36 ._message_x989o_30{color:var(--psi-field-error-fg)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._dialog_qg38y_2{padding:0;border:1px solid var(--psi-dialog-border);border-radius:var(--psi-dialog-radius);background:var(--psi-dialog-bg);color:var(--psi-dialog-fg);max-width:calc(100vw - var(--psi-space-32))}._dialog_qg38y_2::backdrop{background:var(--psi-dialog-backdrop)}._dialog_qg38y_2:focus-visible,._panel_qg38y_20:focus-visible{outline:var(--psi-focus-ring-width) solid var(--psi-dialog-focus-ring);outline-offset:var(--psi-focus-ring-offset-inset)}._dialog_qg38y_2[open]::backdrop{animation:_backdrop-enter_qg38y_1 var(--psi-duration-200) var(--psi-ease-soft)}@keyframes _backdrop-enter_qg38y_1{0%{opacity:0}}._center_qg38y_42[open]{animation:_dialog-enter_qg38y_1 var(--psi-duration-200) var(--psi-ease-soft)}@keyframes _dialog-enter_qg38y_1{0%{opacity:0;transform:scale(.97)}}._inlineStart_qg38y_50,._inlineEnd_qg38y_51{box-sizing:border-box;margin-block:0;height:100dvh;max-height:100dvh;max-width:100vw;border-radius:0}._inlineEnd_qg38y_51{margin-inline-start:auto;margin-inline-end:0;border-start-start-radius:var(--psi-dialog-radius);border-end-start-radius:var(--psi-dialog-radius)}._inlineStart_qg38y_50{margin-inline-start:0;margin-inline-end:auto;border-start-end-radius:var(--psi-dialog-radius);border-end-end-radius:var(--psi-dialog-radius)}._inlineEnd_qg38y_51[open]{animation:_drawer-enter-end_qg38y_1 var(--psi-duration-200) var(--psi-ease-soft)}._inlineStart_qg38y_50[open]{animation:_drawer-enter-start_qg38y_1 var(--psi-duration-200) var(--psi-ease-soft)}@keyframes _drawer-enter-end_qg38y_1{0%{transform:translate(100%)}}@keyframes _drawer-enter-start_qg38y_1{0%{transform:translate(-100%)}}._w400_qg38y_100{width:400px}._w560_qg38y_101{width:560px}._w720_qg38y_102{width:720px}._panel_qg38y_20{display:grid;gap:var(--psi-space-16);padding:var(--psi-space-24)}._inlineStart_qg38y_50 ._panel_qg38y_20,._inlineEnd_qg38y_51 ._panel_qg38y_20{height:100%;overflow-y:auto;align-content:start}._header_qg38y_124{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--psi-space-12)}._title_qg38y_131{margin:0;font:var(--psi-text-18-28-medium);color:var(--psi-dialog-title-fg)}._footer_qg38y_137{display:flex;justify-content:flex-end;gap:var(--psi-space-8)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._input_pmr7w_3{display:block;box-sizing:border-box;width:100%;border:1px solid var(--psi-input-border);border-radius:var(--psi-input-radius);background:var(--psi-input-bg);color:var(--psi-input-fg);font-family:var(--psi-font-sans);transition:border-color var(--psi-duration-150) var(--psi-ease-standard),outline var(--psi-duration-150) var(--psi-ease-standard)}._input_pmr7w_3::placeholder{color:var(--psi-input-placeholder)}._input_pmr7w_3:hover:not(:disabled):not(:focus-visible){border-color:var(--psi-input-border-hover)}._input_pmr7w_3:focus-visible{outline:var(--psi-focus-ring-width) solid var(--psi-input-focus-ring);outline-offset:var(--psi-focus-ring-offset-inset);border-color:transparent}._input_pmr7w_3:disabled{opacity:.4;cursor:not-allowed}._size24_pmr7w_43{height:var(--psi-input-24-height);padding-inline:var(--psi-input-24-padding-inline);font:var(--psi-input-24-font)}._size32_pmr7w_49{height:var(--psi-input-32-height);padding-inline:var(--psi-input-32-padding-inline);font:var(--psi-input-32-font)}._size40_pmr7w_55{height:var(--psi-input-40-height);padding-inline:var(--psi-input-40-padding-inline);font:var(--psi-input-40-font)}._size48_pmr7w_61{height:var(--psi-input-48-height);padding-inline:var(--psi-input-48-padding-inline);font:var(--psi-input-48-font)}._error_pmr7w_69{border-color:var(--psi-input-border-error)}._error_pmr7w_69:hover:not(:disabled):not(:focus-visible){border-color:var(--psi-input-border-error)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._select_1eqz1_3{display:block;width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--psi-select-border);border-radius:var(--psi-select-radius);background-color:var(--psi-select-bg);background-image:linear-gradient(45deg,transparent calc(50% - .75px),var(--psi-select-chevron-fg) calc(50% - .75px),var(--psi-select-chevron-fg) calc(50% + .75px),transparent calc(50% + .75px)),linear-gradient(135deg,transparent calc(50% - .75px),var(--psi-select-chevron-fg) calc(50% - .75px),var(--psi-select-chevron-fg) calc(50% + .75px),transparent calc(50% + .75px));background-size:4px 4px;background-repeat:no-repeat;color:var(--psi-select-fg);font-family:var(--psi-font-sans);cursor:pointer;transition:border-color var(--psi-duration-150) var(--psi-ease-standard),outline var(--psi-duration-150) var(--psi-ease-standard)}._select_1eqz1_3:hover:not(:disabled):not(:focus-visible){border-color:var(--psi-select-border-hover)}._select_1eqz1_3:focus-visible{outline:var(--psi-focus-ring-width) solid var(--psi-select-focus-ring);outline-offset:var(--psi-focus-ring-offset-inset);border-color:transparent}._select_1eqz1_3:disabled{opacity:.4;cursor:not-allowed}._size24_1eqz1_57{height:var(--psi-select-24-height);padding-inline-start:var(--psi-select-24-padding-inline);padding-inline-end:var(--psi-select-24-padding-inline-end);background-position:right calc(var(--psi-select-24-chevron-offset) + 6px) center,right calc(var(--psi-select-24-chevron-offset) + 2px) center;font:var(--psi-select-24-font)}._size32_1eqz1_67{height:var(--psi-select-32-height);padding-inline-start:var(--psi-select-32-padding-inline);padding-inline-end:var(--psi-select-32-padding-inline-end);background-position:right calc(var(--psi-select-32-chevron-offset) + 6px) center,right calc(var(--psi-select-32-chevron-offset) + 2px) center;font:var(--psi-select-32-font)}._size40_1eqz1_77{height:var(--psi-select-40-height);padding-inline-start:var(--psi-select-40-padding-inline);padding-inline-end:var(--psi-select-40-padding-inline-end);background-position:right calc(var(--psi-select-40-chevron-offset) + 6px) center,right calc(var(--psi-select-40-chevron-offset) + 2px) center;font:var(--psi-select-40-font)}._size48_1eqz1_87{height:var(--psi-select-48-height);padding-inline-start:var(--psi-select-48-padding-inline);padding-inline-end:var(--psi-select-48-padding-inline-end);background-position:right calc(var(--psi-select-48-chevron-offset) + 6px) center,right calc(var(--psi-select-48-chevron-offset) + 2px) center;font:var(--psi-select-48-font)}._error_1eqz1_99{border-color:var(--psi-select-border-error)}._error_1eqz1_99:hover:not(:disabled):not(:focus-visible){border-color:var(--psi-select-border-error)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._label_1jm35_3{display:inline-flex;align-items:center;gap:var(--psi-space-8);cursor:pointer;-webkit-user-select:none;user-select:none;font:var(--psi-text-14-20-regular);color:var(--psi-checkbox-fg)}._disabled_1jm35_13{opacity:.4;cursor:not-allowed}._indicator_1jm35_26{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;border:1px solid var(--psi-checkbox-box-border);border-radius:var(--psi-checkbox-box-radius);background:var(--psi-checkbox-box-bg);transition:background-color var(--psi-duration-150) var(--psi-ease-standard),border-color var(--psi-duration-150) var(--psi-ease-standard)}._input_1jm35_42:checked+._indicator_1jm35_26{background:var(--psi-checkbox-box-bg-checked);border-color:var(--psi-checkbox-box-border-checked)}._input_1jm35_42:checked+._indicator_1jm35_26:after{content:"";display:block;width:4px;height:8px;color:var(--psi-checkbox-check-fg);border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-.5px,-.5px)}._input_1jm35_42:focus-visible+._indicator_1jm35_26{outline:var(--psi-focus-ring-width) solid var(--psi-checkbox-focus-ring);outline-offset:var(--psi-focus-ring-offset)}._text_1jm35_67{color:var(--psi-checkbox-fg)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._label_yv464_3{display:inline-flex;align-items:center;gap:var(--psi-space-8);cursor:pointer;-webkit-user-select:none;user-select:none;font:var(--psi-text-14-20-regular);color:var(--psi-switch-fg)}._disabled_yv464_13{opacity:.4;cursor:not-allowed}._track_yv464_26{position:relative;display:inline-flex;align-items:center;width:36px;height:20px;flex-shrink:0;border-radius:var(--psi-radius-full);background:var(--psi-switch-track-bg);transition:background-color var(--psi-duration-150) var(--psi-ease-standard)}._input_yv464_38:checked+._track_yv464_26{background:var(--psi-switch-track-bg-checked)}._input_yv464_38:focus-visible+._track_yv464_26{outline:var(--psi-focus-ring-width) solid var(--psi-switch-focus-ring);outline-offset:var(--psi-focus-ring-offset)}._thumb_yv464_50{position:absolute;width:16px;height:16px;border-radius:var(--psi-radius-full);background:var(--psi-switch-thumb-bg);left:2px;transition:left var(--psi-duration-150) var(--psi-ease-standard);box-shadow:0 1px 2px #00000029}._input_yv464_38:checked+._track_yv464_26 ._thumb_yv464_50{left:18px}._text_yv464_67{color:var(--psi-switch-fg)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._tag_1r2xw_3{display:inline-flex;align-items:center;gap:var(--psi-space-4);height:24px;padding-inline:var(--psi-space-8);border-radius:var(--psi-radius-full);font:var(--psi-text-12-16-medium);white-space:nowrap;-webkit-user-select:none;user-select:none}._dismiss_1r2xw_17{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:none;color:inherit;cursor:pointer;opacity:.7;margin-inline-start:var(--psi-space-2);margin-inline-end:calc(-1 * var(--psi-space-4));border-radius:var(--psi-radius-full)}._dismiss_1r2xw_17:hover{opacity:1}._dismiss_1r2xw_17:focus-visible{outline:var(--psi-focus-ring-width) solid var(--psi-tag-focus-ring);outline-offset:var(--psi-focus-ring-offset)}._neutral_1r2xw_43{background:var(--psi-tag-neutral-bg);color:var(--psi-tag-neutral-fg)}._accent_1r2xw_48{background:var(--psi-tag-accent-bg);color:var(--psi-tag-accent-fg)}._success_1r2xw_53{background:var(--psi-tag-success-bg);color:var(--psi-tag-success-fg)}._warning_1r2xw_58{background:var(--psi-tag-warning-bg);color:var(--psi-tag-warning-fg)}._danger_1r2xw_63{background:var(--psi-tag-danger-bg);color:var(--psi-tag-danger-fg)}._neutralSubtle_1r2xw_70{background:var(--psi-tag-neutral-subtle-bg);color:var(--psi-tag-neutral-subtle-fg)}._accentSubtle_1r2xw_75{background:var(--psi-tag-accent-subtle-bg);color:var(--psi-tag-accent-subtle-fg)}._successSubtle_1r2xw_80{background:var(--psi-tag-success-subtle-bg);color:var(--psi-tag-success-subtle-fg)}._warningSubtle_1r2xw_85{background:var(--psi-tag-warning-subtle-bg);color:var(--psi-tag-warning-subtle-fg)}._dangerSubtle_1r2xw_90{background:var(--psi-tag-danger-subtle-bg);color:var(--psi-tag-danger-subtle-fg)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._wrapper_1eu6z_3{position:relative;display:inline-flex}._tooltip_1eu6z_10{position:absolute;z-index:var(--psi-z-tooltip);padding:var(--psi-space-4) var(--psi-space-8);border-radius:var(--psi-tooltip-radius);background:var(--psi-tooltip-bg);color:var(--psi-tooltip-fg);font:var(--psi-text-12-16-regular);white-space:nowrap;pointer-events:none}._top_1eu6z_24{bottom:100%;left:50%;transform:translate(-50%);margin-bottom:var(--psi-space-4)}._bottom_1eu6z_31{top:100%;left:50%;transform:translate(-50%);margin-top:var(--psi-space-4)}._left_1eu6z_38{right:100%;top:50%;transform:translateY(-50%);margin-right:var(--psi-space-4)}._right_1eu6z_45{left:100%;top:50%;transform:translateY(-50%);margin-left:var(--psi-space-4)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._toolbar_8bwkv_1{display:flex;flex-wrap:wrap;align-items:center}._gap8_8bwkv_7{gap:var(--psi-space-8)}._gap12_8bwkv_8{gap:var(--psi-space-12)}._gap16_8bwkv_9{gap:var(--psi-space-16)}._alignEnd_8bwkv_13{align-items:flex-end}._alignStart_8bwkv_19{align-items:flex-start}._alignStart_8bwkv_19>:is(button,a){margin-block-start:var(--psi-toolbar-action-offset)}._toolbar_8bwkv_1>input,._toolbar_8bwkv_1>select{width:var(--psi-toolbar-control-width)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._trigger_pivae_4{display:inline-flex;width:fit-content}._menu_pivae_16{min-width:180px;margin:var(--psi-space-4);padding:var(--psi-space-4);border:1px solid var(--psi-menu-border);border-radius:var(--psi-menu-radius);background:var(--psi-menu-bg);color:var(--psi-menu-fg);font:var(--psi-text-14-20-regular)}._menu_pivae_16:not([data-open]):not(:popover-open){display:none}._item_pivae_37{display:flex;width:100%;align-items:center;padding:var(--psi-space-8) var(--psi-space-12);border:0;border-radius:var(--psi-radius-6);background:var(--psi-menu-item-bg);color:var(--psi-menu-item-fg);font:inherit;text-align:start;cursor:pointer}._item_pivae_37:hover{background:var(--psi-menu-item-bg-hover)}._item_pivae_37:active{background:var(--psi-menu-item-bg-active)}._item_pivae_37:focus-visible{outline:var(--psi-focus-ring-width) solid var(--psi-menu-focus-ring);outline-offset:var(--psi-focus-ring-offset-inset)}._item_pivae_37[data-variant=danger]{color:var(--psi-menu-item-fg-danger)}._item_pivae_37[aria-disabled=true]{color:var(--psi-menu-item-fg-disabled);cursor:default}._item_pivae_37[aria-disabled=true]:hover{background:var(--psi-menu-item-bg)}._text_pivae_85{padding:var(--psi-space-8) var(--psi-space-12);color:var(--psi-menu-text-fg);cursor:default}._separator_pivae_93{height:0;margin:var(--psi-space-4) 0;border-top:1px solid var(--psi-menu-separator-border)}@supports (anchor-name: --x){._menu_pivae_16{position:fixed;margin:var(--psi-space-4);position-try-fallbacks:flip-block,flip-inline,flip-block flip-inline}._menu_pivae_16[data-placement=bottom-start]{position-area:block-end span-inline-end}._menu_pivae_16[data-placement=bottom-end]{position-area:block-end span-inline-start}._menu_pivae_16[data-placement=top-start]{position-area:block-start span-inline-end}._menu_pivae_16[data-placement=top-end]{position-area:block-start span-inline-start}}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._table_1maek_3{width:100%;border-collapse:collapse;background:var(--psi-table-bg);color:var(--psi-table-fg);font:var(--psi-text-14-20-regular);border:1px solid var(--psi-table-border);border-radius:var(--psi-table-radius)}._caption_1maek_19{caption-side:top;text-align:start;padding-block:var(--psi-space-8);color:var(--psi-table-fg);font:var(--psi-text-14-20-medium)}._captionDetail_1maek_27{display:block;color:var(--psi-table-header-fg);font:var(--psi-text-12-16-regular)}._caption_1maek_19:focus-visible{outline:var(--psi-focus-ring-width) solid var(--psi-table-focus-ring);outline-offset:var(--psi-focus-ring-offset-inset)}._headerCell_1maek_38{color:var(--psi-table-header-fg);font:var(--psi-text-14-20-medium);text-align:start}._cell_1maek_44,._headerCell_1maek_38{border-bottom:1px solid var(--psi-table-cell-border)}._rowHeader_1maek_51{font:var(--psi-text-14-20-medium);text-align:start}._cell_1maek_44[data-numeric],._headerCell_1maek_38[data-numeric]{text-align:end;font-variant-numeric:var(--psi-font-variant-numeric)}._sortButton_1maek_62{display:inline-flex;align-items:center;gap:var(--psi-space-4);padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}._sortButton_1maek_62:focus-visible{outline:var(--psi-focus-ring-width) solid var(--psi-table-focus-ring);outline-offset:var(--psi-focus-ring-offset)}._sortIndicator_1maek_79{color:var(--psi-table-sort-indicator-fg)}._table_1maek_3[data-size="32"] ._cell_1maek_44,._table_1maek_3[data-size="32"] ._headerCell_1maek_38{height:var(--psi-table-32-row-height);padding-inline:var(--psi-table-32-cell-padding-x)}._table_1maek_3[data-size="32"] ._caption_1maek_19{padding-inline:var(--psi-table-32-cell-padding-x)}._table_1maek_3[data-size="40"] ._cell_1maek_44,._table_1maek_3[data-size="40"] ._headerCell_1maek_38{height:var(--psi-table-40-row-height);padding-inline:var(--psi-table-40-cell-padding-x)}._table_1maek_3[data-size="40"] ._caption_1maek_19{padding-inline:var(--psi-table-40-cell-padding-x)}._table_1maek_3[data-size="48"] ._cell_1maek_44,._table_1maek_3[data-size="48"] ._headerCell_1maek_38{height:var(--psi-table-48-row-height);padding-inline:var(--psi-table-48-cell-padding-x)}._table_1maek_3[data-size="48"] ._caption_1maek_19{padding-inline:var(--psi-table-48-cell-padding-x)}._table_1maek_3[data-size] ._selectCell_1maek_123{width:1%;padding-inline-end:0}._body_1maek_130 ._row_1maek_51:hover{background:var(--psi-table-row-bg-hover)}._body_1maek_130 ._row_1maek_51[data-selected]:hover,._row_1maek_51[data-selected]{background:var(--psi-table-row-bg-selected)}._row_1maek_51{background:var(--psi-table-row-bg)}._sticky_1maek_155 ._headerCell_1maek_38{position:sticky;inset-block-start:0;z-index:var(--psi-z-sticky);background:var(--psi-table-bg);box-shadow:inset 0 -1px 0 var(--psi-table-cell-border)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._nav_166vs_6{display:flex;align-items:center;gap:var(--psi-space-4)}._ellipsis_166vs_12{padding-inline:var(--psi-space-4)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._nav_jbhk1_5{display:inline-flex;align-items:center;gap:var(--psi-space-8)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._toast_1gxg8_10{pointer-events:auto;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:var(--psi-space-12);min-width:280px;max-width:420px;padding:var(--psi-space-12) var(--psi-space-16);border:1px solid var(--psi-toast-border);border-radius:var(--psi-toast-radius);background:var(--psi-toast-bg);color:var(--psi-toast-fg);font:var(--psi-text-14-20-regular);animation:_toast-enter_1gxg8_1 var(--psi-duration-200) var(--psi-ease-soft)}@keyframes _toast-enter_1gxg8_1{0%{opacity:0;transform:translateY(8px)}}._icon_1gxg8_39{display:inline-flex;align-items:center}._iconNeutral_1gxg8_44{color:var(--psi-toast-icon-fg-neutral)}._iconSuccess_1gxg8_45{color:var(--psi-toast-icon-fg-success)}._iconWarning_1gxg8_46{color:var(--psi-toast-icon-fg-warning)}._iconDanger_1gxg8_47{color:var(--psi-toast-icon-fg-danger)}._body_1gxg8_51{min-width:0}._action_1gxg8_55{display:inline-flex}._region_1gxg8_61{position:fixed;inset:auto;margin:0;padding:var(--psi-space-16);border:0;background:none;overflow:visible;pointer-events:none;display:flex;flex-direction:column;gap:var(--psi-space-8);width:max-content;max-width:100%}._region_1gxg8_61[data-placement=top-start]{top:0;left:0;align-items:flex-start}._region_1gxg8_61[data-placement=top-end]{top:0;right:0;align-items:flex-end}._region_1gxg8_61[data-placement=bottom-start]{bottom:0;left:0;align-items:flex-start}._region_1gxg8_61[data-placement=bottom-end]{bottom:0;right:0;align-items:flex-end}._region_1gxg8_61[data-placement^=bottom] ._live_1gxg8_91{flex-direction:column-reverse}._live_1gxg8_91{display:flex;flex-direction:column;gap:var(--psi-space-8)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._banner_15y1f_7{display:grid;grid-template-columns:auto 1fr auto auto;align-items:start;gap:var(--psi-space-12);width:100%;box-sizing:border-box;padding:var(--psi-space-12) var(--psi-space-16);color:var(--psi-banner-fg);font:var(--psi-text-14-20-regular)}._banner_15y1f_7[data-variant=neutral]{background:var(--psi-banner-bg-neutral)}._banner_15y1f_7[data-variant=success]{background:var(--psi-banner-bg-success)}._banner_15y1f_7[data-variant=warning]{background:var(--psi-banner-bg-warning)}._banner_15y1f_7[data-variant=danger]{background:var(--psi-banner-bg-danger)}._icon_15y1f_26{display:inline-flex;align-items:center}._iconNeutral_15y1f_31{color:var(--psi-banner-icon-fg-neutral)}._iconSuccess_15y1f_32{color:var(--psi-banner-icon-fg-success)}._iconWarning_15y1f_33{color:var(--psi-banner-icon-fg-warning)}._iconDanger_15y1f_34{color:var(--psi-banner-icon-fg-danger)}._body_15y1f_36{min-width:0}._body_15y1f_36>p{margin-block:0}._body_15y1f_36>p+p{margin-block-start:var(--psi-space-8)}._title_15y1f_50{display:block;font:var(--psi-text-14-20-medium)}._action_15y1f_55{display:inline-flex}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._inlineAlert_16390_7{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:var(--psi-space-12);box-sizing:border-box;padding:var(--psi-space-12) var(--psi-space-16);border-radius:var(--psi-inline-alert-radius);color:var(--psi-inline-alert-fg);font:var(--psi-text-14-20-regular)}._inlineAlert_16390_7[data-variant=neutral]{background:var(--psi-inline-alert-bg-neutral);border:1px solid var(--psi-inline-alert-border-neutral)}._inlineAlert_16390_7[data-variant=success]{background:var(--psi-inline-alert-bg-success);border:1px solid var(--psi-inline-alert-border-success)}._inlineAlert_16390_7[data-variant=warning]{background:var(--psi-inline-alert-bg-warning);border:1px solid var(--psi-inline-alert-border-warning)}._inlineAlert_16390_7[data-variant=danger]{background:var(--psi-inline-alert-bg-danger);border:1px solid var(--psi-inline-alert-border-danger)}._icon_16390_38{display:inline-flex;align-items:center}._iconNeutral_16390_43{color:var(--psi-inline-alert-icon-fg-neutral)}._iconSuccess_16390_44{color:var(--psi-inline-alert-icon-fg-success)}._iconWarning_16390_45{color:var(--psi-inline-alert-icon-fg-warning)}._iconDanger_16390_46{color:var(--psi-inline-alert-icon-fg-danger)}._body_16390_48{min-width:0}._body_16390_48>p{margin-block:0}._body_16390_48>p+p{margin-block-start:var(--psi-space-8)}._title_16390_62{display:block;font:var(--psi-text-14-20-medium)}._action_16390_67{display:inline-flex}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{@keyframes _skeleton-pulse_1yo7t_1{0%{opacity:1}to{opacity:.45}}._skeleton_1yo7t_12{width:100%;box-sizing:border-box;animation:_skeleton-pulse_1yo7t_1 var(--psi-duration-600) var(--psi-ease-in-out) infinite alternate}._skeleton_1yo7t_12[data-variant=block]{border-radius:var(--psi-skeleton-radius);background:var(--psi-skeleton-bg)}._skeleton_1yo7t_12[data-size="24"]{height:var(--psi-size-24)}._skeleton_1yo7t_12[data-size="32"]{height:var(--psi-size-32)}._skeleton_1yo7t_12[data-size="40"]{height:var(--psi-size-40)}._skeleton_1yo7t_12[data-size="48"]{height:var(--psi-size-48)}._line_1yo7t_28{display:block;padding-block:var(--psi-space-6);margin-block:var(--psi-space-4);border-radius:var(--psi-skeleton-radius);background:var(--psi-skeleton-bg)}._line_1yo7t_28:last-child:not(:first-child){width:60%}@media(prefers-reduced-motion:reduce){._skeleton_1yo7t_12{animation:none}}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._tabs_1x9om_8{display:flex;flex-direction:column;gap:var(--psi-space-16)}._tabs_1x9om_8[data-orientation=vertical]{flex-direction:row;gap:var(--psi-space-24)}._list_1x9om_21{display:flex;flex-wrap:wrap;gap:var(--psi-space-4);border-bottom:1px solid var(--psi-tabs-list-border)}._tabs_1x9om_8[data-orientation=vertical] ._list_1x9om_21{flex-direction:column;flex-wrap:nowrap;border-bottom:none;border-inline-start:1px solid var(--psi-tabs-list-border)}._tab_1x9om_8{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:none;cursor:pointer;height:var(--psi-tabs-40-height);padding-inline:var(--psi-tabs-40-padding-x);font:var(--psi-text-14-20-medium);color:var(--psi-tabs-fg);transition:color var(--psi-duration-150) var(--psi-ease-standard)}._tab_1x9om_8:hover:not([aria-disabled=true]){background:var(--psi-tabs-bg-hover)}._tab_1x9om_8:focus-visible{outline:var(--psi-focus-ring-width) solid var(--psi-tabs-focus-ring);outline-offset:var(--psi-focus-ring-offset-inset)}._tab_1x9om_8[aria-disabled=true]{color:var(--psi-tabs-fg-disabled);cursor:default}._tab_1x9om_8[aria-selected=true]{color:var(--psi-tabs-fg-selected)}._tab_1x9om_8[aria-selected=true]:after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:2px;background:var(--psi-tabs-indicator)}._tabs_1x9om_8[data-orientation=vertical] ._tab_1x9om_8{text-align:start}._tabs_1x9om_8[data-orientation=vertical] ._tab_1x9om_8[aria-selected=true]:after{inset-inline:auto;inset-block:0;inset-inline-start:-1px;width:2px;height:auto}._panel_1x9om_99{min-width:0}._panel_1x9om_99:focus-visible{outline:var(--psi-focus-ring-width) solid var(--psi-tabs-focus-ring);outline-offset:var(--psi-focus-ring-offset)}}
1
+ @layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._button_1rxq8_3{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--psi-button-radius);cursor:pointer;font-family:var(--psi-font-sans);white-space:nowrap;text-decoration:none;-webkit-user-select:none;user-select:none;transition:background-color var(--psi-duration-150) var(--psi-ease-standard),color var(--psi-duration-150) var(--psi-ease-standard)}._button_1rxq8_3:focus-visible{outline:var(--psi-focus-ring-width) solid var(--psi-button-focus-ring);outline-offset:var(--psi-focus-ring-offset)}._button_1rxq8_3:disabled{opacity:.4;cursor:not-allowed}._button_1rxq8_3>span{max-inline-size:var(--psi-button-label-max-width);overflow:hidden;text-overflow:ellipsis;flex:none}._button_1rxq8_3._disabled_1rxq8_45{opacity:.4;cursor:not-allowed;pointer-events:none}._size24_1rxq8_70{height:var(--psi-button-24-height);padding-inline:var(--psi-button-24-padding-inline);gap:var(--psi-button-24-gap);font:var(--psi-button-font, var(--psi-button-24-font))}._size24_1rxq8_70:has(>svg:first-child){padding-inline-start:var(--psi-button-24-padding-inline-icon)}._size24_1rxq8_70:has(>svg:last-child:not(:first-child)){padding-inline-end:var(--psi-button-24-padding-inline-icon)}._size24_1rxq8_70>svg{inline-size:var(--psi-button-24-icon-size);block-size:var(--psi-button-24-icon-size);flex:none}._size32_1rxq8_88{height:var(--psi-button-32-height);padding-inline:var(--psi-button-32-padding-inline);gap:var(--psi-button-32-gap);font:var(--psi-button-font, var(--psi-button-32-font))}._size32_1rxq8_88:has(>svg:first-child){padding-inline-start:var(--psi-button-32-padding-inline-icon)}._size32_1rxq8_88:has(>svg:last-child:not(:first-child)){padding-inline-end:var(--psi-button-32-padding-inline-icon)}._size32_1rxq8_88>svg{inline-size:var(--psi-button-32-icon-size);block-size:var(--psi-button-32-icon-size);flex:none}._size40_1rxq8_106{height:var(--psi-button-40-height);padding-inline:var(--psi-button-40-padding-inline);gap:var(--psi-button-40-gap);font:var(--psi-button-font, var(--psi-button-40-font))}._size40_1rxq8_106:has(>svg:first-child){padding-inline-start:var(--psi-button-40-padding-inline-icon)}._size40_1rxq8_106:has(>svg:last-child:not(:first-child)){padding-inline-end:var(--psi-button-40-padding-inline-icon)}._size40_1rxq8_106>svg{inline-size:var(--psi-button-40-icon-size);block-size:var(--psi-button-40-icon-size);flex:none}._size48_1rxq8_124{height:var(--psi-button-48-height);padding-inline:var(--psi-button-48-padding-inline);gap:var(--psi-button-48-gap);font:var(--psi-button-font, var(--psi-button-48-font))}._size48_1rxq8_124:has(>svg:first-child){padding-inline-start:var(--psi-button-48-padding-inline-icon)}._size48_1rxq8_124:has(>svg:last-child:not(:first-child)){padding-inline-end:var(--psi-button-48-padding-inline-icon)}._size48_1rxq8_124>svg{inline-size:var(--psi-button-48-icon-size);block-size:var(--psi-button-48-icon-size);flex:none}._accent_1rxq8_145{background:var(--psi-button-accent-bg);color:var(--psi-button-accent-fg)}._accent_1rxq8_145:hover:not(:disabled):not(._disabled_1rxq8_45){background:var(--psi-button-accent-bg-hover)}._accent_1rxq8_145:active:not(:disabled):not(._disabled_1rxq8_45){background:var(--psi-button-accent-bg-active)}._accentSubtle_1rxq8_157{background:var(--psi-button-accent-subtle-bg);color:var(--psi-button-accent-subtle-fg)}._accentSubtle_1rxq8_157:hover:not(:disabled):not(._disabled_1rxq8_45){background:var(--psi-button-accent-subtle-bg-hover)}._accentSubtle_1rxq8_157:active:not(:disabled):not(._disabled_1rxq8_45){background:var(--psi-button-accent-subtle-bg-active)}._neutral_1rxq8_169{background:var(--psi-button-neutral-bg);color:var(--psi-button-neutral-fg)}._neutral_1rxq8_169:hover:not(:disabled):not(._disabled_1rxq8_45){background:var(--psi-button-neutral-bg-hover)}._neutral_1rxq8_169:active:not(:disabled):not(._disabled_1rxq8_45){background:var(--psi-button-neutral-bg-active)}._neutralSubtle_1rxq8_181{background:var(--psi-button-neutral-subtle-bg);color:var(--psi-button-neutral-subtle-fg)}._neutralSubtle_1rxq8_181:hover:not(:disabled):not(._disabled_1rxq8_45){background:var(--psi-button-neutral-subtle-bg-hover)}._neutralSubtle_1rxq8_181:active:not(:disabled):not(._disabled_1rxq8_45){background:var(--psi-button-neutral-subtle-bg-active)}._ghost_1rxq8_193{background:var(--psi-button-ghost-bg);color:var(--psi-button-ghost-fg)}._ghost_1rxq8_193:hover:not(:disabled):not(._disabled_1rxq8_45){background:var(--psi-button-ghost-bg-hover)}._ghost_1rxq8_193:active:not(:disabled):not(._disabled_1rxq8_45){background:var(--psi-button-ghost-bg-active)}._danger_1rxq8_205{background:var(--psi-button-danger-bg);color:var(--psi-button-danger-fg)}._danger_1rxq8_205:hover:not(:disabled):not(._disabled_1rxq8_45){background:var(--psi-button-danger-bg-hover)}._danger_1rxq8_205:active:not(:disabled):not(._disabled_1rxq8_45){background:var(--psi-button-danger-bg-active)}._dangerSubtle_1rxq8_217{background:var(--psi-button-danger-subtle-bg);color:var(--psi-button-danger-subtle-fg)}._dangerSubtle_1rxq8_217:hover:not(:disabled):not(._disabled_1rxq8_45){background:var(--psi-button-danger-subtle-bg-hover)}._dangerSubtle_1rxq8_217:active:not(:disabled):not(._disabled_1rxq8_45){background:var(--psi-button-danger-subtle-bg-active)}._outline_1rxq8_229{background:var(--psi-button-outline-bg);color:var(--psi-button-outline-fg);border:1px solid var(--psi-button-outline-border)}._outline_1rxq8_229:hover:not(:disabled):not(._disabled_1rxq8_45){background:var(--psi-button-outline-bg-hover);color:var(--psi-button-outline-fg-hover);border-color:transparent}._outline_1rxq8_229:active:not(:disabled):not(._disabled_1rxq8_45){background:var(--psi-button-outline-bg-active)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._iconButton_1q4hx_3{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--psi-button-radius);cursor:pointer;padding:0;text-decoration:none;-webkit-user-select:none;user-select:none;transition:background-color var(--psi-duration-150) var(--psi-ease-standard),color var(--psi-duration-150) var(--psi-ease-standard)}._iconButton_1q4hx_3:focus-visible{outline:var(--psi-focus-ring-width) solid var(--psi-button-focus-ring);outline-offset:var(--psi-focus-ring-offset)}._iconButton_1q4hx_3:disabled{opacity:.4;cursor:not-allowed}._iconButton_1q4hx_3._disabled_1q4hx_29{opacity:.4;cursor:not-allowed;pointer-events:none}._size24_1q4hx_37{width:var(--psi-button-24-height);height:var(--psi-button-24-height)}._size32_1q4hx_42{width:var(--psi-button-32-height);height:var(--psi-button-32-height)}._size40_1q4hx_47{width:var(--psi-button-40-height);height:var(--psi-button-40-height)}._size48_1q4hx_52{width:var(--psi-button-48-height);height:var(--psi-button-48-height)}._accent_1q4hx_60{background:var(--psi-button-accent-bg);color:var(--psi-button-accent-fg)}._accent_1q4hx_60:hover:not(:disabled):not(._disabled_1q4hx_29){background:var(--psi-button-accent-bg-hover)}._accent_1q4hx_60:active:not(:disabled):not(._disabled_1q4hx_29){background:var(--psi-button-accent-bg-active)}._neutral_1q4hx_72{background:var(--psi-button-neutral-bg);color:var(--psi-button-neutral-fg)}._neutral_1q4hx_72:hover:not(:disabled):not(._disabled_1q4hx_29){background:var(--psi-button-neutral-bg-hover)}._neutral_1q4hx_72:active:not(:disabled):not(._disabled_1q4hx_29){background:var(--psi-button-neutral-bg-active)}._ghost_1q4hx_84{background:var(--psi-button-ghost-bg);color:var(--psi-button-ghost-fg)}._ghost_1q4hx_84:hover:not(:disabled):not(._disabled_1q4hx_29){background:var(--psi-button-ghost-bg-hover)}._ghost_1q4hx_84:active:not(:disabled):not(._disabled_1q4hx_29){background:var(--psi-button-ghost-bg-active)}._danger_1q4hx_96{background:var(--psi-button-danger-bg);color:var(--psi-button-danger-fg)}._danger_1q4hx_96:hover:not(:disabled):not(._disabled_1q4hx_29){background:var(--psi-button-danger-bg-hover)}._danger_1q4hx_96:active:not(:disabled):not(._disabled_1q4hx_29){background:var(--psi-button-danger-bg-active)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._card_1btb3_1{background:var(--psi-card-bg);border:1px solid var(--psi-card-border);border-radius:var(--psi-card-radius);overflow:hidden}._stacked_1btb3_8{display:flex;flex-direction:column;gap:var(--psi-card-gap)}._featured_1btb3_10{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--psi-card-gap);align-items:start}@media(max-width:960px){._featured_1btb3_10{grid-template-columns:1fr}}._media_1btb3_22{min-width:0}._body_1btb3_23{min-width:0;display:flex;flex-direction:column;gap:var(--psi-card-gap);padding:var(--psi-card-gap)}._hoverLift_1btb3_31{transition:transform var(--psi-duration-350) var(--psi-ease-standard)}._hoverLift_1btb3_31:hover{transform:translateY(-6px)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._panel_jn8w4_1{background:var(--psi-panel-bg);border:1px solid var(--psi-panel-border);border-radius:var(--psi-panel-radius);padding:var(--psi-panel-padding)}._padding16_jn8w4_8{padding:var(--psi-space-16)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._list_1lh3q_8{display:flex;flex-direction:column;gap:var(--psi-space-12);margin:var(--psi-space-0)}._list_1lh3q_8[data-gap="8"]{gap:var(--psi-space-8)}._list_1lh3q_8[data-gap="16"]{gap:var(--psi-space-16)}._item_1lh3q_26{display:flex;flex-direction:column;gap:var(--psi-space-4);min-width:0}._list_1lh3q_8[data-layout=inline] ._item_1lh3q_26{display:grid;grid-template-columns:auto 1fr;column-gap:var(--psi-space-16);row-gap:var(--psi-space-0);align-items:start}._term_1lh3q_44{color:var(--psi-description-list-term-fg);font:var(--psi-text-14-20-medium);min-width:0}._value_1lh3q_50{color:var(--psi-description-list-value-fg);font:var(--psi-text-14-20-regular);margin:var(--psi-space-0);min-width:0;overflow-wrap:anywhere}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._navbar_1w24e_1{font:var(--psi-text-14-20-medium);position:sticky;top:0;z-index:var(--psi-z-nav);background:var(--psi-navbar-bg);backdrop-filter:blur(var(--psi-navbar-blur));-webkit-backdrop-filter:blur(var(--psi-navbar-blur));border-bottom:1px solid var(--psi-navbar-border)}._inner_1w24e_12{display:flex;align-items:center;gap:var(--psi-space-24);height:var(--psi-navbar-height)}._fluid_1w24e_20{padding-inline:var(--psi-navbar-gutter)}._brand_1w24e_22{display:flex;align-items:center}._links_1w24e_23{display:flex;align-items:center;gap:var(--psi-space-20);margin-inline-start:auto}._links_1w24e_23 a,._brand_1w24e_22 a{text-decoration:none;transition:color var(--psi-duration-150) var(--psi-ease-soft)}._links_1w24e_23 a{color:var(--psi-navbar-link-fg)}._links_1w24e_23 a:hover,._brand_1w24e_22 a{color:var(--psi-navbar-link-fg-hover)}._links_1w24e_23 a:focus-visible,._brand_1w24e_22 a:focus-visible{outline:var(--psi-focus-ring-width) solid var(--psi-navbar-focus-ring);outline-offset:var(--psi-focus-ring-offset)}._actions_1w24e_53{display:flex;align-items:center;gap:var(--psi-space-8)}._brand_1w24e_22+._actions_1w24e_53,._actions_1w24e_53:first-child{margin-inline-start:auto}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._skipLink_1fn0y_4{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}._skipLink_1fn0y_4:focus-visible{position:fixed;inset-block-start:0;inset-inline-start:0;margin:var(--psi-space-8);z-index:var(--psi-z-overlay);display:inline-flex;align-items:center;box-sizing:border-box;width:auto;height:var(--psi-size-32);padding-inline:var(--psi-space-12);overflow:visible;clip:auto;clip-path:none;background:var(--psi-skip-link-bg);color:var(--psi-skip-link-fg);border:1px solid var(--psi-skip-link-border);border-radius:var(--psi-skip-link-radius);font:var(--psi-text-14-20-medium);text-decoration:none;outline:var(--psi-focus-ring-width) solid var(--psi-skip-link-focus-ring);outline-offset:var(--psi-focus-ring-offset)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._navTree_1ktoe_7{display:block}._list_1ktoe_11,._groupList_1ktoe_12{display:flex;flex-direction:column;gap:var(--psi-space-2);margin:0;padding:0;list-style:none}._item_1ktoe_23 a{position:relative;display:flex;align-items:center;box-sizing:border-box;min-height:var(--psi-size-32);padding-block:var(--psi-space-4);padding-inline:var(--psi-space-12);border-radius:var(--psi-nav-tree-radius);color:var(--psi-nav-tree-item-fg);font:var(--psi-text-14-20-regular);text-decoration:none}._item_1ktoe_23 a:hover{background:var(--psi-nav-tree-item-bg-hover)}._item_1ktoe_23 a:focus-visible{outline:var(--psi-focus-ring-width) solid var(--psi-nav-tree-focus-ring);outline-offset:var(--psi-focus-ring-offset-inset)}._item_1ktoe_23 a[aria-current=page]{background:var(--psi-nav-tree-item-bg-current);color:var(--psi-nav-tree-item-fg-current);font:var(--psi-text-14-20-medium)}._item_1ktoe_23 a[aria-current=page]:before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;border-radius:var(--psi-nav-tree-radius);background:var(--psi-nav-tree-indicator)}._item_1ktoe_23 a[aria-current=true]{color:var(--psi-nav-tree-item-fg-current);font:var(--psi-text-14-20-medium)}._groupButton_1ktoe_79{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:flex;align-items:center;justify-content:space-between;gap:var(--psi-space-8);box-sizing:border-box;width:100%;min-height:var(--psi-size-32);padding-block:var(--psi-space-4);padding-inline:var(--psi-space-12);border:0;border-radius:var(--psi-nav-tree-radius);background:none;color:var(--psi-nav-tree-group-fg);font:var(--psi-text-14-20-medium);text-align:start;cursor:pointer}._groupButton_1ktoe_79:hover{background:var(--psi-nav-tree-item-bg-hover)}._groupButton_1ktoe_79:focus-visible{outline:var(--psi-focus-ring-width) solid var(--psi-nav-tree-focus-ring);outline-offset:var(--psi-focus-ring-offset-inset)}._groupLabel_1ktoe_108{min-width:0}._chevron_1ktoe_112{flex:none;transition:transform var(--psi-duration-150) var(--psi-ease-standard)}._groupButton_1ktoe_79[aria-expanded=true] ._chevron_1ktoe_112{transform:rotate(180deg)}._groupList_1ktoe_12{padding-inline-start:var(--psi-space-12);margin-block-start:var(--psi-space-2)}._groupList_1ktoe_12[hidden]{display:none}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._appShell_i1tds_10{display:grid;grid-template-rows:auto 1fr;grid-template-columns:var(--psi-app-shell-sidebar-width) minmax(0,1fr);height:100dvh}._sidebarClosed_i1tds_18{grid-template-columns:minmax(0,1fr)}._header_i1tds_22{grid-row:1;grid-column:1 / -1;min-width:0}._sidebar_i1tds_18{grid-row:2;min-height:0;overflow:auto;padding:var(--psi-space-8);background:var(--psi-app-shell-sidebar-bg);color:var(--psi-app-shell-sidebar-fg)}._sidebar_i1tds_18[hidden]{display:none}._main_i1tds_45{grid-row:2;min-width:0;min-height:0;overflow:auto}._main_i1tds_45:focus-visible{outline:var(--psi-focus-ring-width) solid var(--psi-app-shell-focus-ring);outline-offset:var(--psi-focus-ring-offset-inset)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._frame_et4fc_1{overflow:hidden}._frame_et4fc_1>img,._frame_et4fc_1>video{width:100%;height:100%;object-fit:cover;display:block}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._field_x989o_1{display:grid;gap:var(--psi-field-gap);border:0;margin:0;padding:0;min-width:0}._label_x989o_10{font:var(--psi-text-14-20-medium);color:var(--psi-field-label-fg);padding:0;min-block-size:var(--psi-field-label-height)}._marker_x989o_19{color:var(--psi-field-marker-fg)}._requiredText_x989o_25{font:var(--psi-text-14-20-regular);color:var(--psi-field-required-text-fg)}._message_x989o_30{margin:0;font:var(--psi-text-12-16-regular);color:var(--psi-field-message-fg)}._invalid_x989o_36 ._message_x989o_30{color:var(--psi-field-error-fg)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._dialog_qg38y_2{padding:0;border:1px solid var(--psi-dialog-border);border-radius:var(--psi-dialog-radius);background:var(--psi-dialog-bg);color:var(--psi-dialog-fg);max-width:calc(100vw - var(--psi-space-32))}._dialog_qg38y_2::backdrop{background:var(--psi-dialog-backdrop)}._dialog_qg38y_2:focus-visible,._panel_qg38y_20:focus-visible{outline:var(--psi-focus-ring-width) solid var(--psi-dialog-focus-ring);outline-offset:var(--psi-focus-ring-offset-inset)}._dialog_qg38y_2[open]::backdrop{animation:_backdrop-enter_qg38y_1 var(--psi-duration-200) var(--psi-ease-soft)}@keyframes _backdrop-enter_qg38y_1{0%{opacity:0}}._center_qg38y_42[open]{animation:_dialog-enter_qg38y_1 var(--psi-duration-200) var(--psi-ease-soft)}@keyframes _dialog-enter_qg38y_1{0%{opacity:0;transform:scale(.97)}}._inlineStart_qg38y_50,._inlineEnd_qg38y_51{box-sizing:border-box;margin-block:0;height:100dvh;max-height:100dvh;max-width:100vw;border-radius:0}._inlineEnd_qg38y_51{margin-inline-start:auto;margin-inline-end:0;border-start-start-radius:var(--psi-dialog-radius);border-end-start-radius:var(--psi-dialog-radius)}._inlineStart_qg38y_50{margin-inline-start:0;margin-inline-end:auto;border-start-end-radius:var(--psi-dialog-radius);border-end-end-radius:var(--psi-dialog-radius)}._inlineEnd_qg38y_51[open]{animation:_drawer-enter-end_qg38y_1 var(--psi-duration-200) var(--psi-ease-soft)}._inlineStart_qg38y_50[open]{animation:_drawer-enter-start_qg38y_1 var(--psi-duration-200) var(--psi-ease-soft)}@keyframes _drawer-enter-end_qg38y_1{0%{transform:translate(100%)}}@keyframes _drawer-enter-start_qg38y_1{0%{transform:translate(-100%)}}._w400_qg38y_100{width:400px}._w560_qg38y_101{width:560px}._w720_qg38y_102{width:720px}._panel_qg38y_20{display:grid;gap:var(--psi-space-16);padding:var(--psi-space-24)}._inlineStart_qg38y_50 ._panel_qg38y_20,._inlineEnd_qg38y_51 ._panel_qg38y_20{height:100%;overflow-y:auto;align-content:start}._header_qg38y_124{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--psi-space-12)}._title_qg38y_131{margin:0;font:var(--psi-text-18-28-medium);color:var(--psi-dialog-title-fg)}._footer_qg38y_137{display:flex;justify-content:flex-end;gap:var(--psi-space-8)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._input_pmr7w_3{display:block;box-sizing:border-box;width:100%;border:1px solid var(--psi-input-border);border-radius:var(--psi-input-radius);background:var(--psi-input-bg);color:var(--psi-input-fg);font-family:var(--psi-font-sans);transition:border-color var(--psi-duration-150) var(--psi-ease-standard),outline var(--psi-duration-150) var(--psi-ease-standard)}._input_pmr7w_3::placeholder{color:var(--psi-input-placeholder)}._input_pmr7w_3:hover:not(:disabled):not(:focus-visible){border-color:var(--psi-input-border-hover)}._input_pmr7w_3:focus-visible{outline:var(--psi-focus-ring-width) solid var(--psi-input-focus-ring);outline-offset:var(--psi-focus-ring-offset-inset);border-color:transparent}._input_pmr7w_3:disabled{opacity:.4;cursor:not-allowed}._size24_pmr7w_43{height:var(--psi-input-24-height);padding-inline:var(--psi-input-24-padding-inline);font:var(--psi-input-24-font)}._size32_pmr7w_49{height:var(--psi-input-32-height);padding-inline:var(--psi-input-32-padding-inline);font:var(--psi-input-32-font)}._size40_pmr7w_55{height:var(--psi-input-40-height);padding-inline:var(--psi-input-40-padding-inline);font:var(--psi-input-40-font)}._size48_pmr7w_61{height:var(--psi-input-48-height);padding-inline:var(--psi-input-48-padding-inline);font:var(--psi-input-48-font)}._error_pmr7w_69{border-color:var(--psi-input-border-error)}._error_pmr7w_69:hover:not(:disabled):not(:focus-visible){border-color:var(--psi-input-border-error)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._select_1eqz1_3{display:block;width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--psi-select-border);border-radius:var(--psi-select-radius);background-color:var(--psi-select-bg);background-image:linear-gradient(45deg,transparent calc(50% - .75px),var(--psi-select-chevron-fg) calc(50% - .75px),var(--psi-select-chevron-fg) calc(50% + .75px),transparent calc(50% + .75px)),linear-gradient(135deg,transparent calc(50% - .75px),var(--psi-select-chevron-fg) calc(50% - .75px),var(--psi-select-chevron-fg) calc(50% + .75px),transparent calc(50% + .75px));background-size:4px 4px;background-repeat:no-repeat;color:var(--psi-select-fg);font-family:var(--psi-font-sans);cursor:pointer;transition:border-color var(--psi-duration-150) var(--psi-ease-standard),outline var(--psi-duration-150) var(--psi-ease-standard)}._select_1eqz1_3:hover:not(:disabled):not(:focus-visible){border-color:var(--psi-select-border-hover)}._select_1eqz1_3:focus-visible{outline:var(--psi-focus-ring-width) solid var(--psi-select-focus-ring);outline-offset:var(--psi-focus-ring-offset-inset);border-color:transparent}._select_1eqz1_3:disabled{opacity:.4;cursor:not-allowed}._size24_1eqz1_57{height:var(--psi-select-24-height);padding-inline-start:var(--psi-select-24-padding-inline);padding-inline-end:var(--psi-select-24-padding-inline-end);background-position:right calc(var(--psi-select-24-chevron-offset) + 6px) center,right calc(var(--psi-select-24-chevron-offset) + 2px) center;font:var(--psi-select-24-font)}._size32_1eqz1_67{height:var(--psi-select-32-height);padding-inline-start:var(--psi-select-32-padding-inline);padding-inline-end:var(--psi-select-32-padding-inline-end);background-position:right calc(var(--psi-select-32-chevron-offset) + 6px) center,right calc(var(--psi-select-32-chevron-offset) + 2px) center;font:var(--psi-select-32-font)}._size40_1eqz1_77{height:var(--psi-select-40-height);padding-inline-start:var(--psi-select-40-padding-inline);padding-inline-end:var(--psi-select-40-padding-inline-end);background-position:right calc(var(--psi-select-40-chevron-offset) + 6px) center,right calc(var(--psi-select-40-chevron-offset) + 2px) center;font:var(--psi-select-40-font)}._size48_1eqz1_87{height:var(--psi-select-48-height);padding-inline-start:var(--psi-select-48-padding-inline);padding-inline-end:var(--psi-select-48-padding-inline-end);background-position:right calc(var(--psi-select-48-chevron-offset) + 6px) center,right calc(var(--psi-select-48-chevron-offset) + 2px) center;font:var(--psi-select-48-font)}._error_1eqz1_99{border-color:var(--psi-select-border-error)}._error_1eqz1_99:hover:not(:disabled):not(:focus-visible){border-color:var(--psi-select-border-error)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._label_10kne_3{display:inline-flex;align-items:center;gap:var(--psi-space-8);cursor:pointer;-webkit-user-select:none;user-select:none;font:var(--psi-text-14-20-regular);color:var(--psi-checkbox-fg)}._disabled_10kne_13{opacity:.4;cursor:not-allowed}._indicator_10kne_26{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;border:1px solid var(--psi-checkbox-box-border);border-radius:var(--psi-checkbox-box-radius);background:var(--psi-checkbox-box-bg);transition:background-color var(--psi-duration-150) var(--psi-ease-standard),border-color var(--psi-duration-150) var(--psi-ease-standard)}._input_10kne_42:checked+._indicator_10kne_26{background:var(--psi-checkbox-box-bg-checked);border-color:var(--psi-checkbox-box-border-checked)}._input_10kne_42:checked+._indicator_10kne_26:after{content:"";display:block;width:4px;height:8px;color:var(--psi-checkbox-check-fg);border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-.5px,-.5px)}._input_10kne_42:indeterminate+._indicator_10kne_26{background:var(--psi-checkbox-box-bg-checked);border-color:var(--psi-checkbox-box-border-checked)}._input_10kne_42:indeterminate+._indicator_10kne_26:after{content:"";display:block;width:8px;height:2px;border:0;border-radius:1px;color:var(--psi-checkbox-check-fg);background:currentColor;transform:none}._input_10kne_42[aria-invalid=true]:not(:checked):not(:indeterminate)+._indicator_10kne_26{border-color:var(--psi-checkbox-box-border-error)}._input_10kne_42:focus-visible+._indicator_10kne_26{outline:var(--psi-focus-ring-width) solid var(--psi-checkbox-focus-ring);outline-offset:var(--psi-focus-ring-offset)}._text_10kne_97{color:var(--psi-checkbox-fg)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._label_yv464_3{display:inline-flex;align-items:center;gap:var(--psi-space-8);cursor:pointer;-webkit-user-select:none;user-select:none;font:var(--psi-text-14-20-regular);color:var(--psi-switch-fg)}._disabled_yv464_13{opacity:.4;cursor:not-allowed}._track_yv464_26{position:relative;display:inline-flex;align-items:center;width:36px;height:20px;flex-shrink:0;border-radius:var(--psi-radius-full);background:var(--psi-switch-track-bg);transition:background-color var(--psi-duration-150) var(--psi-ease-standard)}._input_yv464_38:checked+._track_yv464_26{background:var(--psi-switch-track-bg-checked)}._input_yv464_38:focus-visible+._track_yv464_26{outline:var(--psi-focus-ring-width) solid var(--psi-switch-focus-ring);outline-offset:var(--psi-focus-ring-offset)}._thumb_yv464_50{position:absolute;width:16px;height:16px;border-radius:var(--psi-radius-full);background:var(--psi-switch-thumb-bg);left:2px;transition:left var(--psi-duration-150) var(--psi-ease-standard);box-shadow:0 1px 2px #00000029}._input_yv464_38:checked+._track_yv464_26 ._thumb_yv464_50{left:18px}._text_yv464_67{color:var(--psi-switch-fg)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._stack_49uys_4{display:flex;flex-direction:column}._gap4_49uys_9{gap:var(--psi-space-4)}._gap8_49uys_10{gap:var(--psi-space-8)}._gap12_49uys_11{gap:var(--psi-space-12)}._gap16_49uys_12{gap:var(--psi-space-16)}._gap24_49uys_13{gap:var(--psi-space-24)}._gap32_49uys_14{gap:var(--psi-space-32)}._alignStart_49uys_16{align-items:flex-start}._alignCenter_49uys_17{align-items:center}._alignEnd_49uys_18{align-items:flex-end}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._text_14u60_4{margin:0;color:var(--psi-text-fg)}._s12Regular_14u60_9{font:var(--psi-text-12-16-regular)}._s12Medium_14u60_10{font:var(--psi-text-12-16-medium)}._s14Regular_14u60_11{font:var(--psi-text-14-20-regular)}._s14Medium_14u60_12{font:var(--psi-text-14-20-medium)}._s16Regular_14u60_13{font:var(--psi-text-16-24-regular)}._s16Medium_14u60_14{font:var(--psi-text-16-24-medium)}._s18Regular_14u60_15{font:var(--psi-text-18-28-regular)}._s18Medium_14u60_16{font:var(--psi-text-18-28-medium)}._secondary_14u60_18{color:var(--psi-text-fg-secondary)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._wrap_1twws_6{display:grid;gap:var(--psi-space-4)}._textarea_1twws_11{display:block;box-sizing:border-box;width:100%;min-width:0;padding-block:var(--psi-space-6);padding-inline:var(--psi-textarea-padding-inline);border:1px solid var(--psi-textarea-border);border-radius:var(--psi-textarea-radius);background:var(--psi-textarea-bg);color:var(--psi-textarea-fg);font:var(--psi-textarea-font);font-family:var(--psi-font-sans);resize:vertical;transition:border-color var(--psi-duration-150) var(--psi-ease-standard),outline var(--psi-duration-150) var(--psi-ease-standard)}._textarea_1twws_11::placeholder{color:var(--psi-textarea-placeholder)}._textarea_1twws_11:hover:not(:disabled):not(:focus-visible){border-color:var(--psi-textarea-border-hover)}._textarea_1twws_11:focus-visible{outline:var(--psi-focus-ring-width) solid var(--psi-textarea-focus-ring);outline-offset:var(--psi-focus-ring-offset-inset);border-color:transparent}._textarea_1twws_11:disabled{opacity:.4;cursor:not-allowed}._error_1twws_49,._error_1twws_49:hover:not(:disabled):not(:focus-visible){border-color:var(--psi-textarea-border-error)}._counter_1twws_55{justify-self:end;font:var(--psi-text-12-16-regular);font-variant-numeric:tabular-nums;color:var(--psi-textarea-counter-fg)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._group_wwg2k_5{display:flex;flex-direction:column;align-items:flex-start;gap:var(--psi-space-8)}._horizontal_wwg2k_12{flex-direction:row;flex-wrap:wrap;gap:var(--psi-space-16)}._label_wwg2k_18{display:inline-flex;align-items:center;gap:var(--psi-space-8);cursor:pointer;-webkit-user-select:none;user-select:none;font:var(--psi-text-14-20-regular);color:var(--psi-radio-group-fg)}._disabled_wwg2k_28{opacity:.4;cursor:not-allowed}._circle_wwg2k_35{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:16px;height:16px;flex-shrink:0;border:1px solid var(--psi-radio-group-circle-border);border-radius:var(--psi-radius-full);background:var(--psi-radio-group-circle-bg);transition:background-color var(--psi-duration-150) var(--psi-ease-standard),border-color var(--psi-duration-150) var(--psi-ease-standard)}._input_wwg2k_51:checked+._circle_wwg2k_35{background:var(--psi-radio-group-circle-bg-checked);border-color:var(--psi-radio-group-circle-border-checked)}._input_wwg2k_51:checked+._circle_wwg2k_35:after{content:"";display:block;width:6px;height:6px;border-radius:var(--psi-radius-full);color:var(--psi-radio-group-dot-fg);background:currentColor}._input_wwg2k_51[aria-invalid=true]:not(:checked)+._circle_wwg2k_35{border-color:var(--psi-radio-group-circle-border-error)}._input_wwg2k_51:focus-visible+._circle_wwg2k_35{outline:var(--psi-focus-ring-width) solid var(--psi-radio-group-focus-ring);outline-offset:var(--psi-focus-ring-offset)}._text_wwg2k_79{color:var(--psi-radio-group-fg)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._tag_1r2xw_3{display:inline-flex;align-items:center;gap:var(--psi-space-4);height:24px;padding-inline:var(--psi-space-8);border-radius:var(--psi-radius-full);font:var(--psi-text-12-16-medium);white-space:nowrap;-webkit-user-select:none;user-select:none}._dismiss_1r2xw_17{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:none;color:inherit;cursor:pointer;opacity:.7;margin-inline-start:var(--psi-space-2);margin-inline-end:calc(-1 * var(--psi-space-4));border-radius:var(--psi-radius-full)}._dismiss_1r2xw_17:hover{opacity:1}._dismiss_1r2xw_17:focus-visible{outline:var(--psi-focus-ring-width) solid var(--psi-tag-focus-ring);outline-offset:var(--psi-focus-ring-offset)}._neutral_1r2xw_43{background:var(--psi-tag-neutral-bg);color:var(--psi-tag-neutral-fg)}._accent_1r2xw_48{background:var(--psi-tag-accent-bg);color:var(--psi-tag-accent-fg)}._success_1r2xw_53{background:var(--psi-tag-success-bg);color:var(--psi-tag-success-fg)}._warning_1r2xw_58{background:var(--psi-tag-warning-bg);color:var(--psi-tag-warning-fg)}._danger_1r2xw_63{background:var(--psi-tag-danger-bg);color:var(--psi-tag-danger-fg)}._neutralSubtle_1r2xw_70{background:var(--psi-tag-neutral-subtle-bg);color:var(--psi-tag-neutral-subtle-fg)}._accentSubtle_1r2xw_75{background:var(--psi-tag-accent-subtle-bg);color:var(--psi-tag-accent-subtle-fg)}._successSubtle_1r2xw_80{background:var(--psi-tag-success-subtle-bg);color:var(--psi-tag-success-subtle-fg)}._warningSubtle_1r2xw_85{background:var(--psi-tag-warning-subtle-bg);color:var(--psi-tag-warning-subtle-fg)}._dangerSubtle_1r2xw_90{background:var(--psi-tag-danger-subtle-bg);color:var(--psi-tag-danger-subtle-fg)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._wrapper_15o1w_3{position:relative;display:inline-flex}._tooltip_15o1w_10{position:absolute;z-index:var(--psi-z-tooltip);padding:var(--psi-space-4) var(--psi-space-8);border-radius:var(--psi-tooltip-radius);background:var(--psi-tooltip-bg);color:var(--psi-tooltip-fg);font:var(--psi-text-12-16-regular);white-space:nowrap}._tooltip_15o1w_10:before{content:"";position:absolute}._top_15o1w_32{bottom:100%;left:50%;transform:translate(-50%);margin-bottom:var(--psi-space-4)}._top_15o1w_32:before{inset-inline:0;top:100%;bottom:calc(var(--psi-space-4) * -1)}._bottom_15o1w_45{top:100%;left:50%;transform:translate(-50%);margin-top:var(--psi-space-4)}._bottom_15o1w_45:before{inset-inline:0;bottom:100%;top:calc(var(--psi-space-4) * -1)}._left_15o1w_58{right:100%;top:50%;transform:translateY(-50%);margin-right:var(--psi-space-4)}._left_15o1w_58:before{inset-block:0;left:100%;right:calc(var(--psi-space-4) * -1)}._right_15o1w_71{left:100%;top:50%;transform:translateY(-50%);margin-left:var(--psi-space-4)}._right_15o1w_71:before{inset-block:0;right:100%;left:calc(var(--psi-space-4) * -1)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._toolbar_8bwkv_1{display:flex;flex-wrap:wrap;align-items:center}._gap8_8bwkv_7{gap:var(--psi-space-8)}._gap12_8bwkv_8{gap:var(--psi-space-12)}._gap16_8bwkv_9{gap:var(--psi-space-16)}._alignEnd_8bwkv_13{align-items:flex-end}._alignStart_8bwkv_19{align-items:flex-start}._alignStart_8bwkv_19>:is(button,a){margin-block-start:var(--psi-toolbar-action-offset)}._toolbar_8bwkv_1>input,._toolbar_8bwkv_1>select{width:var(--psi-toolbar-control-width)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._trigger_pivae_4{display:inline-flex;width:fit-content}._menu_pivae_16{min-width:180px;margin:var(--psi-space-4);padding:var(--psi-space-4);border:1px solid var(--psi-menu-border);border-radius:var(--psi-menu-radius);background:var(--psi-menu-bg);color:var(--psi-menu-fg);font:var(--psi-text-14-20-regular)}._menu_pivae_16:not([data-open]):not(:popover-open){display:none}._item_pivae_37{display:flex;width:100%;align-items:center;padding:var(--psi-space-8) var(--psi-space-12);border:0;border-radius:var(--psi-radius-6);background:var(--psi-menu-item-bg);color:var(--psi-menu-item-fg);font:inherit;text-align:start;cursor:pointer}._item_pivae_37:hover{background:var(--psi-menu-item-bg-hover)}._item_pivae_37:active{background:var(--psi-menu-item-bg-active)}._item_pivae_37:focus-visible{outline:var(--psi-focus-ring-width) solid var(--psi-menu-focus-ring);outline-offset:var(--psi-focus-ring-offset-inset)}._item_pivae_37[data-variant=danger]{color:var(--psi-menu-item-fg-danger)}._item_pivae_37[aria-disabled=true]{color:var(--psi-menu-item-fg-disabled);cursor:default}._item_pivae_37[aria-disabled=true]:hover{background:var(--psi-menu-item-bg)}._text_pivae_85{padding:var(--psi-space-8) var(--psi-space-12);color:var(--psi-menu-text-fg);cursor:default}._separator_pivae_93{height:0;margin:var(--psi-space-4) 0;border-top:1px solid var(--psi-menu-separator-border)}@supports (anchor-name: --x){._menu_pivae_16{position:fixed;margin:var(--psi-space-4);position-try-fallbacks:flip-block,flip-inline,flip-block flip-inline}._menu_pivae_16[data-placement=bottom-start]{position-area:block-end span-inline-end}._menu_pivae_16[data-placement=bottom-end]{position-area:block-end span-inline-start}._menu_pivae_16[data-placement=top-start]{position-area:block-start span-inline-end}._menu_pivae_16[data-placement=top-end]{position-area:block-start span-inline-start}}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._table_1maek_3{width:100%;border-collapse:collapse;background:var(--psi-table-bg);color:var(--psi-table-fg);font:var(--psi-text-14-20-regular);border:1px solid var(--psi-table-border);border-radius:var(--psi-table-radius)}._caption_1maek_19{caption-side:top;text-align:start;padding-block:var(--psi-space-8);color:var(--psi-table-fg);font:var(--psi-text-14-20-medium)}._captionDetail_1maek_27{display:block;color:var(--psi-table-header-fg);font:var(--psi-text-12-16-regular)}._caption_1maek_19:focus-visible{outline:var(--psi-focus-ring-width) solid var(--psi-table-focus-ring);outline-offset:var(--psi-focus-ring-offset-inset)}._headerCell_1maek_38{color:var(--psi-table-header-fg);font:var(--psi-text-14-20-medium);text-align:start}._cell_1maek_44,._headerCell_1maek_38{border-bottom:1px solid var(--psi-table-cell-border)}._rowHeader_1maek_51{font:var(--psi-text-14-20-medium);text-align:start}._cell_1maek_44[data-numeric],._headerCell_1maek_38[data-numeric]{text-align:end;font-variant-numeric:var(--psi-font-variant-numeric)}._sortButton_1maek_62{display:inline-flex;align-items:center;gap:var(--psi-space-4);padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}._sortButton_1maek_62:focus-visible{outline:var(--psi-focus-ring-width) solid var(--psi-table-focus-ring);outline-offset:var(--psi-focus-ring-offset)}._sortIndicator_1maek_79{color:var(--psi-table-sort-indicator-fg)}._table_1maek_3[data-size="32"] ._cell_1maek_44,._table_1maek_3[data-size="32"] ._headerCell_1maek_38{height:var(--psi-table-32-row-height);padding-inline:var(--psi-table-32-cell-padding-x)}._table_1maek_3[data-size="32"] ._caption_1maek_19{padding-inline:var(--psi-table-32-cell-padding-x)}._table_1maek_3[data-size="40"] ._cell_1maek_44,._table_1maek_3[data-size="40"] ._headerCell_1maek_38{height:var(--psi-table-40-row-height);padding-inline:var(--psi-table-40-cell-padding-x)}._table_1maek_3[data-size="40"] ._caption_1maek_19{padding-inline:var(--psi-table-40-cell-padding-x)}._table_1maek_3[data-size="48"] ._cell_1maek_44,._table_1maek_3[data-size="48"] ._headerCell_1maek_38{height:var(--psi-table-48-row-height);padding-inline:var(--psi-table-48-cell-padding-x)}._table_1maek_3[data-size="48"] ._caption_1maek_19{padding-inline:var(--psi-table-48-cell-padding-x)}._table_1maek_3[data-size] ._selectCell_1maek_123{width:1%;padding-inline-end:0}._body_1maek_130 ._row_1maek_51:hover{background:var(--psi-table-row-bg-hover)}._body_1maek_130 ._row_1maek_51[data-selected]:hover,._row_1maek_51[data-selected]{background:var(--psi-table-row-bg-selected)}._row_1maek_51{background:var(--psi-table-row-bg)}._sticky_1maek_155 ._headerCell_1maek_38{position:sticky;inset-block-start:0;z-index:var(--psi-z-sticky);background:var(--psi-table-bg);box-shadow:inset 0 -1px 0 var(--psi-table-cell-border)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._nav_166vs_6{display:flex;align-items:center;gap:var(--psi-space-4)}._ellipsis_166vs_12{padding-inline:var(--psi-space-4)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._nav_jbhk1_5{display:inline-flex;align-items:center;gap:var(--psi-space-8)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._toast_1gxg8_10{pointer-events:auto;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:var(--psi-space-12);min-width:280px;max-width:420px;padding:var(--psi-space-12) var(--psi-space-16);border:1px solid var(--psi-toast-border);border-radius:var(--psi-toast-radius);background:var(--psi-toast-bg);color:var(--psi-toast-fg);font:var(--psi-text-14-20-regular);animation:_toast-enter_1gxg8_1 var(--psi-duration-200) var(--psi-ease-soft)}@keyframes _toast-enter_1gxg8_1{0%{opacity:0;transform:translateY(8px)}}._icon_1gxg8_39{display:inline-flex;align-items:center}._iconNeutral_1gxg8_44{color:var(--psi-toast-icon-fg-neutral)}._iconSuccess_1gxg8_45{color:var(--psi-toast-icon-fg-success)}._iconWarning_1gxg8_46{color:var(--psi-toast-icon-fg-warning)}._iconDanger_1gxg8_47{color:var(--psi-toast-icon-fg-danger)}._body_1gxg8_51{min-width:0}._action_1gxg8_55{display:inline-flex}._region_1gxg8_61{position:fixed;inset:auto;margin:0;padding:var(--psi-space-16);border:0;background:none;overflow:visible;pointer-events:none;display:flex;flex-direction:column;gap:var(--psi-space-8);width:max-content;max-width:100%}._region_1gxg8_61[data-placement=top-start]{top:0;left:0;align-items:flex-start}._region_1gxg8_61[data-placement=top-end]{top:0;right:0;align-items:flex-end}._region_1gxg8_61[data-placement=bottom-start]{bottom:0;left:0;align-items:flex-start}._region_1gxg8_61[data-placement=bottom-end]{bottom:0;right:0;align-items:flex-end}._region_1gxg8_61[data-placement^=bottom] ._live_1gxg8_91{flex-direction:column-reverse}._live_1gxg8_91{display:flex;flex-direction:column;gap:var(--psi-space-8)}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._banner_15y1f_7{display:grid;grid-template-columns:auto 1fr auto auto;align-items:start;gap:var(--psi-space-12);width:100%;box-sizing:border-box;padding:var(--psi-space-12) var(--psi-space-16);color:var(--psi-banner-fg);font:var(--psi-text-14-20-regular)}._banner_15y1f_7[data-variant=neutral]{background:var(--psi-banner-bg-neutral)}._banner_15y1f_7[data-variant=success]{background:var(--psi-banner-bg-success)}._banner_15y1f_7[data-variant=warning]{background:var(--psi-banner-bg-warning)}._banner_15y1f_7[data-variant=danger]{background:var(--psi-banner-bg-danger)}._icon_15y1f_26{display:inline-flex;align-items:center}._iconNeutral_15y1f_31{color:var(--psi-banner-icon-fg-neutral)}._iconSuccess_15y1f_32{color:var(--psi-banner-icon-fg-success)}._iconWarning_15y1f_33{color:var(--psi-banner-icon-fg-warning)}._iconDanger_15y1f_34{color:var(--psi-banner-icon-fg-danger)}._body_15y1f_36{min-width:0}._body_15y1f_36>p{margin-block:0}._body_15y1f_36>p+p{margin-block-start:var(--psi-space-8)}._title_15y1f_50{display:block;font:var(--psi-text-14-20-medium)}._action_15y1f_55{display:inline-flex}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._inlineAlert_16390_7{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:var(--psi-space-12);box-sizing:border-box;padding:var(--psi-space-12) var(--psi-space-16);border-radius:var(--psi-inline-alert-radius);color:var(--psi-inline-alert-fg);font:var(--psi-text-14-20-regular)}._inlineAlert_16390_7[data-variant=neutral]{background:var(--psi-inline-alert-bg-neutral);border:1px solid var(--psi-inline-alert-border-neutral)}._inlineAlert_16390_7[data-variant=success]{background:var(--psi-inline-alert-bg-success);border:1px solid var(--psi-inline-alert-border-success)}._inlineAlert_16390_7[data-variant=warning]{background:var(--psi-inline-alert-bg-warning);border:1px solid var(--psi-inline-alert-border-warning)}._inlineAlert_16390_7[data-variant=danger]{background:var(--psi-inline-alert-bg-danger);border:1px solid var(--psi-inline-alert-border-danger)}._icon_16390_38{display:inline-flex;align-items:center}._iconNeutral_16390_43{color:var(--psi-inline-alert-icon-fg-neutral)}._iconSuccess_16390_44{color:var(--psi-inline-alert-icon-fg-success)}._iconWarning_16390_45{color:var(--psi-inline-alert-icon-fg-warning)}._iconDanger_16390_46{color:var(--psi-inline-alert-icon-fg-danger)}._body_16390_48{min-width:0}._body_16390_48>p{margin-block:0}._body_16390_48>p+p{margin-block-start:var(--psi-space-8)}._title_16390_62{display:block;font:var(--psi-text-14-20-medium)}._action_16390_67{display:inline-flex}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{@keyframes _skeleton-pulse_1yo7t_1{0%{opacity:1}to{opacity:.45}}._skeleton_1yo7t_12{width:100%;box-sizing:border-box;animation:_skeleton-pulse_1yo7t_1 var(--psi-duration-600) var(--psi-ease-in-out) infinite alternate}._skeleton_1yo7t_12[data-variant=block]{border-radius:var(--psi-skeleton-radius);background:var(--psi-skeleton-bg)}._skeleton_1yo7t_12[data-size="24"]{height:var(--psi-size-24)}._skeleton_1yo7t_12[data-size="32"]{height:var(--psi-size-32)}._skeleton_1yo7t_12[data-size="40"]{height:var(--psi-size-40)}._skeleton_1yo7t_12[data-size="48"]{height:var(--psi-size-48)}._line_1yo7t_28{display:block;padding-block:var(--psi-space-6);margin-block:var(--psi-space-4);border-radius:var(--psi-skeleton-radius);background:var(--psi-skeleton-bg)}._line_1yo7t_28:last-child:not(:first-child){width:60%}@media(prefers-reduced-motion:reduce){._skeleton_1yo7t_12{animation:none}}}@layer psi.base,psi.theme,psi.components,psi.utilities;@layer psi.components{._tabs_1x9om_8{display:flex;flex-direction:column;gap:var(--psi-space-16)}._tabs_1x9om_8[data-orientation=vertical]{flex-direction:row;gap:var(--psi-space-24)}._list_1x9om_21{display:flex;flex-wrap:wrap;gap:var(--psi-space-4);border-bottom:1px solid var(--psi-tabs-list-border)}._tabs_1x9om_8[data-orientation=vertical] ._list_1x9om_21{flex-direction:column;flex-wrap:nowrap;border-bottom:none;border-inline-start:1px solid var(--psi-tabs-list-border)}._tab_1x9om_8{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:none;cursor:pointer;height:var(--psi-tabs-40-height);padding-inline:var(--psi-tabs-40-padding-x);font:var(--psi-text-14-20-medium);color:var(--psi-tabs-fg);transition:color var(--psi-duration-150) var(--psi-ease-standard)}._tab_1x9om_8:hover:not([aria-disabled=true]){background:var(--psi-tabs-bg-hover)}._tab_1x9om_8:focus-visible{outline:var(--psi-focus-ring-width) solid var(--psi-tabs-focus-ring);outline-offset:var(--psi-focus-ring-offset-inset)}._tab_1x9om_8[aria-disabled=true]{color:var(--psi-tabs-fg-disabled);cursor:default}._tab_1x9om_8[aria-selected=true]{color:var(--psi-tabs-fg-selected)}._tab_1x9om_8[aria-selected=true]:after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:2px;background:var(--psi-tabs-indicator)}._tabs_1x9om_8[data-orientation=vertical] ._tab_1x9om_8{text-align:start}._tabs_1x9om_8[data-orientation=vertical] ._tab_1x9om_8[aria-selected=true]:after{inset-inline:auto;inset-block:0;inset-inline-start:-1px;width:2px;height:auto}._panel_1x9om_99{min-width:0}._panel_1x9om_99:focus-visible{outline:var(--psi-focus-ring-width) solid var(--psi-tabs-focus-ring);outline-offset:var(--psi-focus-ring-offset)}}
package/docs/Checkbox.md CHANGED
@@ -1,7 +1,7 @@
1
1
  <!-- Generated by emit-docs.ts — do not edit. -->
2
2
  # Checkbox
3
3
 
4
- Native checkbox with a built-in label; for independent binary choices.
4
+ Native checkbox with a built-in label; for independent binary choices. In an invalid group Field it is aria-invalid, and an unchecked box marked aria-invalid outlines in the error colour (D108).
5
5
 
6
6
  ## Props
7
7
 
@@ -9,6 +9,7 @@ Native checkbox with a built-in label; for independent binary choices.
9
9
  |---|---|---|---|---|
10
10
  | `children` | `ReactNode` | — | no | Label text. |
11
11
  | `aria-label` | `string` | — | no | Accessible name when there is no visible label — a table's row-selection checkbox, say. Optional, unlike IconButton's required form (D60): a labelled checkbox is still the common case. |
12
+ | `indeterminate` | `boolean` | — | no | The mixed state, e.g. a "select all" over a partial selection (D103). Sets the input's DOM property, which the platform exposes as aria-checked="mixed", and draws a dash. Re-applied on every render, because a click clears the property before the consumer re-renders. When absent, the property is left alone, so a state set through the ref survives. |
12
13
  | `ref` | `Ref<HTMLInputElement>` | — | no | Forwarded ref to the underlying `<input type="checkbox">` element. |
13
14
  | `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |
14
15
 
package/docs/Dialog.md CHANGED
@@ -14,7 +14,10 @@ Modal dialog on the native <dialog> top layer: focus trap, aria-modal and focus
14
14
  | `footer` | `ReactNode` | — | no | Action row (Buttons — one accent per group, danger for destructive). |
15
15
  | `width` | `400 \| 560 \| 720` | 560 | no | Panel width in px (400 \| 560 \| 720). For an `inline-*` placement this is the drawer's width; the height is always the full viewport. |
16
16
  | `placement` | `"center" \| "inline-start" \| "inline-end"` | center | no | Where the panel sits. `inline-start` / `inline-end` pin it full-height to that edge, making it a drawer (D66). |
17
- | `dismissible` | `boolean` | true | no | false = no close button, Esc and backdrop swallowed — footer is the only exit. |
17
+ | `dismissible` | `boolean` | true | no | false = no close button, Esc and backdrop swallowed — footer is the only exit. `closeOnEscape` can give Escape back on its own (D101). |
18
+ | `closeOnEscape` | `boolean` | dismissible | no | Whether Escape reports onClose("esc"), separately from the close button and the backdrop (D101). A consequential confirmation is `dismissible={false} closeOnEscape`: no close button, no backdrop dismissal, and Escape cancels. |
19
+ | `initialFocus` | `RefObject<HTMLElement \| null>` | — | no | The element to focus each time the dialog opens, after the platform's own focusing (D101), e.g. a ref to the footer's Cancel button. Without it, the platform focuses the first focusable control, as before. |
20
+ | `closeLabel` | `string` | — | no | Visible text for the close button (D101). When set, the close button is a ghost Button with this text instead of the icon-only "Close dialog" button. |
18
21
  | `ref` | `Ref<HTMLDialogElement>` | — | no | Forwarded ref to the underlying <dialog> element. |
19
22
  | `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |
20
23
 
@@ -22,7 +25,7 @@ Modal dialog on the native <dialog> top layer: focus trap, aria-modal and focus
22
25
 
23
26
  | Keys | Behavior |
24
27
  |---|---|
25
- | Esc | Dismisses via onClose('esc') when dismissible; swallowed otherwise. |
28
+ | Esc | Dismisses via onClose('esc') when closeOnEscape (default: dismissible); swallowed otherwise (D101). |
26
29
  | Tab | Focus is trapped inside by the native <dialog> top layer; restored on close. |
27
30
 
28
31
  Rendered with showModal(): aria-modal, inert background and focus restore come from the platform. title wires aria-labelledby; without title, pass aria-label. Backdrop click dismisses only when dismissible. placement="inline-start"/"inline-end" pins the panel full-height to that edge — that is Psi's drawer, and it changes nothing about modality, the focus trap, focus restore or the dismissal reasons (D66). A drawer's panel scrolls internally so a dismissible={false} footer stays reachable.
package/docs/Menu.md CHANGED
@@ -8,9 +8,10 @@ Action menu on the native Popover API top layer: the top layer and light dismiss
8
8
  | Prop | Type | Default | Required | Description |
9
9
  |---|---|---|---|---|
10
10
  | `open` | `boolean` | — | yes | Controlled open state; syncs to showPopover()/hidePopover(). |
11
- | `onClose` | `(reason: "item-select" \| "esc" \| "outside") => void` | — | yes | Called when a dismissal is *requested*; the consumer flips `open`. Menu never closes itself on `"esc"` or `"item-select"` — the popover stays open until `open` becomes false (D50). `"outside"` is the one exception: light dismiss is performed by the browser before it tells us, so by the time that reason is reported the popover is already closed. Flipping `open` to false is still required, to keep React's state in step. Invariant (D58): a dismissal is only ever reported for a menu that is currently open according to its own `open` prop. The platform can close an auto popover before the consumer's state catches up — clicking another menu's trigger light-dismisses this one before the consumer's click handler runs — and a report for an already-closed menu would clear a selection that has since moved on. |
11
+ | `onClose` | `(reason: MenuCloseReason) => void` | — | yes | Called when a dismissal is *requested*; the consumer flips `open`. Menu never closes itself on `"esc"` or `"item-select"` — the popover stays open until `open` becomes false (D50). `"outside"` is the one exception: light dismiss is performed by the browser before it tells us, so by the time that reason is reported the popover is already closed. Flipping `open` to false is still required, to keep React's state in step. Invariant (D58): a dismissal is only ever reported for a menu that is currently open according to its own `open` prop. The platform can close an auto popover before the consumer's state catches up — clicking another menu's trigger light-dismisses this one before the consumer's click handler runs — and a report for an already-closed menu would clear a selection that has since moved on. `"tab"` (D102): Tab or Shift Tab inside the open menu. Focus moves on to the next control as the browser moves it; the consumer flips `open`. |
12
12
  | `trigger` | `ReactElement<Record<string, unknown>, string \| JSXElementConstructor<any>>` | — | yes | The trigger element. Must be a single React element that spreads unknown props onto a focusable node (a Psi `Button`, say): Menu clones it to add `aria-haspopup="menu"` and `aria-expanded`, so assistive tech associates the menu with the control users actually focus. |
13
13
  | `placement` | `"bottom-start" \| "bottom-end" \| "top-start" \| "top-end"` | bottom-start | no | Placement relative to the trigger. |
14
+ | `id` | `string` | — | no | The menu element's id, which the trigger's `aria-controls` names (D102). Generated when absent. |
14
15
  | `aria-label` | `string` | — | no | Accessible name for the menu when there is no visible label. |
15
16
  | `aria-describedby` | `string` | — | no | The id of a `MenuText` (or any element) that describes the menu (D99). Unset by default: a description may be spoken every time the menu opens. |
16
17
  | `children` | `ReactNode` | — | yes | MenuItem, MenuSeparator and MenuText children. |
@@ -26,6 +27,8 @@ Action menu on the native Popover API top layer: the top layer and light dismiss
26
27
  | Any single printable key | Typeahead — focuses the first enabled item whose label starts with the typed prefix; the prefix resets after 500ms. Keystrokes with Meta/Ctrl/Alt held are ignored. |
27
28
  | Esc | Suppresses the platform's own dismissal and reports onClose("esc"); the menu stays open until the consumer flips `open` (D50). |
28
29
  | Enter / Space | Activates the focused item (native button behavior). |
30
+ | Arrow Down / Arrow Up on the closed trigger | Opens the menu on its first / last enabled item by clicking the trigger, since Menu cannot open itself; the consumer's onClick flips `open` (D102). |
31
+ | Tab / Shift Tab | Reports onClose("tab") and lets focus move on to the next control; the consumer flips `open`, and focus is not pulled back to the trigger (D102). |
29
32
 
30
33
  Opens on the native top layer via popover="auto", which supplies light dismiss. Controlled-only: every dismissal path (esc, item-select, outside) only reports onClose(reason) — the consumer must flip `open` to actually close it; outside is the one path the platform has already acted on by the time it is reported. Opening moves focus to the first enabled item — Menu takes focus off the trigger as soon as `open` becomes true. Focus returns to the trigger when the menu actually closes, and only if focus is still inside the menu, so a light dismiss onto another control does not steal focus back. Requires an accessible name — pass aria-label. Placement uses CSS anchor positioning where supported and a JS fallback below that floor; below it there is no collision flip.
31
34
 
package/docs/Radio.md ADDED
@@ -0,0 +1,40 @@
1
+ <!-- Generated by emit-docs.ts — do not edit. -->
2
+ # Radio
3
+
4
+ One choice in a RadioGroup (D104): a native radio with a built-in label, drawn like Checkbox on a circle. Takes its name, checked state, required and aria-invalid from the group.
5
+
6
+ ## Props
7
+
8
+ | Prop | Type | Default | Required | Description |
9
+ |---|---|---|---|---|
10
+ | `value` | `string` | — | yes | The value this radio selects. |
11
+ | `children` | `ReactNode` | — | no | Label text. |
12
+ | `disabled` | `boolean` | — | no | Disables this radio; a disabled RadioGroup disables all of them. |
13
+ | `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |
14
+ | `ref` | `Ref<HTMLInputElement>` | — | no | Forwarded ref to the underlying `<input type="radio">` element. |
15
+
16
+ ## Keyboard & assistive tech
17
+
18
+ | Keys | Behavior |
19
+ |---|---|
20
+ | Space | Selects the focused radio when none is selected. |
21
+
22
+ Native <input type=radio> underneath (visually hidden), drawn like Checkbox on a circle. Takes its name, checked state, required and aria-invalid from its RadioGroup.
23
+
24
+ ## Theming
25
+
26
+ This component has no `--psi-radio-*` tokens — its styling binds scale tokens only, so there is nothing component-scoped to override. Theme changes reach it through the semantic tokens of its children and surroundings.
27
+
28
+
29
+
30
+ ## Rules
31
+
32
+ - One accent per visual group; everything else neutral or ghost.
33
+ - danger only for actions with real consequences.
34
+ - Sizes are px numbers (24|32|40|48), never S/M/L.
35
+ - Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.
36
+ - Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.
37
+ - --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).
38
+ - Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.
39
+ - Field is for a control with a *visible* label. A toolbar filter control named by aria-label or placeholder takes neither a Field nor a hand-rolled label row — compare filter-toolbar (no labels) with table-pagination ("Rows per page" visible, so Field). Filters with visible labels submitted together by a Find button are filter-form: a Toolbar as="form" align="start" of Fields with one-line labels, where a field's error line is the Field's own and hangs below its control (D87, D92).
40
+ - Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.
@@ -0,0 +1,46 @@
1
+ <!-- Generated by emit-docs.ts — do not edit. -->
2
+ # RadioGroup
3
+
4
+ A set of native radios sharing one name (D104). The browser supplies the keyboard: Tab enters on the checked radio, and the arrows move and select. Inside `Field group` the fieldset and legend form and name the group, so this adds no role; standalone it is `role="radiogroup"` and needs `aria-label` or `aria-labelledby`. A required or invalid Field makes every radio `required` and `aria-invalid`.
5
+
6
+ ## Props
7
+
8
+ | Prop | Type | Default | Required | Description |
9
+ |---|---|---|---|---|
10
+ | `children` | `ReactNode` | — | no | `Radio` children. |
11
+ | `name` | `string` | — | no | The radios' shared `name`. Generated when absent. |
12
+ | `value` | `string` | — | no | The selected value (controlled). |
13
+ | `defaultValue` | `string` | — | no | The initially selected value (uncontrolled). |
14
+ | `onValueChange` | `((value: string) => void)` | — | no | Called with the value of the radio the user selects. |
15
+ | `disabled` | `boolean` | false | no | Disables every radio in the group. |
16
+ | `orientation` | `"vertical" \| "horizontal"` | vertical | no | Stack the radios, or lay them in a row. |
17
+ | `aria-label` | `string` | — | no | Accessible name when the group stands alone. Inside `Field group` the legend names the group instead. |
18
+ | `ref` | `Ref<HTMLDivElement>` | — | no | Forwarded ref to the root element. |
19
+ | `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |
20
+
21
+ ## Keyboard & assistive tech
22
+
23
+ | Keys | Behavior |
24
+ |---|---|
25
+ | Tab | Enters the group on the checked radio, or the first one; one tab stop for the group. |
26
+ | Arrow keys | Move to the next or previous radio and select it (native radios sharing one name). |
27
+
28
+ Native radios sharing one name (D104). Inside Field group the fieldset and legend form and name the group, so RadioGroup adds no role; standalone it is role="radiogroup" and needs aria-label or aria-labelledby. A required or invalid Field makes every radio required and aria-invalid.
29
+
30
+ ## Theming
31
+
32
+ Override `--psi-radio-group-*` custom properties at any scope.
33
+
34
+
35
+
36
+ ## Rules
37
+
38
+ - One accent per visual group; everything else neutral or ghost.
39
+ - danger only for actions with real consequences.
40
+ - Sizes are px numbers (24|32|40|48), never S/M/L.
41
+ - Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.
42
+ - Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.
43
+ - --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).
44
+ - Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.
45
+ - Field is for a control with a *visible* label. A toolbar filter control named by aria-label or placeholder takes neither a Field nor a hand-rolled label row — compare filter-toolbar (no labels) with table-pagination ("Rows per page" visible, so Field). Filters with visible labels submitted together by a Find button are filter-form: a Toolbar as="form" align="start" of Fields with one-line labels, where a field's error line is the Field's own and hangs below its control (D87, D92).
46
+ - Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.
package/docs/Stack.md ADDED
@@ -0,0 +1,40 @@
1
+ <!-- Generated by emit-docs.ts — do not edit. -->
2
+ # Stack
3
+
4
+ A column with a gap from the space scale (D109): Toolbar's vertical counterpart, minus the wrap. A plain <div> with no role. It gives a pattern tree a layout context, which Panel and the psi-gap-* utilities do not.
5
+
6
+ ## Props
7
+
8
+ | Prop | Type | Default | Required | Description |
9
+ |---|---|---|---|---|
10
+ | `children` | `ReactNode` | — | no | Stack contents, laid out top to bottom. |
11
+ | `gap` | `4 \| 8 \| 12 \| 16 \| 24 \| 32` | 16 | no | Space between children in px, from the space scale. |
12
+ | `align` | `"stretch" \| "start" \| "center" \| "end"` | stretch | no | Cross-axis alignment. `stretch` (the default) makes each child full width; `start` keeps a Button or a short line at its own width. |
13
+ | `ref` | `Ref<HTMLDivElement>` | — | no | Forwarded ref to the root element. |
14
+ | `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |
15
+
16
+ ## Keyboard & assistive tech
17
+
18
+ | Keys | Behavior |
19
+ |---|---|
20
+ | Tab | Skipped — Stack itself is not focusable; focus moves through its children in source order. |
21
+
22
+ Plain <div> with no role (D109): a column with a gap. Visual order is source order, so reading and focus order match.
23
+
24
+ ## Theming
25
+
26
+ This component has no `--psi-stack-*` tokens — its styling binds scale tokens only, so there is nothing component-scoped to override. Theme changes reach it through the semantic tokens of its children and surroundings.
27
+
28
+
29
+
30
+ ## Rules
31
+
32
+ - One accent per visual group; everything else neutral or ghost.
33
+ - danger only for actions with real consequences.
34
+ - Sizes are px numbers (24|32|40|48), never S/M/L.
35
+ - Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.
36
+ - Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.
37
+ - --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).
38
+ - Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.
39
+ - Field is for a control with a *visible* label. A toolbar filter control named by aria-label or placeholder takes neither a Field nor a hand-rolled label row — compare filter-toolbar (no labels) with table-pagination ("Rows per page" visible, so Field). Filters with visible labels submitted together by a Find button are filter-form: a Toolbar as="form" align="start" of Fields with one-line labels, where a field's error line is the Field's own and hangs below its control (D87, D92).
40
+ - Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.
package/docs/Text.md ADDED
@@ -0,0 +1,42 @@
1
+ <!-- Generated by emit-docs.ts — do not edit. -->
2
+ # Text
3
+
4
+ A line or paragraph of text at one of Psi's text styles (D109). It gives a pattern tree an element per line, so a headline and its explanation do not run together. Margin 0: a Stack's gap does the spacing.
5
+
6
+ ## Props
7
+
8
+ | Prop | Type | Default | Required | Description |
9
+ |---|---|---|---|---|
10
+ | `children` | `ReactNode` | — | no | The text. |
11
+ | `as` | `"p" \| "span" \| "div" \| "h2" \| "h3" \| "h4"` | p | no | The element. A heading's level follows the document outline, its size the design, so `as` and `size` are separate. |
12
+ | `size` | `12 \| 14 \| 16 \| 18` | 14 | no | Font size in px; each size carries its own line height. |
13
+ | `weight` | `"regular" \| "medium"` | regular | no | |
14
+ | `tone` | `"primary" \| "secondary"` | primary | no | `secondary` for supporting text. |
15
+ | `ref` | `Ref<HTMLElement>` | — | no | Forwarded ref to the element. |
16
+ | `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |
17
+
18
+ ## Keyboard & assistive tech
19
+
20
+ | Keys | Behavior |
21
+ |---|---|
22
+ | Tab | Not focusable. |
23
+
24
+ Renders the element `as` names (p by default). Use h2–h4 for a heading at its outline level, whatever its `size`.
25
+
26
+ ## Theming
27
+
28
+ Override `--psi-text-*` custom properties at any scope.
29
+
30
+
31
+
32
+ ## Rules
33
+
34
+ - One accent per visual group; everything else neutral or ghost.
35
+ - danger only for actions with real consequences.
36
+ - Sizes are px numbers (24|32|40|48), never S/M/L.
37
+ - Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.
38
+ - Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.
39
+ - --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).
40
+ - Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.
41
+ - Field is for a control with a *visible* label. A toolbar filter control named by aria-label or placeholder takes neither a Field nor a hand-rolled label row — compare filter-toolbar (no labels) with table-pagination ("Rows per page" visible, so Field). Filters with visible labels submitted together by a Find button are filter-form: a Toolbar as="form" align="start" of Fields with one-line labels, where a field's error line is the Field's own and hangs below its control (D87, D92).
42
+ - Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.
@@ -0,0 +1,43 @@
1
+ <!-- Generated by emit-docs.ts — do not edit. -->
2
+ # Textarea
3
+
4
+ Multi-line text input (D104): the Input recipe on a native `<textarea>`. Inside a Field, id/aria-describedby/aria-invalid/required are wired as for Input (D49). `minLength` and `maxLength` are the native attributes. With `maxLength`, a counter under the control shows the length; it is not a live region (a count spoken on every keystroke is noise) and joins aria-describedby, so it is read with the field on focus.
5
+
6
+ ## Props
7
+
8
+ | Prop | Type | Default | Required | Description |
9
+ |---|---|---|---|---|
10
+ | `rows` | `number` | 3 | no | Visible rows. A textarea's height is its rows; there is no `size`. |
11
+ | `minLength` | `number` | — | no | Native minimum length, reported by constraint validation. |
12
+ | `maxLength` | `number` | — | no | Native maximum length, enforced while typing. With it, the counter shows `{length} / {maxLength}` unless `showCounter={false}`. |
13
+ | `error` | `boolean` | false | no | Show error styling. Inside a Field, the Field's error also lights this. |
14
+ | `showCounter` | `boolean` | true | no | With `maxLength`, show the `{length} / {maxLength}` counter under the control. It is not a live region; it describes the textarea. |
15
+ | `ref` | `Ref<HTMLTextAreaElement>` | — | no | Forwarded ref to the underlying `<textarea>` element. |
16
+ | `placeholder` | `string` | — | no | Native placeholder text shown while the field is empty (only on components whose host element supports it). |
17
+ | `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |
18
+
19
+ ## Keyboard & assistive tech
20
+
21
+ | Keys | Behavior |
22
+ |---|---|
23
+ | Tab | A native <textarea>; Enter adds a line, it does not submit the form. |
24
+
25
+ Inside a Field, id/aria-describedby/aria-invalid/required are wired as for Input (D104). minLength and maxLength are native. With maxLength, a counter under the control shows {length} / {maxLength}; it is not a live region, and it joins aria-describedby so it is read with the field on focus, with a visually hidden "characters".
26
+
27
+ ## Theming
28
+
29
+ Override `--psi-textarea-*` custom properties at any scope; interactive states derive automatically (L - 0.04 hover, L - 0.08 active).
30
+
31
+
32
+
33
+ ## Rules
34
+
35
+ - One accent per visual group; everything else neutral or ghost.
36
+ - danger only for actions with real consequences.
37
+ - Sizes are px numbers (24|32|40|48), never S/M/L.
38
+ - Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.
39
+ - Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.
40
+ - --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).
41
+ - Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.
42
+ - Field is for a control with a *visible* label. A toolbar filter control named by aria-label or placeholder takes neither a Field nor a hand-rolled label row — compare filter-toolbar (no labels) with table-pagination ("Rows per page" visible, so Field). Filters with visible labels submitted together by a Find button are filter-form: a Toolbar as="form" align="start" of Fields with one-line labels, where a field's error line is the Field's own and hangs below its control (D87, D92).
43
+ - Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.
package/docs/Tooltip.md CHANGED
@@ -8,7 +8,7 @@ Short hover/focus hint attached to a single trigger element.
8
8
  | Prop | Type | Default | Required | Description |
9
9
  |---|---|---|---|---|
10
10
  | `content` | `ReactNode` | — | yes | Tooltip content. |
11
- | `children` | `ReactElement<Record<string, unknown>, string \| JSXElementConstructor<any>>` | — | yes | The trigger element (must accept ref, onMouseEnter/Leave, onFocus/Blur). |
11
+ | `children` | `ReactElement<Record<string, unknown>, string \| JSXElementConstructor<any>>` | — | yes | The trigger element (must accept onFocus/Blur). |
12
12
  | `placement` | `"top" \| "bottom" \| "left" \| "right"` | top | no | Preferred placement. |
13
13
 
14
14
  ## Keyboard & assistive tech
package/llms.txt CHANGED
@@ -1,10 +1,10 @@
1
1
  # @handamade/psi-react
2
2
 
3
- 47 React 19 components consuming @handamade/psi-tokens. Zero runtime deps, CSS Modules, ref-as-prop.
3
+ 52 React 19 components consuming @handamade/psi-tokens. Zero runtime deps, CSS Modules, ref-as-prop.
4
4
 
5
5
  ## Machine-readable artifacts
6
6
  - dist/manifest.json: full component/prop inventory with types and defaults
7
- - dist/patterns.json: 23 composition patterns (D47) — gap-annotated recipes with clarifying parameters; presets are generated JSX, never hand-written
7
+ - dist/patterns.json: 24 composition patterns (D47) — gap-annotated recipes with clarifying parameters; presets are generated JSX, never hand-written
8
8
  - docs/{Component}.md: per-component docs (props, theming, variant guidance)
9
9
 
10
10
  ## Rules for generated code
@@ -30,6 +30,10 @@
30
30
  ## Panel
31
31
  - <Panel padding={16|24}>: the elevated surface panel (D51) — bg-secondary, faint hairline border, radius-12, space-24 padding (16 for compact). Binds the shared --psi-surface-* recipe Dialog's panel also uses; brands retune both by overriding --psi-surface-*. Not a Card: no media slot, no hover lift.
32
32
 
33
+
34
+ ## Stack and Text
35
+ - <Stack gap={4|8|12|16|24|32} align="stretch|start|center|end">: a column with a gap from the space scale (D109), default gap 16 and stretch. A plain <div>, no role, no wrap: Toolbar's vertical counterpart. Use it for the layout a pattern tree cannot get from Panel (which pads but lays out nothing) or from psi-gap-* (which sets gap only). `align="start"` keeps a Button at its own width. Fields in a form: gap 24.
36
+ - <Text as="p|span|div|h2|h3|h4" size={12|14|16|18} weight="regular|medium" tone="primary|secondary">: one line or paragraph at a Psi text style (D109), margin 0, default p / 14 / regular / primary. `as` follows the document outline and `size` the design, so `<Text as="h3" size={16} weight="medium">` is the usual section headline. In a pattern tree, put each line in its own Text: adjacent bare strings render as one run.
33
37
  ## DescriptionList (2)
34
38
  - `<DescriptionList layout="stacked|inline" gap={8|12|16}>` with one `<DescriptionItem term="Date">value</DescriptionItem>` per field (D70). Renders `<dl>`; each item is a `<div><dt/><dd/></div>` group, which is the HTML5 grouping element, so the term/value association survives.
35
39
  - `stacked` (default) puts the term above its value; `inline` is a two-column grid and is what a detail drawer wants. This is the body of the `detail-drawer` pattern — do not hand-roll a `<dl>`.
@@ -58,7 +62,7 @@
58
62
  - `<Table>` renders `<table>` and is **controlled-only** — it holds no state (D62). Sorting is `sort={{key, direction}}` + `onSortChange`, which is called with the **next** state, already toggled — store it as given (a fresh column arrives `asc`; an active `asc` emits `desc`); selection is `selected` (a `ReadonlySet<string>` keyed by each `<TableRow rowId>`) + `onSelectionChange`. `sortable` and `selectable` only enable the affordances. `size` is `32 | 40 | 48` px (default 40) and `stickyHeader` pins the header. It does no filtering, sorting or slicing of rows — the consumer does that.
59
63
  - `<TableHead>`, `<TableBody>`, `<TableRow>` render `<thead>`, `<tbody>`, `<tr>`. `<TableHeaderCell>` renders `<th scope="col">`, taking `sortKey` to become sortable and putting `aria-sort` on the `<th>`. `<TableCell>` renders `<td>`. Both cells take `numeric`, which right-aligns **and** renders tabular figures.
60
64
  - `<TableCaption detail="Rows 51–100 of more than 100,000">Applications</TableCaption>` renders `<caption>` as the table's first child — its visible name, plus a `detail` line for the range (D85). For a token-paged list give it `tabIndex={-1}` and move focus to it (through its `ref`) after a page change, so the new range is read. `<TableCell colSpan={n}>` spans an empty-state row; `<TableCell rowHeader>` renders `<th scope="row">` for the cell that names its row. Every family member spreads its remaining attributes onto its element (`aria-busy` on `TableBody` while a page loads, `aria-label`, `id`, `data-*`) and takes a `ref`; its own attributes (`data-size`, `scope`, `aria-sort`) win.
61
- - Selecting rows: give each `<TableRow>` a `rowId` and a `selectLabel` — the row checkbox has no visible label, so `selectLabel` is its accessible name. `<TableHead>` grows the select-all checkbox automatically; do not add one. Consult dist/patterns.json for the `data-table` pattern.
65
+ - Selecting rows: give each `<TableRow>` a `rowId` and a `selectLabel` — the row checkbox has no visible label, so `selectLabel` is its accessible name. `<TableHead>` grows the select-all checkbox automatically; do not add one. Outside a Table, `<Checkbox indeterminate>` shows the mixed state (D103): it sets the DOM property (exposed as aria-checked="mixed") on every render while passed, and draws a dash. Consult dist/patterns.json for the `data-table` pattern.
62
66
 
63
67
  ## Pagination and CursorPagination
64
68
  - `<Pagination page={n} pageCount={total} onPageChange={...}>`: a numbered pager with ellipsis truncation (`‹ 1 … 4 5 6 … 13 ›`), built from Button/IconButton (D63). `siblingCount` (default 1) sets how many pages flank the current one before truncating; `aria-current="page"` marks the active page and the ellipsis is inert. `page` outside `[1, pageCount]` (including non-finite values) is clamped for rendering and warns in development (D78).
@@ -67,6 +71,7 @@
67
71
 
68
72
  ## Dialog, and drawers (there is no Drawer component)
69
73
  - `<Dialog open onClose={(reason) => …} title footer width={400|560|720} dismissible>`: modal on the native `<dialog>` top layer. **Controlled-only** (D50) — every dismissal path (`"esc"`, `"backdrop"`, `"close-button"`) only *reports* via `onClose(reason)`; the consumer flips `open`. `dismissible={false}` swallows Esc and backdrop, leaving the footer as the only exit.
74
+ - **A consequential confirmation** (D101): `<Dialog dismissible={false} closeOnEscape initialFocus={cancelRef} footer={<><Button ref={cancelRef}>Cancel</Button><Button variant="danger">Delete</Button></>}>`. Focus starts on Cancel, Escape reports `onClose("esc")`, and there is no close button or backdrop dismissal. `initialFocus` takes a ref and is focused on every open, after the platform's own focusing; React's `autoFocus` does not work inside a closed `<dialog>`. `closeOnEscape` defaults to `dismissible`. `closeLabel="Close"` gives the close button visible text instead of the icon.
70
75
  - **A drawer / side sheet is `<Dialog placement="inline-end">`, not a separate component (D66).** `placement` is `center | inline-start | inline-end`; the `inline-*` values pin the panel full-height to that edge. Do not import `Drawer` — it does not exist and never will. `width` is then the drawer's width; the height is always the viewport.
71
76
  - Placement changes position and nothing else: modality, the focus trap, `aria-modal`, focus restore and the dismissal reasons are identical. Logical (`inline-*`, not left/right), so RTL flips for free. Consult dist/patterns.json for the `detail-drawer` pattern.
72
77
 
@@ -106,18 +111,20 @@
106
111
  - `TabList` requires `aria-label`. The active panel is itself a tab stop, so a panel with no focusable content is still reachable.
107
112
 
108
113
  ## Menu family (4)
109
- - `<Menu open onClose={(reason) => …} trigger={<IconButton …/>} placement="bottom-start|bottom-end|top-start|top-end" aria-label="…">`: action menu on the native Popover API — top layer and light dismiss come from the platform, roving keyboard and dismissal reasons from Psi (D53). **Controlled-only** like Dialog: `onClose(reason)` reports `"esc" | "outside" | "item-select"` and the consumer flips `open`. Compose `<MenuItem onSelect>` and `<MenuSeparator>`; the trigger needs an accessible name, so an icon-only trigger is `<IconButton aria-label>`.
114
+ - `<Menu open onClose={(reason) => …} trigger={<IconButton …/>} placement="bottom-start|bottom-end|top-start|top-end" aria-label="…">`: action menu on the native Popover API — top layer and light dismiss come from the platform, roving keyboard and dismissal reasons from Psi (D53). **Controlled-only** like Dialog: `onClose(reason)` reports `"esc" | "outside" | "item-select" | "tab"` and the consumer flips `open`. The menu-button keyboard is complete (D102): the trigger carries `aria-controls`; Arrow Down / Arrow Up on the closed trigger open it on the first / last item (Menu clicks the trigger, so the trigger's own `onClick` must toggle `open`); Tab reports `"tab"` and lets focus move on. Compose `<MenuItem onSelect>` and `<MenuSeparator>`; the trigger needs an accessible name, so an icon-only trigger is `<IconButton aria-label>`.
110
115
  - `<MenuText>` is a line of text that is not an action (D99), such as a build identifier: inside the menu with no role, in the secondary foreground, never focused, and skipped by the arrows, Home, End and typeahead. It is never `aria-hidden`. To have it spoken when the menu opens, give it an `id` and pass that id as Menu's `aria-describedby` (off by default). Consult dist/patterns.json for `account-menu`.
111
116
  - Many menus, one state: for a row-actions column, hold a single `openMenuId` and render each row's Menu with `open={openMenuId === row.id}`, closing with `onClose={() => setOpenMenuId(null)}`. Do not give each row its own boolean. This is the shape D58 fixed a real dismissal bug in — switching directly between two menus left both closed, because the platform light-dismisses the first before the consumer's click handler runs.
112
117
 
113
118
  ## Compositions (recipes for what has no component yet)
114
119
 
120
+ - `<Textarea maxLength={280}>` is a multi-line text field (D104): the Input recipe on a native `<textarea>`, wired by a Field like Input. `minLength`/`maxLength` are native; with `maxLength` a counter under it shows `{length} / {maxLength}` — not a live region, read with the field through aria-describedby (`showCounter={false}` hides it). No `size`: its height is `rows` (default 3).
121
+ - `<RadioGroup value onValueChange><Radio value="a">A</Radio>…</RadioGroup>` (D104): native radios sharing one name, so the browser supplies Tab and the arrow keys. Put it in `<Field group label required error>`: the fieldset and legend name the group and RadioGroup adds no role; standalone it is `role="radiogroup"` and needs `aria-label`. A required or invalid Field makes every radio `required` and `aria-invalid`; an invalid group Field also makes every `Checkbox` `aria-invalid` (not `required`), and an unchecked, `aria-invalid` box or circle outlines in the field error colour (D108). `orientation="horizontal"` lays them in a row. Consult dist/patterns.json for `feedback-form`.
115
122
  - Form field: wrap the label, control, and message with `<Field label description error required>{control}</Field>` — label association (htmlFor/id), the description/error message line (swaps to error, aria-live="polite"; `announce={false}` drops the live region for an app that routes every announcement through one announcer of its own — the message still describes the control, D81), and aria-describedby/aria-invalid wiring onto a nested Input/Select are automatic (D49). `required` marks the label with an asterisk; `requiredText="(Required)"` states it in a word instead, the label's colour, aria-hidden because the control's `required` is the signal (D84). A control Psi did not write joins a Field with `const field = useFieldControl()` spread onto its focusable element — it returns `id`, `aria-labelledby` (a `<label for>` names only a labelable element, and a custom control is usually a div), `aria-describedby`, `aria-invalid`, `aria-required` and `required` as the Field sets them, and `{}` outside a Field (D84); the element needs a role that admits aria-required, such as combobox. `group` mode renders fieldset/legend for self-labeled controls (Checkbox/Switch). Standalone Input/Select used outside Field still need `aria-invalid` and `aria-describedby` paired manually. Spacing: `psi-gap-24` between fields, `psi-gap-12` for toggle groups, `psi-gap-8` for button rows and label+Tag rows.
116
123
  - Stacks/rows: `.psi-gap-*` utilities set only the gap — they do not create a flex/grid container. Pair them with `display: flex` (column for stacks, row for button groups).
117
124
  - Page-level spacing: the form scale above (24/12/8) governs controls inside a form, not page layout. For layout use `psi-gap-32` between sections of a page, `psi-gap-24` between cards or panels in a grid, `psi-py-32` for a section's vertical padding, and `.psi-container` for the page's max-width and gutters (it is in utilities.css, not components.css). Marketing-scale rhythm is app-level and deliberately not tokenized — the system stops at the container.
118
125
  - Utility classes: families are `psi-gap-*`, `psi-p-*`/`psi-px-*`/`psi-py-*`, `psi-m-*`/`psi-mx-*`/`psi-my-*` (all on the spacing scale), `psi-text-*` and `psi-display-*` (typography), `psi-fg-*` (foreground colour, one per fg token: `psi-fg-primary`, `psi-fg-secondary`, `psi-fg-on-accent`, … — `color: var(--psi-fg-<role>)`) (D94), plus `.psi-tabular`, `.psi-container`, `.psi-media-tint` and `.psi-sr-only` (hides content visually while keeping it in the accessibility tree). Scaled utility families set one property each and create no layout context — pair `psi-gap-*` with `display: flex`; the bare/fixed utilities (`.psi-container`, `.psi-media-tint`, `.psi-sr-only`) set several. Use `psi-m-0` to kill a UA margin rather than an inline style. A utility on a component root beats the component's own value (D94): `<Tabs className="psi-gap-24">` gets a 24px gap. The exact roster is `@handamade/psi-tokens/guidance.json` → `utilities.classes`.
119
126
  - Native pass-through: components spread unlisted props onto their underlying element (Input → `<input>`, Select → `<select>`, Button → `<button>`/`<a>`), so `value`, `onChange`, `type`, `id`, `autoComplete`, `checked` etc. all work even though manifest.json lists only the component-specific props. Exception: Tooltip takes no host props — put handlers/attributes on its trigger child.
120
- - Theming, programmatic: the standard setup is `data-psi-theme` on `<html>`. From JS, set it once at app init: `document.documentElement.dataset.psiTheme = "dark"` (React: in a root-level effect). Theme CSS does NOT paint the page background — paint `background: var(--psi-bg-primary)` at your app root yourself. For a themed subtree, set `data-psi-theme` on a wrapper and paint its background the same way; brand font combos do not reach nested subtrees (see guidance.fonts.scope).
127
+ - Theming, programmatic: the standard setup is `data-psi-theme` on `<html>`. From JS, set it once at app init: `document.documentElement.dataset.psiTheme = "dark"` (React: in a root-level effect). Theme CSS does NOT paint the page background or set its font — at your app root set `background: var(--psi-bg-primary)` and `color: var(--psi-fg-primary)` yourself, and `font: var(--psi-text-14-20-regular)` on `body`, in `@layer psi.base` (D107). Never set a font size on `html`: Psi's scales are rem, so it would resize every control, gap and radius. Components set their own type, but text you place in a Panel, Dialog, Card or tab panel inherits the page's, which is the browser's serif until you set it. Native `button`/`input`/`select`/`textarea` need `font: inherit` in the same layer. For a themed subtree, set `data-psi-theme` on a wrapper and paint its background the same way; brand font combos do not reach nested subtrees (see guidance.fonts.scope).
121
128
  - Size selection: 32 is the default (compact UI); 40 for comfortable forms and marketing pages; 24 for inline/table-row actions; 48 for hero CTAs.
122
129
  - Tags & the accent rule (D40): Tags are passive labels — they do NOT count against "one accent per visual group" (that rule governs buttons/CTAs). Badge mapping: highlight (e.g. a plan badge) → `accent-subtle`; meta → `neutral-subtle`; status → `success`/`warning`/`danger`. On Tag, `subtle` is a boolean prop — `accent-subtle` is spelled `variant="accent" subtle` (Tag's variant union has no `-subtle` entries).
123
130
  - CSS import order: all five DS stylesheets are order-independent — base.css and @handamade/psi-react/styles both open with an explicit `@layer psi.base, psi.theme, psi.components, psi.utilities;` statement. Recommended listing for readability: base → theme → components → utilities → @handamade/psi-react/styles.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@handamade/psi-react",
3
- "version": "0.25.0",
3
+ "version": "0.27.0",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -47,7 +47,7 @@
47
47
  "tsx": "^4.22.4",
48
48
  "vite": "^6.0.0",
49
49
  "vitest": "^3.2.6",
50
- "@handamade/psi-tokens": "0.25.0"
50
+ "@handamade/psi-tokens": "0.27.0"
51
51
  },
52
52
  "scripts": {
53
53
  "build": "vite build && tsc -p tsconfig.build.json && tsx scripts/emit-styles-dts.ts && tsx scripts/emit-manifest.ts && tsx scripts/emit-patterns.ts && tsx scripts/emit-docs.ts",