@juwel-development/design-system 3.9.1 → 3.10.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.
- package/README.md +9 -298
- package/dist/design-system.js +1026 -582
- package/dist/index.css +1 -1
- package/dist/types/Arrangement/ColumnLayout/ColumnLayout.d.ts +92 -0
- package/dist/types/Arrangement/ColumnLayout/ColumnLayoutCompositionError.d.ts +3 -0
- package/dist/types/Arrangement/ColumnLayout/ColumnLayoutConfigurationError.d.ts +3 -0
- package/dist/types/Arrangement/FieldRow/FieldRow.d.ts +87 -0
- package/dist/types/Arrangement/FieldRow/FieldRowCompositionError.d.ts +3 -0
- package/dist/types/Arrangement/FieldRow/FieldRowConfigurationError.d.ts +3 -0
- package/dist/types/Arrangement/FieldRow/IControlEdge.d.ts +6 -0
- package/dist/types/Arrangement/FieldRow/alignControlEdges.d.ts +7 -0
- package/dist/types/Display/Box/Box.d.ts +41 -0
- package/dist/types/Display/Brandmark/Brandmark.d.ts +1 -1
- package/dist/types/Display/DefinitionList/DefinitionList.d.ts +59 -9
- package/dist/types/Display/DefinitionList/DefinitionListConfigurationError.d.ts +3 -0
- package/dist/types/Display/Figure/Figure.d.ts +2 -2
- package/dist/types/Display/Icon/Icon.d.ts +26 -0
- package/dist/types/Display/Table/Table.d.ts +118 -8
- package/dist/types/Display/Table/TableConfigurationError.d.ts +3 -0
- package/dist/types/Display/Typography/Eyebrow/Eyebrow.d.ts +1 -1
- package/dist/types/Display/Typography/H1/H1.d.ts +3 -2
- package/dist/types/Display/Typography/H2/H2.d.ts +3 -2
- package/dist/types/Display/Typography/H3/H3.d.ts +3 -2
- package/dist/types/Display/Typography/H4/H4.d.ts +3 -2
- package/dist/types/Display/Typography/H5/H5.d.ts +3 -2
- package/dist/types/Display/Typography/H6/H6.d.ts +3 -2
- package/dist/types/Display/Typography/Note/Note.d.ts +1 -1
- package/dist/types/Display/Typography/P/P.d.ts +3 -2
- package/dist/types/Display/Typography/Prose/Prose.d.ts +1 -1
- package/dist/types/Interaction/Button/Button.d.ts +23 -3
- package/dist/types/Interaction/Tabs/Tabs.d.ts +31 -6
- package/dist/types/Layout/Header/Header.d.ts +67 -8
- package/dist/types/Layout/ScrollContainer/ScrollContainer.d.ts +37 -0
- package/dist/types/Layout/Section/Section.d.ts +1 -1
- package/dist/types/Layout/Sidebar/Sidebar.d.ts +4 -0
- package/dist/types/Theme/Palette.d.ts +31 -7
- package/dist/types/index.d.ts +6 -0
- package/package.json +1 -1
- package/src/Arrangement/ColumnLayout/ColumnLayout.tsx +249 -0
- package/src/Arrangement/ColumnLayout/ColumnLayoutCompositionError.ts +8 -0
- package/src/Arrangement/ColumnLayout/ColumnLayoutConfigurationError.ts +6 -0
- package/src/Arrangement/FieldRow/FieldRow.tsx +313 -0
- package/src/Arrangement/FieldRow/FieldRowCompositionError.ts +6 -0
- package/src/Arrangement/FieldRow/FieldRowConfigurationError.ts +6 -0
- package/src/Arrangement/FieldRow/IControlEdge.ts +6 -0
- package/src/Arrangement/FieldRow/alignControlEdges.ts +35 -0
- package/src/Display/Box/Box.tsx +77 -0
- package/src/Display/Checklist/Checklist.tsx +1 -1
- package/src/Display/DefinitionList/DefinitionList.tsx +164 -22
- package/src/Display/DefinitionList/DefinitionListConfigurationError.ts +6 -0
- package/src/Display/Icon/Icon.tsx +63 -0
- package/src/Display/Table/Table.tsx +434 -44
- package/src/Display/Table/TableConfigurationError.ts +6 -0
- package/src/Display/Typography/H1/H1.tsx +3 -2
- package/src/Display/Typography/H2/H2.tsx +3 -2
- package/src/Display/Typography/H3/H3.tsx +3 -2
- package/src/Display/Typography/H4/H4.tsx +3 -2
- package/src/Display/Typography/H5/H5.tsx +3 -2
- package/src/Display/Typography/H6/H6.tsx +3 -2
- package/src/Display/Typography/P/P.tsx +3 -2
- package/src/Display/Typography/Prose/Prose.tsx +3 -3
- package/src/Interaction/Button/Button.tsx +45 -17
- package/src/Interaction/Input/Input.tsx +1 -1
- package/src/Interaction/MultiSelect/MultiSelect.tsx +1 -1
- package/src/Interaction/NumberInput/NumberInput.tsx +1 -1
- package/src/Interaction/Select/Select.tsx +1 -1
- package/src/Interaction/Tabs/Tabs.tsx +38 -11
- package/src/Interaction/TextArea/TextArea.tsx +1 -1
- package/src/Layout/Dialog/Dialog.tsx +4 -3
- package/src/Layout/Header/Header.tsx +139 -39
- package/src/Layout/PageHead/PageHead.tsx +6 -5
- package/src/Layout/ScrollContainer/ScrollContainer.tsx +149 -0
- package/src/Layout/Sidebar/Sidebar.tsx +8 -4
- package/src/Theme/Palette.ts +37 -9
- package/src/Theme/renderTokens.ts +101 -5
- package/src/index.ts +6 -0
- package/src/tokens.css +68 -4
- package/src/tokens.dark.css +66 -4
- package/src/tokens.light.css +64 -2
package/dist/index.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
|
|
2
|
-
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-content:""}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-serif:ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-slate-200:oklch(92.9% .013 255.508);--color-slate-900:oklch(20.8% .042 265.755);--color-stone-50:oklch(98.5% .001 106.423);--color-white:#fff;--spacing:.25rem;--container-5xl:64rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-9xl:8rem;--text-9xl--line-height:1;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wider:.05em;--radius-md:.375rem;--radius-lg:.5rem;--aspect-video:16 / 9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-surface:var(--color-surface);--color-foreground:var(--color-foreground);--color-muted:var(--color-muted);--color-border:var(--color-border);--color-control-border:var(--color-control-border);--color-rule:var(--color-rule);--color-backing:var(--color-backing);--color-scrim:var(--color-scrim);--color-meter-fill:var(--color-meter-fill);--color-meter-track:var(--color-meter-track);--color-primary:var(--color-primary);--color-primary-hover:var(--color-primary-hover);--color-primary-foreground:var(--color-primary-foreground);--color-secondary:var(--color-secondary);--color-secondary-hover:var(--color-secondary-hover);--color-secondary-foreground:var(--color-secondary-foreground);--color-disabled:var(--color-disabled);--color-disabled-hover:var(--color-disabled-hover);--color-focus-ring:var(--color-focus-ring);--color-link:var(--color-link);--color-success:var(--color-success);--color-warning:var(--color-warning);--color-error:var(--color-error);--color-info:var(--color-info);--font-primary:inherit;--font-secondary:inherit;--text-display:clamp(3rem, 7vw, 6rem);--leading-display:1.05;--text-title:clamp(2.25rem, 5vw, 4.25rem);--leading-title:1.1;--text-subtitle:clamp(1.5rem, 3vw, 2.25rem);--leading-subtitle:1.2;--text-lede:1.25rem;--leading-lede:1.4;--text-body:1.0625rem;--leading-body:1.6;--text-small:.9375rem;--text-label:.8125rem;--leading-label:1.5;--text-dialog-title:clamp(1.5rem, 3vw, 2.25rem);--leading-dialog-title:1.2;--tracking-label:.14em;--tracking-optical:-.02em;--aspect-portrait:4 / 5;--aspect-square:1 / 1;--aspect-landscape:3 / 2;--aspect-wide:16 / 9}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:0}.right-0{right:0}.left-0{left:0}.isolate{isolation:isolate}.z-10{z-index:10}.container{width:100%}@media (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (width>=96rem){.container{max-width:96rem}}.-m-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]{margin:calc(calc(var(--focus-ring-width) + var(--focus-ring-offset)) * -1)}.m-0{margin:0}.m-\[calc\(-1\*\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\)\]{margin:calc(-1 * (var(--focus-ring-width) + var(--focus-ring-offset)))}.m-auto{margin:auto}.mx-auto{margin-inline:auto}.my-auto{margin-block:auto}.mt-\[0\.3rem\]{margin-top:.3rem}.mt-\[0\.35em\]{margin-top:.35em}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.table{display:table}.aspect-landscape{aspect-ratio:var(--aspect-landscape)}.aspect-portrait{aspect-ratio:var(--aspect-portrait)}.aspect-square{aspect-ratio:var(--aspect-square)}.aspect-wide{aspect-ratio:var(--aspect-wide)}.size-3{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-\[var\(--choice-marker-dot-size\)\]{width:var(--choice-marker-dot-size);height:var(--choice-marker-dot-size)}.size-\[var\(--choice-marker-size\)\]{width:var(--choice-marker-size);height:var(--choice-marker-size)}.h-12{height:calc(var(--spacing) * 12)}.h-\[calc\(100dvh-2\*var\(--space-region\)\)\]{height:calc(100dvh - 2 * var(--space-region))}.h-\[var\(--meter-track-thickness\)\]{height:var(--meter-track-thickness)}.h-\[var\(--slider-thumb-size\)\]{height:var(--slider-thumb-size)}.h-full{height:100%}.max-h-\[calc\(100dvh-2\*var\(--space-region\)\)\]{max-height:calc(100dvh - 2 * var(--space-region))}.max-h-\[var\(--multiselect-surface-max-height\,50vh\)\]{max-height:var(--multiselect-surface-max-height,50vh)}.max-h-none{max-height:none}.min-h-0{min-height:0}.min-h-24{min-height:calc(var(--spacing) * 24)}.min-h-\[calc\(var\(--text-body\)\*var\(--leading-body\)\)\]{min-height:calc(var(--text-body) * var(--leading-body))}.min-h-\[calc\(var\(--text-label\)\*var\(--leading-label\)\)\]{min-height:calc(var(--text-label) * var(--leading-label))}.min-h-\[var\(--cover-height\)\]{min-height:var(--cover-height)}.min-h-\[var\(--fold-height\)\]{min-height:var(--fold-height)}.w-\[32rem\]{width:32rem}.w-\[360px\]{width:360px}.w-\[calc\(100vw-2\*var\(--gutter\)\)\]{width:calc(100vw - 2 * var(--gutter))}.w-\[calc\(var\(--meter-level\)\*100\%\)\]{width:calc(var(--meter-level) * 100%)}.w-\[var\(--measure-action\)\]{width:var(--measure-action)}.w-full{width:100%}.\[max-width\:var\(--measure-display\)\]{max-width:var(--measure-display)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-\[12rem\]{max-width:12rem}.max-w-\[calc\(100vw-2\*var\(--gutter\)\)\]{max-width:calc(100vw - 2 * var(--gutter))}.max-w-\[var\(--measure\)\]{max-width:var(--measure)}.max-w-\[var\(--measure-display\)\]{max-width:var(--measure-display)}.max-w-\[var\(--measure-wide\)\]{max-width:var(--measure-wide)}.max-w-full{max-width:100%}.max-w-none{max-width:none}.min-w-0{min-width:0}.min-w-42{min-width:calc(var(--spacing) * 42)}.min-w-\[var\(--control-min-width\)\]{min-width:var(--control-min-width)}.min-w-\[var\(--standing-min-width\)\]{min-width:var(--standing-min-width)}.flex-1{flex:1}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.scroll-p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]{scroll-padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}.list-none{list-style-type:none}.appearance-none{appearance:none}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-1{gap:var(--spacing)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-\[var\(--space-region\)\]{gap:var(--space-region)}.gap-\[var\(--space-stack\)\]{gap:var(--space-stack)}:where(.space-y-10>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-12>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-\[var\(--space-region\)\]{column-gap:var(--space-region)}.gap-x-\[var\(--space-stack\)\]{column-gap:var(--space-stack)}.gap-y-\[var\(--space-stack\)\]{row-gap:var(--space-stack)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded-\[var\(--radius-control\)\]{border-radius:var(--radius-control)}.rounded-\[var\(--radius-dialog\)\]{border-radius:var(--radius-dialog)}.rounded-\[var\(--radius-…\)\]{border-radius:var(--radius-…)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-\[length\:var\(--tab-marker-thickness\)\]{border-bottom-style:var(--tw-border-style);border-bottom-width:var(--tab-marker-thickness)}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-none{--tw-border-style:none;border-style:none}.border-solid{--tw-border-style:solid;border-style:solid}.border-border{border-color:var(--color-border)}.border-control-border{border-color:var(--color-control-border)}.border-primary{border-color:var(--color-primary)}.border-rule{border-color:var(--color-rule)}.border-slate-200{border-color:var(--color-slate-200)}.border-transparent{border-color:#0000}.bg-\[color-mix\(in_oklab\,var\(--color-meter-fill\)_calc\(var\(--meter-level\)\*100\%\)\,var\(--color-error\)\)\]{background-color:var(--color-meter-fill)}@supports (color:color-mix(in lab, red, red)){.bg-\[color-mix\(in_oklab\,var\(--color-meter-fill\)_calc\(var\(--meter-level\)\*100\%\)\,var\(--color-error\)\)\]{background-color:color-mix(in oklab,var(--color-meter-fill) calc(var(--meter-level) * 100%),var(--color-error))}}.bg-backing{background-color:var(--color-backing)}.bg-foreground{background-color:var(--color-foreground)}.bg-meter-fill{background-color:var(--color-meter-fill)}.bg-meter-track{background-color:var(--color-meter-track)}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.bg-stone-50{background-color:var(--color-stone-50)}.bg-surface{background-color:var(--color-surface)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.object-cover{object-fit:cover}.object-bottom{object-position:bottom}.object-center{object-position:center}.object-left{object-position:left}.object-right{object-position:right}.object-top{object-position:top}.p-0{padding:0}.p-1{padding:var(--spacing)}.p-4{padding:calc(var(--spacing) * 4)}.p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]{padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-\[var\(--gutter\)\]{padding-inline:var(--gutter)}.px-\[var\(--space-region\)\]{padding-inline:var(--space-region)}.px-\[var\(--tab-inset-inline\)\]{padding-inline:var(--tab-inset-inline)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-12{padding-block:calc(var(--spacing) * 12)}.py-\[var\(--space-band\)\]{padding-block:var(--space-band)}.py-\[var\(--space-collection-item\)\]{padding-block:var(--space-collection-item)}.py-\[var\(--space-region\)\]{padding-block:var(--space-region)}.py-\[var\(--tab-inset-block\)\]{padding-block:var(--tab-inset-block)}.pt-1{padding-top:var(--spacing)}.pt-\[var\(--space-region\)\]{padding-top:var(--space-region)}.pr-0\.5{padding-right:calc(var(--spacing) * .5)}.pb-1{padding-bottom:var(--spacing)}.pb-\[var\(--space-region\)\]{padding-bottom:var(--space-region)}.pl-2{padding-left:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-start{text-align:start}.font-mono{font-family:var(--font-mono)}.font-primary{font-family:var(--font-primary)}.font-sans{font-family:var(--font-sans)}.font-secondary{font-family:var(--font-secondary)}.font-serif{font-family:var(--font-serif)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-9xl{font-size:var(--text-9xl);line-height:var(--tw-leading,var(--text-9xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-body{font-size:var(--text-body)}.text-dialog-title{font-size:var(--text-dialog-title)}.text-display{font-size:var(--text-display)}.text-label{font-size:var(--text-label)}.text-lede{font-size:var(--text-lede)}.text-small{font-size:var(--text-small)}.text-subtitle{font-size:var(--text-subtitle)}.text-title{font-size:var(--text-title)}.leading-body{--tw-leading:var(--leading-body);line-height:var(--leading-body)}.leading-dialog-title{--tw-leading:var(--leading-dialog-title);line-height:var(--leading-dialog-title)}.leading-display{--tw-leading:var(--leading-display);line-height:var(--leading-display)}.leading-label{--tw-leading:var(--leading-label);line-height:var(--leading-label)}.leading-lede{--tw-leading:var(--leading-lede);line-height:var(--leading-lede)}.leading-subtitle{--tw-leading:var(--leading-subtitle);line-height:var(--leading-subtitle)}.leading-title{--tw-leading:var(--leading-title);line-height:var(--leading-title)}.font-\[500\]{--tw-font-weight:500;font-weight:500}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-label{--tw-tracking:var(--tracking-label);letter-spacing:var(--tracking-label)}.tracking-optical{--tw-tracking:var(--tracking-optical);letter-spacing:var(--tracking-optical)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-nowrap{text-wrap:nowrap}.\[overflow-wrap\:anywhere\]{overflow-wrap:anywhere}.text-\[var\(--text-small\)\]{color:var(--text-small)}.text-error{color:var(--color-error)}.text-foreground{color:var(--color-foreground)}.text-info{color:var(--color-info)}.text-inherit{color:inherit}.text-link{color:var(--color-link)}.text-muted{color:var(--color-muted)}.text-primary-foreground{color:var(--color-primary-foreground)}.text-secondary-foreground{color:var(--color-secondary-foreground)}.text-slate-900{color:var(--color-slate-900)}.text-success{color:var(--color-success)}.text-warning{color:var(--color-warning)}.uppercase{text-transform:uppercase}.ordinal{--tw-ordinal:ordinal;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.no-underline{text-decoration-line:none}.underline{text-decoration-line:underline}.decoration-\[length\:var\(--underline-thickness\)\]{text-decoration-thickness:var(--underline-thickness)}.underline-offset-\[var\(--underline-offset\)\]{text-underline-offset:var(--underline-offset)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[var\(--elevation-floating\)\]{--tw-shadow:var(--elevation-floating);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.outline-offset-\[var\(--focus-ring-offset\)\]{outline-offset:var(--focus-ring-offset)}.outline-focus-ring{outline-color:var(--color-focus-ring)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-\[var\(--motion-duration-color\)\]{--tw-duration:var(--motion-duration-color);transition-duration:var(--motion-duration-color)}.outline-none{--tw-outline-style:none;outline-style:none}.select-all{-webkit-user-select:all;user-select:all}.select-none{-webkit-user-select:none;user-select:none}.group-disabled\/choice\:text-muted:is(:where(.group\/choice):disabled *){color:var(--color-muted)}.group-aria-checked\/option\:border-foreground:is(:where(.group\/option)[aria-checked=true] *){border-color:var(--color-foreground)}.group-data-\[disabled\]\/field\:text-muted:is(:where(.group\/field)[data-disabled] *){color:var(--color-muted)}.backdrop\:bg-scrim::backdrop{background-color:var(--color-scrim)}.backdrop\:\[backdrop-filter\:blur\(var\(--scrim-blur\)\)\]::backdrop{-webkit-backdrop-filter:blur(var(--scrim-blur));backdrop-filter:blur(var(--scrim-blur))}.before\:mt-\[0\.35em\]:before{content:var(--tw-content);margin-top:.35em}.before\:size-\[calc\(var\(--tick-length\)\*0\.7\)\]:before{content:var(--tw-content);width:calc(var(--tick-length) * .7);height:calc(var(--tick-length) * .7)}.before\:shrink-0:before{content:var(--tw-content);flex-shrink:0}.before\:rotate-45:before{content:var(--tw-content);rotate:45deg}.before\:bg-\[var\(--color-rule\)\]:before{content:var(--tw-content);background-color:var(--color-rule)}.before\:content-\[\'\'\]:before{--tw-content:"";content:var(--tw-content)}.before\:\[border-right\:var\(--tick-thickness\)_solid_var\(--color-rule\)\]:before{content:var(--tw-content);border-right:var(--tick-thickness) solid var(--color-rule)}.before\:\[border-top\:var\(--tick-thickness\)_solid_var\(--color-rule\)\]:before{content:var(--tw-content);border-top:var(--tick-thickness) solid var(--color-rule)}.first\:border-t:first-child{border-top-style:var(--tw-border-style);border-top-width:1px}.first\:pl-0:first-child{padding-left:0}.last\:pr-0:last-child{padding-right:0}.open\:flex:is([open],:popover-open,:open){display:flex}.open\:flex-col:is([open],:popover-open,:open){flex-direction:column}@media (hover:hover){.hover\:border-muted:hover{border-color:var(--color-muted)}.hover\:bg-backing:hover{background-color:var(--color-backing)}.hover\:bg-primary-hover:hover{background-color:var(--color-primary-hover)}.hover\:bg-secondary-hover:hover{background-color:var(--color-secondary-hover)}.hover\:text-sm:hover{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.hover\:text-foreground:hover{color:var(--color-foreground)}.hover\:underline:hover{text-decoration-line:underline}.hover\:decoration-\[length\:var\(--underline-thickness\)\]:hover{text-decoration-thickness:var(--underline-thickness)}.hover\:decoration-\[length\:var\(--underline-thickness-hover\)\]:hover{text-decoration-thickness:var(--underline-thickness-hover)}.hover\:underline-offset-\[var\(--underline-offset\)\]:hover{text-underline-offset:var(--underline-offset)}.hover\:opacity-90:hover{opacity:.9}}.focus-visible\:outline:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.focus-visible\:outline-\[length\:var\(--focus-ring-width\)\]:focus-visible{outline-style:var(--tw-outline-style);outline-width:var(--focus-ring-width)}.focus-visible\:outline-\[length\:…\]:focus-visible{outline-style:var(--tw-outline-style);outline-width:…}.focus-visible\:outline-focus-ring:focus-visible{outline-color:var(--color-focus-ring)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:border-disabled:disabled{border-color:var(--color-disabled)}.disabled\:bg-disabled:disabled{background-color:var(--color-disabled)}.disabled\:text-muted:disabled{color:var(--color-muted)}@media (hover:hover){.disabled\:hover\:bg-disabled-hover:disabled:hover{background-color:var(--color-disabled-hover)}.disabled\:hover\:text-muted:disabled:hover{color:var(--color-muted)}}.aria-checked\:border-foreground[aria-checked=true],.aria-selected\:border-foreground[aria-selected=true]{border-color:var(--color-foreground)}.aria-selected\:text-foreground[aria-selected=true]{color:var(--color-foreground)}.aria-\[invalid\=true\]\:border-error[aria-invalid=true]{border-color:var(--color-error)}.data-\[disabled\]\:border-disabled[data-disabled]{border-color:var(--color-disabled)}.data-\[disabled\]\:text-muted[data-disabled]{color:var(--color-muted)}.data-\[overflow\]\:invisible[data-overflow]{visibility:hidden}.data-\[overflow\]\:absolute[data-overflow]{position:absolute}.data-\[placement\=above\]\:bottom-full[data-placement=above]{bottom:100%}.data-\[placement\=above\]\:mb-1[data-placement=above]{margin-bottom:var(--spacing)}.data-\[placement\=below\]\:top-full[data-placement=below]{top:100%}.data-\[placement\=below\]\:mt-1[data-placement=below]{margin-top:var(--spacing)}@media (width>=40rem){.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}.sm\:py-2{padding-block:calc(var(--spacing) * 2)}}@media (width>=48rem){.md\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}@media (width>=64rem){.lg\:sticky{position:sticky}.lg\:top-6{top:calc(var(--spacing) * 6)}.lg\:max-w-\[var\(--measure-display\)\]{max-width:var(--measure-display)}.lg\:grid-cols-\[10rem_minmax\(0\,1fr\)\]{grid-template-columns:10rem minmax(0,1fr)}.lg\:grid-cols-\[12rem_minmax\(0\,1fr\)\]{grid-template-columns:12rem minmax(0,1fr)}.lg\:grid-cols-\[16rem_minmax\(0\,1fr\)\]{grid-template-columns:16rem minmax(0,1fr)}.lg\:flex-row{flex-direction:row}.lg\:items-baseline{align-items:baseline}.lg\:items-start{align-items:flex-start}.lg\:gap-x-12{column-gap:calc(var(--spacing) * 12)}}.\[\&_\[aria-current\=page\]\]\:text-foreground [aria-current=page]{color:var(--color-foreground)}.\[\&_caption\]\:pb-3 caption{padding-bottom:calc(var(--spacing) * 3)}.\[\&_caption\]\:text-left caption{text-align:left}.\[\&_caption\]\:font-secondary caption{font-family:var(--font-secondary)}.\[\&_caption\]\:text-label caption{font-size:var(--text-label)}.\[\&_caption\]\:tracking-label caption{--tw-tracking:var(--tracking-label);letter-spacing:var(--tracking-label)}.\[\&_caption\]\:text-muted caption{color:var(--color-muted)}.\[\&\+li\]\:border-t+li{border-top-style:var(--tw-border-style);border-top-width:1px}.\[\&\+li\]\:border-solid+li{--tw-border-style:solid;border-style:solid}.\[\&\+li\]\:border-border+li{border-color:var(--color-border)}.\[\&\:\:-moz-range-thumb\]\:size-\[var\(--slider-thumb-size\)\]::-moz-range-thumb{width:var(--slider-thumb-size);height:var(--slider-thumb-size)}.\[\&\:\:-moz-range-thumb\]\:rounded-\[var\(--radius-control\)\]::-moz-range-thumb{border-radius:var(--radius-control)}.\[\&\:\:-moz-range-thumb\]\:border-none::-moz-range-thumb{--tw-border-style:none;border-style:none}.\[\&\:\:-moz-range-thumb\]\:bg-foreground::-moz-range-thumb{background-color:var(--color-foreground)}.\[\&\:\:-moz-range-track\]\:h-\[var\(--slider-track-thickness\)\]::-moz-range-track{height:var(--slider-track-thickness)}.\[\&\:\:-moz-range-track\]\:rounded-\[var\(--radius-control\)\]::-moz-range-track{border-radius:var(--radius-control)}.\[\&\:\:-moz-range-track\]\:bg-control-border::-moz-range-track{background-color:var(--color-control-border)}.\[\&\:\:-webkit-slider-runnable-track\]\:h-\[var\(--slider-track-thickness\)\]::-webkit-slider-runnable-track{height:var(--slider-track-thickness)}.\[\&\:\:-webkit-slider-runnable-track\]\:rounded-\[var\(--radius-control\)\]::-webkit-slider-runnable-track{border-radius:var(--radius-control)}.\[\&\:\:-webkit-slider-runnable-track\]\:bg-control-border::-webkit-slider-runnable-track{background-color:var(--color-control-border)}.\[\&\:\:-webkit-slider-thumb\]\:mt-\[calc\(\(var\(--slider-track-thickness\)-var\(--slider-thumb-size\)\)\/2\)\]::-webkit-slider-thumb{margin-top:calc((var(--slider-track-thickness) - var(--slider-thumb-size)) / 2)}.\[\&\:\:-webkit-slider-thumb\]\:size-\[var\(--slider-thumb-size\)\]::-webkit-slider-thumb{width:var(--slider-thumb-size);height:var(--slider-thumb-size)}.\[\&\:\:-webkit-slider-thumb\]\:appearance-none::-webkit-slider-thumb{appearance:none}.\[\&\:\:-webkit-slider-thumb\]\:rounded-\[var\(--radius-control\)\]::-webkit-slider-thumb{border-radius:var(--radius-control)}.\[\&\:\:-webkit-slider-thumb\]\:bg-foreground::-webkit-slider-thumb{background-color:var(--color-foreground)}.\[\&\:disabled\:\:-moz-range-thumb\]\:bg-disabled:disabled::-moz-range-thumb{background-color:var(--color-disabled)}.\[\&\:disabled\:\:-moz-range-track\]\:bg-disabled:disabled::-moz-range-track{background-color:var(--color-disabled)}.\[\&\:disabled\:\:-webkit-slider-runnable-track\]\:bg-disabled:disabled::-webkit-slider-runnable-track{background-color:var(--color-disabled)}.\[\&\:disabled\:\:-webkit-slider-thumb\]\:bg-disabled:disabled::-webkit-slider-thumb{background-color:var(--color-disabled)}.\[\&\:has\(\+\[data-dialog-member\=description\]\)\]\:pb-0:has(+[data-dialog-member=description]){padding-bottom:0}.\[\&\:not\(\:first-child\)\]\:mt-\[var\(--space-stack\)\]:not(:first-child){margin-top:var(--space-stack)}.\[\&\:not\(\:first-child\)\]\:border-t:not(:first-child){border-top-style:var(--tw-border-style);border-top-width:1px}.\[\&\:not\(\:first-child\)\]\:border-solid:not(:first-child){--tw-border-style:solid;border-style:solid}.\[\&\:not\(\:first-child\)\]\:border-border:not(:first-child){border-color:var(--color-border)}.\[\&\:not\(\:first-child\)\]\:pt-\[var\(--space-stack\)\]:not(:first-child){padding-top:var(--space-stack)}.\[\&\:not\(\[data-notes\]\)\]\:overflow-x-auto:not([data-notes]){overflow-x:auto}.\[\&\:user-invalid\]\:border-error:user-invalid{border-color:var(--color-error)}@media (width>=64rem){.lg\:\[\&\>dd\]\:col-start-2>dd{grid-column-start:2}.lg\:\[\&\>dd\]\:row-start-1>dd{grid-row-start:1}}.\[\&\>div\:first-child\]\:border-b>div:first-child{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.\[\&\>div\:first-child\]\:border-solid>div:first-child{--tw-border-style:solid;border-style:solid}.\[\&\>div\:first-child\]\:border-border>div:first-child{border-color:var(--color-border)}.\[\&\>div\:first-child\]\:pb-\[var\(--space-stack\)\]>div:first-child{padding-bottom:var(--space-stack)}@media (width>=64rem){.lg\:\[\&\>div\:first-child\]\:border-r>div:first-child{border-right-style:var(--tw-border-style);border-right-width:1px}.lg\:\[\&\>div\:first-child\]\:border-b-0>div:first-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.lg\:\[\&\>div\:first-child\]\:pr-\[var\(--space-stack\)\]>div:first-child{padding-right:var(--space-stack)}.lg\:\[\&\>div\:first-child\]\:pb-0>div:first-child{padding-bottom:0}}.\[\&\>div\:first-child\>nav\]\:p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]>div:first-child>nav{padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}@media (width>=64rem){.lg\:\[\&\>div\:first-child\>nav\]\:sticky>div:first-child>nav{position:sticky}.lg\:\[\&\>div\:first-child\>nav\]\:top-0>div:first-child>nav{top:0}.lg\:\[\&\>div\:first-child\>nav\]\:max-h-\[min\(100dvh\,var\(--sidebar-scrollport-height\,100dvh\)\)\]>div:first-child>nav{max-height:min(100dvh, var(--sidebar-scrollport-height,100dvh))}.lg\:\[\&\>div\:first-child\>nav\]\:scroll-p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]>div:first-child>nav{scroll-padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}.lg\:\[\&\>div\:first-child\>nav\]\:overflow-y-auto>div:first-child>nav{overflow-y:auto}}.\[\&\>div\:first-child\>nav\>ul\]\:flex>div:first-child>nav>ul{display:flex}.\[\&\>div\:first-child\>nav\>ul\]\:flex-col>div:first-child>nav>ul{flex-direction:column}.\[\&\>div\:first-child\>nav\>ul\]\:gap-\[var\(--space-stack\)\]>div:first-child>nav>ul{gap:var(--space-stack)}@media (width>=64rem){.lg\:\[\&\>dt\]\:col-start-1>dt{grid-column-start:1}}.\[\&\>label\]\:font-secondary>label{font-family:var(--font-secondary)}.\[\&\>label\]\:text-body>label{font-size:var(--text-body)}.\[\&\>label\]\:font-medium>label{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.\[\&\>label\]\:text-foreground>label{color:var(--color-foreground)}.\[\&\>p\]\:font-secondary>p{font-family:var(--font-secondary)}.\[\&\>p\]\:text-small>p{font-size:var(--text-small)}.\[\&\>p\]\:text-muted>p{color:var(--color-muted)}.\[\&\>p\[data-error\]\]\:text-error>p[data-error]{color:var(--color-error)}.\[\&\>select\]\:block>select{display:block}.\[\&\>select\]\:w-full>select{width:100%}.\[\&\>select\]\:rounded-\[var\(--radius-control\)\]>select{border-radius:var(--radius-control)}.\[\&\>select\]\:border>select{border-style:var(--tw-border-style);border-width:1px}.\[\&\>select\]\:border-solid>select{--tw-border-style:solid;border-style:solid}.\[\&\>select\]\:border-control-border>select{border-color:var(--color-control-border)}.\[\&\>select\]\:bg-transparent>select{background-color:#0000}.\[\&\>select\]\:px-3>select{padding-inline:calc(var(--spacing) * 3)}.\[\&\>select\]\:py-2>select{padding-block:calc(var(--spacing) * 2)}.\[\&\>select\]\:font-primary>select{font-family:var(--font-primary)}.\[\&\>select\]\:text-body>select{font-size:var(--text-body)}.\[\&\>select\]\:text-foreground>select{color:var(--color-foreground)}.\[\&\>select\]\:outline-offset-\[var\(--focus-ring-offset\)\]>select{outline-offset:var(--focus-ring-offset)}.\[\&\>select\]\:outline-focus-ring>select{outline-color:var(--color-focus-ring)}.\[\&\>select\]\:transition-colors>select{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.\[\&\>select\]\:duration-\[var\(--motion-duration-color\)\]>select{--tw-duration:var(--motion-duration-color);transition-duration:var(--motion-duration-color)}.\[\&\>select\]\:focus-visible\:outline>select:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.\[\&\>select\]\:focus-visible\:outline-\[length\:var\(--focus-ring-width\)\]>select:focus-visible{outline-style:var(--tw-outline-style);outline-width:var(--focus-ring-width)}.\[\&\>select\]\:disabled\:cursor-not-allowed>select:disabled{cursor:not-allowed}.\[\&\>select\]\:disabled\:border-disabled>select:disabled{border-color:var(--color-disabled)}.\[\&\>select\]\:disabled\:text-muted>select:disabled{color:var(--color-muted)}.\[\&\>select\]\:aria-\[invalid\=true\]\:border-error>select[aria-invalid=true]{border-color:var(--color-error)}.\[\&\>select\:user-invalid\]\:border-error>select:user-invalid{border-color:var(--color-error)}.\[\&\>span\]\:font-secondary>span{font-family:var(--font-secondary)}.\[\&\>span\]\:text-small>span{font-size:var(--text-small)}.\[\&\>span\]\:text-muted>span{color:var(--color-muted)}.\[\&\>table\]\:w-full>table{width:100%}.\[\&\>table\]\:border-collapse>table{border-collapse:collapse}.\[\&\>table\]\:text-left>table{text-align:left}.\[\&\>table\>\*\:nth-child\(2\)\>tr\:first-child\]\:border-rule>table>:nth-child(2)>tr:first-child{border-color:var(--color-rule)}@media not all and (width>=48rem){.\[\&\[data-notes\=content\]_tbody\]\:max-md\:block[data-notes=content] tbody,.\[\&\[data-notes\=content\]_td\]\:max-md\:block[data-notes=content] td,.\[\&\[data-notes\=content\]_tfoot\]\:max-md\:block[data-notes=content] tfoot,.\[\&\[data-notes\=content\]_th\]\:max-md\:block[data-notes=content] th,.\[\&\[data-notes\=content\]_thead\]\:max-md\:block[data-notes=content] thead,.\[\&\[data-notes\=content\]_tr\]\:max-md\:block[data-notes=content] tr,.\[\&\[data-notes\=content\]\>table\]\:max-md\:block[data-notes=content]>table{display:block}.\[\&\[data-notes\=supplementary\]_\[data-variant\=note\]\]\:max-md\:hidden[data-notes=supplementary] [data-variant=note]{display:none}}[data-dialog-member=content]+.\[\[data-dialog-member\=content\]\+\&\]\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}[data-dialog-member=content]+.\[\[data-dialog-member\=content\]\+\&\]\:border-border{border-color:var(--color-border)}[data-dialog-member=title]+.\[\[data-dialog-member\=title\]\+\&\]\:mt-\[var\(--space-stack\)\]{margin-top:var(--space-stack)}[data-dialog-member=title]+.\[\[data-dialog-member\=title\]\+\&\]\:pt-0{padding-top:0}[data-section]+.\[\[data-section\]\+\&\]\:z-10{z-index:10}[data-section]+.\[\[data-section\]\+\&\]\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}[data-section]+.\[\[data-section\]\+\&\]\:border-solid{--tw-border-style:solid;border-style:solid}[data-section]+.\[\[data-section\]\+\&\]\:border-rule{border-color:var(--color-rule)}}:root{--color-surface:#fff;--color-foreground:#0f172a;--color-muted:#64748b;--color-border:#e2e8f0;--color-control-border:#64748b;--color-rule:#808fa3;--color-backing:#f1f5f9;--color-scrim:#0f172a80;--color-meter-fill:#0f172a;--color-meter-track:#e2e8f0;--color-primary:#7c3aed;--color-primary-hover:#6d28d9;--color-primary-foreground:#f8fafc;--color-secondary:#0369a1;--color-secondary-hover:#075985;--color-secondary-foreground:#f8fafc;--color-disabled:#94a3b8;--color-disabled-hover:#64748b;--color-focus-ring:var(--color-ring,#475569);--color-link:#2563eb;--color-success:#047857;--color-warning:#b45309;--color-error:#d63384;--color-info:#0e7490}.dark{--color-surface:#0f172a;--color-foreground:#f8fafc;--color-muted:#94a3b8;--color-border:#334155;--color-control-border:#94a3b8;--color-rule:#5b6a80;--color-backing:#1e293b;--color-scrim:#0f172a80;--color-meter-fill:#f8fafc;--color-meter-track:#334155;--color-primary:#8b5cf6;--color-primary-hover:#a78bfa;--color-primary-foreground:#020617;--color-secondary:#0284c7;--color-secondary-hover:#0ea5e9;--color-secondary-foreground:#020617;--color-disabled:#475569;--color-disabled-hover:#334155;--color-focus-ring:var(--color-ring,#cbd5e1);--color-link:#60a5fa;--color-success:#34d399;--color-warning:#fbbf24;--color-error:#f48fb1;--color-info:#22d3ee}:root{--motion-duration-color:.15s}@media (prefers-reduced-motion:reduce){:root{--motion-duration-color:0s}}:root{--focus-ring-width:3px;--focus-ring-offset:2px;--radius-control:.5rem;--radius-dialog:.375rem;--control-min-width:10.5rem;--standing-min-width:7.5rem;--underline-offset:.18em;--underline-thickness:1px;--underline-thickness-hover:2px;--measure:66ch;--measure-display:36ch;--measure-wide:72ch;--measure-action:20rem;--space-stack:.5em;--space-region:1.5em;--space-band:4em;--space-collection-item:1em;--gutter:clamp(1.5rem, 5vw, 4rem);--fold-height:min(70vh, 40rem);--cover-height:100svh;--tick-length:.9rem;--tick-thickness:1px;--tab-marker-thickness:2px;--tab-inset-inline:1em;--tab-inset-block:.5em;--slider-track-thickness:.25rem;--slider-thumb-size:1.5rem;--choice-marker-size:1.125rem;--choice-marker-dot-size:.5rem;--meter-track-thickness:.5rem;--scrim-blur:0;--elevation-floating:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}
|
|
2
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){:root,:host{--definition-shortfall:1px}*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-content:""}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-serif:ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-slate-200:oklch(92.9% .013 255.508);--color-slate-900:oklch(20.8% .042 265.755);--color-stone-50:oklch(98.5% .001 106.423);--color-white:#fff;--spacing:.25rem;--container-5xl:64rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-9xl:8rem;--text-9xl--line-height:1;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wider:.05em;--radius-md:.375rem;--radius-lg:.5rem;--aspect-video:16 / 9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-surface:var(--color-surface);--color-foreground:var(--color-foreground);--color-muted:var(--color-muted);--color-border:var(--color-border);--color-control-border:var(--color-control-border);--color-rule:var(--color-rule);--color-backing:var(--color-backing);--color-scrim:var(--color-scrim);--color-meter-fill:var(--color-meter-fill);--color-meter-track:var(--color-meter-track);--color-primary:var(--color-primary);--color-primary-hover:var(--color-primary-hover);--color-primary-foreground:var(--color-primary-foreground);--color-secondary:var(--color-secondary);--color-secondary-hover:var(--color-secondary-hover);--color-secondary-foreground:var(--color-secondary-foreground);--color-disabled:var(--color-disabled);--color-disabled-hover:var(--color-disabled-hover);--color-focus-ring:var(--color-focus-ring);--color-link:var(--color-link);--color-success:var(--color-success);--color-warning:var(--color-warning);--color-error:var(--color-error);--color-error-hover:var(--color-error-hover);--color-error-foreground:var(--color-error-foreground);--color-info:var(--color-info);--font-primary:inherit;--font-secondary:inherit;--text-display:clamp(3rem, 7vw, 6rem);--leading-display:1.05;--text-title:clamp(2.25rem, 5vw, 4.25rem);--leading-title:1.1;--text-subtitle:clamp(1.5rem, 3vw, 2.25rem);--leading-subtitle:1.2;--text-lede:1.25rem;--leading-lede:1.4;--text-body:1.0625rem;--leading-body:1.6;--text-small:.9375rem;--text-label:.8125rem;--leading-label:1.5;--text-dialog-title:clamp(1.5rem, 3vw, 2.25rem);--leading-dialog-title:1.2;--tracking-label:.14em;--tracking-optical:-.02em;--aspect-portrait:4 / 5;--aspect-square:1 / 1;--aspect-landscape:3 / 2;--aspect-wide:16 / 9}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.\@container{container-type:inline-size}.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:0}.right-0{right:0}.left-0{left:0}.isolate{isolation:isolate}.z-10{z-index:10}.container{width:100%}@media (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (width>=96rem){.container{max-width:96rem}}.-m-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]{margin:calc(calc(var(--focus-ring-width) + var(--focus-ring-offset)) * -1)}.m-0{margin:0}.m-\[calc\(-1\*\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\)\]{margin:calc(-1 * (var(--focus-ring-width) + var(--focus-ring-offset)))}.m-auto{margin:auto}.mx-auto{margin-inline:auto}.my-auto{margin-block:auto}.ms-auto{margin-inline-start:auto}.mt-\[0\.3rem\]{margin-top:.3rem}.mt-\[0\.35em\]{margin-top:.35em}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.table-cell{display:table-cell}.aspect-landscape{aspect-ratio:var(--aspect-landscape)}.aspect-portrait{aspect-ratio:var(--aspect-portrait)}.aspect-square{aspect-ratio:var(--aspect-square)}.aspect-wide{aspect-ratio:var(--aspect-wide)}.size-3{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-\[var\(--choice-marker-dot-size\)\]{width:var(--choice-marker-dot-size);height:var(--choice-marker-dot-size)}.size-\[var\(--choice-marker-size\)\]{width:var(--choice-marker-size);height:var(--choice-marker-size)}.h-12{height:calc(var(--spacing) * 12)}.h-\[calc\(100dvh-2\*var\(--space-region\)\)\]{height:calc(100dvh - 2 * var(--space-region))}.h-\[var\(--meter-track-thickness\)\]{height:var(--meter-track-thickness)}.h-\[var\(--slider-thumb-size\)\]{height:var(--slider-thumb-size)}.h-full{height:100%}.max-h-\[calc\(100dvh-2\*var\(--space-region\)\)\]{max-height:calc(100dvh - 2 * var(--space-region))}.max-h-\[var\(--multiselect-surface-max-height\,50vh\)\]{max-height:var(--multiselect-surface-max-height,50vh)}.max-h-full{max-height:100%}.max-h-none{max-height:none}.min-h-0{min-height:0}.min-h-24{min-height:calc(var(--spacing) * 24)}.min-h-\[calc\(var\(--text-body\)\*var\(--leading-body\)\)\]{min-height:calc(var(--text-body) * var(--leading-body))}.min-h-\[calc\(var\(--text-label\)\*var\(--leading-label\)\)\]{min-height:calc(var(--text-label) * var(--leading-label))}.min-h-\[var\(--cover-height\)\]{min-height:var(--cover-height)}.min-h-\[var\(--fold-height\)\]{min-height:var(--fold-height)}.w-\[32rem\]{width:32rem}.w-\[360px\]{width:360px}.w-\[calc\(100vw-2\*var\(--gutter\)\)\]{width:calc(100vw - 2 * var(--gutter))}.w-\[calc\(var\(--meter-level\)\*100\%\)\]{width:calc(var(--meter-level) * 100%)}.w-\[var\(--measure-action\)\]{width:var(--measure-action)}.w-fit{width:fit-content}.w-full{width:100%}.\[max-width\:var\(--measure-display\)\]{max-width:var(--measure-display)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-\[12rem\]{max-width:12rem}.max-w-\[calc\(100vw-2\*var\(--gutter\)\)\]{max-width:calc(100vw - 2 * var(--gutter))}.max-w-\[var\(--measure\)\]{max-width:var(--measure)}.max-w-\[var\(--measure-display\)\]{max-width:var(--measure-display)}.max-w-\[var\(--measure-wide\)\]{max-width:var(--measure-wide)}.max-w-full{max-width:100%}.max-w-none{max-width:none}.min-w-0{min-width:0}.min-w-42{min-width:calc(var(--spacing) * 42)}.min-w-\[min\(var\(--control-min-width\)\,100\%\)\]{min-width:min(var(--control-min-width), 100%)}.min-w-\[var\(--control-min-width\)\]{min-width:var(--control-min-width)}.min-w-\[var\(--standing-min-width\)\]{min-width:var(--standing-min-width)}.min-w-full{min-width:100%}.flex-1{flex:1}.flex-none{flex:none}.flex-shrink,.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.grow-\[var\(--column-layout-weight\)\]{flex-grow:var(--column-layout-weight)}.basis-0{flex-basis:0}.basis-\[clamp\(0px\,\(var\(--column-layout-threshold\)-100\%\)\*1000000\,100\%\)\]{flex-basis:clamp(0px, (var(--column-layout-threshold) - 100%) * 1000000, 100%)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.scroll-p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]{scroll-padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}.list-none{list-style-type:none}.appearance-none{appearance:none}.grid-flow-row-dense{grid-auto-flow:dense}.grid-cols-\[max\(calc\(\(100\%-var\(--space-definition-column\)\)\*var\(--definition-term-share\)\)\,var\(--definition-stack\)\)_minmax\(0\,1fr\)\]{grid-template-columns:max(calc((100% - var(--space-definition-column)) * var(--definition-term-share)), var(--definition-stack)) minmax(0,1fr)}.grid-cols-\[var\(--table-columns\)\]{grid-template-columns:var(--table-columns)}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-1{gap:var(--spacing)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-\[var\(--space-region\)\]{gap:var(--space-region)}.gap-\[var\(--space-stack\)\]{gap:var(--space-stack)}:where(.space-y-10>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-12>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-\[max\(0px\,var\(--space-definition-column\)-var\(--definition-stack\)\)\]{column-gap:max(0px, var(--space-definition-column) - var(--definition-stack))}.gap-x-\[var\(--space-region\)\]{column-gap:var(--space-region)}.gap-x-\[var\(--space-stack\)\]{column-gap:var(--space-stack)}.gap-y-\[var\(--space-stack\)\]{row-gap:var(--space-stack)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.overflow-y-hidden{overflow-y:hidden}.rounded{border-radius:.25rem}.rounded-\[var\(--radius-control\)\]{border-radius:var(--radius-control)}.rounded-\[var\(--radius-dialog\)\]{border-radius:var(--radius-dialog)}.rounded-\[var\(--radius-…\)\]{border-radius:var(--radius-…)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-s{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-\[length\:var\(--tab-marker-thickness\)\]{border-bottom-style:var(--tw-border-style);border-bottom-width:var(--tab-marker-thickness)}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-none{--tw-border-style:none;border-style:none}.border-solid{--tw-border-style:solid;border-style:solid}.border-border{border-color:var(--color-border)}.border-control-border{border-color:var(--color-control-border)}.border-disabled{border-color:var(--color-disabled)}.border-error{border-color:var(--color-error)}.border-primary{border-color:var(--color-primary)}.border-rule{border-color:var(--color-rule)}.border-secondary{border-color:var(--color-secondary)}.border-slate-200{border-color:var(--color-slate-200)}.border-transparent{border-color:#0000}.bg-\[color-mix\(in_oklab\,var\(--color-meter-fill\)_calc\(var\(--meter-level\)\*100\%\)\,var\(--color-error\)\)\]{background-color:var(--color-meter-fill)}@supports (color:color-mix(in lab, red, red)){.bg-\[color-mix\(in_oklab\,var\(--color-meter-fill\)_calc\(var\(--meter-level\)\*100\%\)\,var\(--color-error\)\)\]{background-color:color-mix(in oklab,var(--color-meter-fill) calc(var(--meter-level) * 100%),var(--color-error))}}.bg-backing{background-color:var(--color-backing)}.bg-error{background-color:var(--color-error)}.bg-foreground{background-color:var(--color-foreground)}.bg-meter-fill{background-color:var(--color-meter-fill)}.bg-meter-track{background-color:var(--color-meter-track)}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.bg-stone-50{background-color:var(--color-stone-50)}.bg-surface{background-color:var(--color-surface)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.object-cover{object-fit:cover}.object-bottom{object-position:bottom}.object-center{object-position:center}.object-left{object-position:left}.object-right{object-position:right}.object-top{object-position:top}.p-0{padding:0}.p-1{padding:var(--spacing)}.p-4{padding:calc(var(--spacing) * 4)}.p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]{padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}.p-\[var\(--space-box-inset\)\]{padding:var(--space-box-inset)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-\[calc\(1rem_-_1px\)\]{padding-inline:calc(1rem - 1px)}.px-\[var\(--gutter\)\]{padding-inline:var(--gutter)}.px-\[var\(--space-region\)\]{padding-inline:var(--space-region)}.px-\[var\(--tab-inset-inline\)\]{padding-inline:var(--tab-inset-inline)}.px-\[var\(--table-cell-padding-inline\)\]{padding-inline:var(--table-cell-padding-inline)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-12{padding-block:calc(var(--spacing) * 12)}.py-\[calc\(0\.5rem_-_1px\)\]{padding-block:calc(.5rem - 1px)}.py-\[var\(--space-band\)\]{padding-block:var(--space-band)}.py-\[var\(--space-collection-item\)\]{padding-block:var(--space-collection-item)}.py-\[var\(--space-region\)\]{padding-block:var(--space-region)}.py-\[var\(--tab-inset-block\)\]{padding-block:var(--tab-inset-block)}.py-\[var\(--table-cell-padding-block\)\]{padding-block:var(--table-cell-padding-block)}.pt-1{padding-top:var(--spacing)}.pt-\[var\(--space-region\)\]{padding-top:var(--space-region)}.pr-0\.5{padding-right:calc(var(--spacing) * .5)}.pb-1{padding-bottom:var(--spacing)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pb-\[var\(--space-region\)\]{padding-bottom:var(--space-region)}.pl-2{padding-left:calc(var(--spacing) * 2)}.pl-4{padding-left:calc(var(--spacing) * 4)}.\[text-align\:inherit\]{text-align:inherit}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-start{text-align:start}.align-\[-0\.125em\]{vertical-align:-.125em}.\[font-family\:Georgia\]{font-family:Georgia}.\[font-family\:…\]{font-family:…}.font-\(family-name\:--brand\){font-family:var(--brand)}.font-\(family-name\:--x\){font-family:var(--x)}.font-\[Georgia\]{font-family:Georgia}.font-\[family-name\:var\(--brand\)\]{font-family:var(--brand)}.font-\[…\]{font-family:…}.font-body{font-family:var(--font-body,var(--font-primary))}.font-control{font-family:var(--font-control,var(--font-primary))}.font-heading{font-family:var(--font-heading,var(--font-primary))}.font-mono{font-family:var(--font-mono)}.font-primary{font-family:var(--font-primary)}.font-sans{font-family:var(--font-sans)}.font-secondary{font-family:var(--font-secondary)}.font-serif{font-family:var(--font-serif)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-9xl{font-size:var(--text-9xl);line-height:var(--tw-leading,var(--text-9xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-body{font-size:var(--text-body)}.text-dialog-title{font-size:var(--text-dialog-title)}.text-display{font-size:var(--text-display)}.text-label{font-size:var(--text-label)}.text-lede{font-size:var(--text-lede)}.text-small{font-size:var(--text-small)}.text-subtitle{font-size:var(--text-subtitle)}.text-title{font-size:var(--text-title)}.leading-body{--tw-leading:var(--leading-body);line-height:var(--leading-body)}.leading-dialog-title{--tw-leading:var(--leading-dialog-title);line-height:var(--leading-dialog-title)}.leading-display{--tw-leading:var(--leading-display);line-height:var(--leading-display)}.leading-label{--tw-leading:var(--leading-label);line-height:var(--leading-label)}.leading-lede{--tw-leading:var(--leading-lede);line-height:var(--leading-lede)}.leading-subtitle{--tw-leading:var(--leading-subtitle);line-height:var(--leading-subtitle)}.leading-title{--tw-leading:var(--leading-title);line-height:var(--leading-title)}.font-\(--brand\){--tw-font-weight:var(--brand);font-weight:var(--brand)}.font-\(--x\){--tw-font-weight:var(--x);font-weight:var(--x)}.font-\[500\]{--tw-font-weight:500;font-weight:500}.font-\[600\]{--tw-font-weight:600;font-weight:600}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-label{--tw-tracking:var(--tracking-label);letter-spacing:var(--tracking-label)}.tracking-optical{--tw-tracking:var(--tracking-optical);letter-spacing:var(--tracking-optical)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.\[letter-spacing\:inherit\]{letter-spacing:inherit}.text-balance{text-wrap:balance}.text-nowrap{text-wrap:nowrap}.text-wrap{text-wrap:wrap}.\[overflow-wrap\:anywhere\],.wrap-anywhere{overflow-wrap:anywhere}.wrap-break-word{overflow-wrap:break-word}.break-all{word-break:break-all}.whitespace-normal{white-space:normal}.whitespace-nowrap{white-space:nowrap}.\[color\:inherit\]{color:inherit}.text-\[var\(--text-small\)\]{color:var(--text-small)}.text-disabled{color:var(--color-disabled)}.text-error{color:var(--color-error)}.text-error-foreground{color:var(--color-error-foreground)}.text-foreground{color:var(--color-foreground)}.text-info{color:var(--color-info)}.text-inherit{color:inherit}.text-link{color:var(--color-link)}.text-muted{color:var(--color-muted)}.text-primary-foreground{color:var(--color-primary-foreground)}.text-secondary{color:var(--color-secondary)}.text-secondary-foreground{color:var(--color-secondary-foreground)}.text-slate-900{color:var(--color-slate-900)}.text-success{color:var(--color-success)}.text-warning{color:var(--color-warning)}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.ordinal{--tw-ordinal:ordinal;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.no-underline{text-decoration-line:none}.underline{text-decoration-line:underline}.decoration-\[length\:var\(--underline-thickness\)\]{text-decoration-thickness:var(--underline-thickness)}.underline-offset-\[var\(--underline-offset\)\]{text-underline-offset:var(--underline-offset)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[var\(--elevation-floating\)\]{--tw-shadow:var(--elevation-floating);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.outline-offset-\[var\(--focus-ring-offset\)\]{outline-offset:var(--focus-ring-offset)}.outline-focus-ring{outline-color:var(--color-focus-ring)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-\[var\(--motion-duration-color\)\]{--tw-duration:var(--motion-duration-color);transition-duration:var(--motion-duration-color)}.outline-none{--tw-outline-style:none;outline-style:none}.select-all{-webkit-user-select:all;user-select:all}.select-none{-webkit-user-select:none;user-select:none}.\[--column-layout-gap\:var\(--space-region\)\]{--column-layout-gap:var(--space-region)}.\[--column-layout-gap\:var\(--space-stack\)\]{--column-layout-gap:var(--space-stack)}.\[--column-layout-gap\:…\]{--column-layout-gap:…}.\[--definition-shortfall\:clamp\(0px\,\(var\(--definition-threshold\)-100cqi\)\*1000000\,1px\)\]{--definition-shortfall:clamp(0px, (var(--definition-threshold) - 100cqi) * 1000000, 1px)}.\[--definition-stack\:clamp\(0px\,\(var\(--definition-threshold\)-100\%\)\*1000000\,100\%\)\]{--definition-stack:clamp(0px, (var(--definition-threshold) - 100%) * 1000000, 100%)}.\[--table-cell-padding-block\:var\(--table-cell-inset-block\)\]{--table-cell-padding-block:var(--table-cell-inset-block)}.\[--table-cell-padding-block\:var\(--table-cell-inset-block-compact\)\]{--table-cell-padding-block:var(--table-cell-inset-block-compact)}.\[--table-cell-padding-inline\:var\(--table-cell-inset-inline\)\]{--table-cell-padding-inline:var(--table-cell-inset-inline)}.\[--table-cell-padding-inline\:var\(--table-cell-inset-inline-compact\)\]{--table-cell-padding-inline:var(--table-cell-inset-inline-compact)}.\[font\:inherit\]{font:inherit}.group-disabled\/choice\:text-muted:is(:where(.group\/choice):disabled *){color:var(--color-muted)}.group-aria-checked\/option\:border-foreground:is(:where(.group\/option)[aria-checked=true] *){border-color:var(--color-foreground)}.group-data-\[disabled\]\/field\:text-muted:is(:where(.group\/field)[data-disabled] *){color:var(--color-muted)}.backdrop\:bg-scrim::backdrop{background-color:var(--color-scrim)}.backdrop\:\[backdrop-filter\:blur\(var\(--scrim-blur\)\)\]::backdrop{-webkit-backdrop-filter:blur(var(--scrim-blur));backdrop-filter:blur(var(--scrim-blur))}.before\:mt-\[0\.35em\]:before{content:var(--tw-content);margin-top:.35em}.before\:size-\[calc\(var\(--tick-length\)\*0\.7\)\]:before{content:var(--tw-content);width:calc(var(--tick-length) * .7);height:calc(var(--tick-length) * .7)}.before\:shrink-0:before{content:var(--tw-content);flex-shrink:0}.before\:rotate-45:before{content:var(--tw-content);rotate:45deg}.before\:bg-\[var\(--color-rule\)\]:before{content:var(--tw-content);background-color:var(--color-rule)}.before\:content-\[\'\'\]:before{--tw-content:"";content:var(--tw-content)}.before\:\[border-right\:var\(--tick-thickness\)_solid_var\(--color-rule\)\]:before{content:var(--tw-content);border-right:var(--tick-thickness) solid var(--color-rule)}.before\:\[border-top\:var\(--tick-thickness\)_solid_var\(--color-rule\)\]:before{content:var(--tw-content);border-top:var(--tick-thickness) solid var(--color-rule)}.first\:border-t:first-child{border-top-style:var(--tw-border-style);border-top-width:1px}.first\:pl-0:first-child{padding-left:0}.last\:pr-0:last-child{padding-right:0}.open\:flex:is([open],:popover-open,:open){display:flex}.open\:flex-col:is([open],:popover-open,:open){flex-direction:column}@media (hover:hover){.hover\:border-muted:hover{border-color:var(--color-muted)}.hover\:bg-backing:hover{background-color:var(--color-backing)}.hover\:bg-error-hover:hover{background-color:var(--color-error-hover)}.hover\:bg-primary-hover:hover{background-color:var(--color-primary-hover)}.hover\:bg-secondary:hover{background-color:var(--color-secondary)}.hover\:bg-secondary-hover:hover{background-color:var(--color-secondary-hover)}.hover\:text-sm:hover{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.hover\:text-foreground:hover{color:var(--color-foreground)}.hover\:underline:hover{text-decoration-line:underline}.hover\:decoration-\[length\:var\(--underline-thickness\)\]:hover{text-decoration-thickness:var(--underline-thickness)}.hover\:decoration-\[length\:var\(--underline-thickness-hover\)\]:hover{text-decoration-thickness:var(--underline-thickness-hover)}.hover\:underline-offset-\[var\(--underline-offset\)\]:hover{text-underline-offset:var(--underline-offset)}.hover\:opacity-90:hover{opacity:.9}}.focus-visible\:outline:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.focus-visible\:outline-\[length\:var\(--focus-ring-width\)\]:focus-visible{outline-style:var(--tw-outline-style);outline-width:var(--focus-ring-width)}.focus-visible\:outline-\[length\:…\]:focus-visible{outline-style:var(--tw-outline-style);outline-width:…}.focus-visible\:outline-focus-ring:focus-visible{outline-color:var(--color-focus-ring)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:border-disabled:disabled{border-color:var(--color-disabled)}.disabled\:bg-disabled:disabled{background-color:var(--color-disabled)}.disabled\:text-disabled:disabled{color:var(--color-disabled)}.disabled\:text-muted:disabled{color:var(--color-muted)}@media (hover:hover){.disabled\:hover\:bg-disabled-hover:disabled:hover{background-color:var(--color-disabled-hover)}.disabled\:hover\:bg-transparent:disabled:hover{background-color:#0000}.disabled\:hover\:text-muted:disabled:hover{color:var(--color-muted)}}.aria-checked\:border-foreground[aria-checked=true],.aria-selected\:border-foreground[aria-selected=true]{border-color:var(--color-foreground)}.aria-selected\:text-foreground[aria-selected=true]{color:var(--color-foreground)}.aria-\[invalid\=true\]\:border-error[aria-invalid=true]{border-color:var(--color-error)}.data-\[disabled\]\:border-disabled[data-disabled]{border-color:var(--color-disabled)}.data-\[disabled\]\:text-muted[data-disabled]{color:var(--color-muted)}.data-\[overflow\]\:invisible[data-overflow]{visibility:hidden}.data-\[overflow\]\:absolute[data-overflow]{position:absolute}.data-\[placement\=above\]\:bottom-full[data-placement=above]{bottom:100%}.data-\[placement\=above\]\:mb-1[data-placement=above]{margin-bottom:var(--spacing)}.data-\[placement\=below\]\:top-full[data-placement=below]{top:100%}.data-\[placement\=below\]\:mt-1[data-placement=below]{margin-top:var(--spacing)}@media (width>=40rem){.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}.sm\:px-\[calc\(1\.5rem_-_1px\)\]{padding-inline:calc(1.5rem - 1px)}}@media (width>=48rem){.md\:font-serif{font-family:var(--font-serif)}.md\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}@media (width>=64rem){.lg\:sticky{position:sticky}.lg\:top-6{top:calc(var(--spacing) * 6)}.lg\:max-w-\[var\(--measure-display\)\]{max-width:var(--measure-display)}.lg\:grid-cols-\[10rem_minmax\(0\,1fr\)\]{grid-template-columns:10rem minmax(0,1fr)}.lg\:grid-cols-\[12rem_minmax\(0\,1fr\)\]{grid-template-columns:12rem minmax(0,1fr)}.lg\:flex-row{flex-direction:row}.lg\:items-start{align-items:flex-start}.lg\:gap-x-12{column-gap:calc(var(--spacing) * 12)}}@media (forced-colors:active){.forced-colors\:border{border-style:var(--tw-border-style);border-width:1px}}.\[\&_\[aria-current\=page\]\]\:text-foreground [aria-current=page]{color:var(--color-foreground)}.\[\&_caption\]\:pb-3 caption{padding-bottom:calc(var(--spacing) * 3)}.\[\&_caption\]\:text-left caption{text-align:left}.\[\&_caption\]\:font-secondary caption{font-family:var(--font-secondary)}.\[\&_caption\]\:text-label caption{font-size:var(--text-label)}.\[\&_caption\]\:tracking-label caption{--tw-tracking:var(--tracking-label);letter-spacing:var(--tracking-label)}.\[\&_caption\]\:text-muted caption{color:var(--color-muted)}.\[\&\+li\]\:border-t+li{border-top-style:var(--tw-border-style);border-top-width:1px}.\[\&\+li\]\:border-solid+li{--tw-border-style:solid;border-style:solid}.\[\&\+li\]\:border-border+li{border-color:var(--color-border)}.\[\&\:\:-moz-range-thumb\]\:size-\[var\(--slider-thumb-size\)\]::-moz-range-thumb{width:var(--slider-thumb-size);height:var(--slider-thumb-size)}.\[\&\:\:-moz-range-thumb\]\:rounded-\[var\(--radius-control\)\]::-moz-range-thumb{border-radius:var(--radius-control)}.\[\&\:\:-moz-range-thumb\]\:border-none::-moz-range-thumb{--tw-border-style:none;border-style:none}.\[\&\:\:-moz-range-thumb\]\:bg-foreground::-moz-range-thumb{background-color:var(--color-foreground)}.\[\&\:\:-moz-range-track\]\:h-\[var\(--slider-track-thickness\)\]::-moz-range-track{height:var(--slider-track-thickness)}.\[\&\:\:-moz-range-track\]\:rounded-\[var\(--radius-control\)\]::-moz-range-track{border-radius:var(--radius-control)}.\[\&\:\:-moz-range-track\]\:bg-control-border::-moz-range-track{background-color:var(--color-control-border)}.\[\&\:\:-webkit-slider-runnable-track\]\:h-\[var\(--slider-track-thickness\)\]::-webkit-slider-runnable-track{height:var(--slider-track-thickness)}.\[\&\:\:-webkit-slider-runnable-track\]\:rounded-\[var\(--radius-control\)\]::-webkit-slider-runnable-track{border-radius:var(--radius-control)}.\[\&\:\:-webkit-slider-runnable-track\]\:bg-control-border::-webkit-slider-runnable-track{background-color:var(--color-control-border)}.\[\&\:\:-webkit-slider-thumb\]\:mt-\[calc\(\(var\(--slider-track-thickness\)-var\(--slider-thumb-size\)\)\/2\)\]::-webkit-slider-thumb{margin-top:calc((var(--slider-track-thickness) - var(--slider-thumb-size)) / 2)}.\[\&\:\:-webkit-slider-thumb\]\:size-\[var\(--slider-thumb-size\)\]::-webkit-slider-thumb{width:var(--slider-thumb-size);height:var(--slider-thumb-size)}.\[\&\:\:-webkit-slider-thumb\]\:appearance-none::-webkit-slider-thumb{appearance:none}.\[\&\:\:-webkit-slider-thumb\]\:rounded-\[var\(--radius-control\)\]::-webkit-slider-thumb{border-radius:var(--radius-control)}.\[\&\:\:-webkit-slider-thumb\]\:bg-foreground::-webkit-slider-thumb{background-color:var(--color-foreground)}.\[\&\:disabled\:\:-moz-range-thumb\]\:bg-disabled:disabled::-moz-range-thumb{background-color:var(--color-disabled)}.\[\&\:disabled\:\:-moz-range-track\]\:bg-disabled:disabled::-moz-range-track{background-color:var(--color-disabled)}.\[\&\:disabled\:\:-webkit-slider-runnable-track\]\:bg-disabled:disabled::-webkit-slider-runnable-track{background-color:var(--color-disabled)}.\[\&\:disabled\:\:-webkit-slider-thumb\]\:bg-disabled:disabled::-webkit-slider-thumb{background-color:var(--color-disabled)}.\[\&\:has\(\+\[data-dialog-member\=description\]\)\]\:pb-0:has(+[data-dialog-member=description]){padding-bottom:0}.\[\&\:has\(\[aria-selected\]\)_tr\>\*\:first-child\]\:pl-\[var\(--table-cell-padding-inline\)\]:has([aria-selected]) tr>:first-child{padding-left:var(--table-cell-padding-inline)}.\[\&\:has\(tr\[tabindex\]\)\]\:m-\[calc\(-1\*\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\)\]:has(tr[tabindex]){margin:calc(-1 * (var(--focus-ring-width) + var(--focus-ring-offset)))}.\[\&\:has\(tr\[tabindex\]\)\]\:scroll-p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]:has(tr[tabindex]){scroll-padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}.\[\&\:has\(tr\[tabindex\]\)\]\:p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]:has(tr[tabindex]){padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}.\[\&\:not\(\:first-child\)\]\:mt-\[var\(--space-stack\)\]:not(:first-child){margin-top:var(--space-stack)}.\[\&\:not\(\:first-child\)\]\:border-t:not(:first-child){border-top-style:var(--tw-border-style);border-top-width:1px}.\[\&\:not\(\:first-child\)\]\:border-solid:not(:first-child){--tw-border-style:solid;border-style:solid}.\[\&\:not\(\:first-child\)\]\:border-border:not(:first-child){border-color:var(--color-border)}.\[\&\:not\(\:first-child\)\]\:pt-\[var\(--space-stack\)\]:not(:first-child){padding-top:var(--space-stack)}.\[\&\:user-invalid\]\:border-error:user-invalid{border-color:var(--color-error)}.\[\&\>dd\]\:col-span-full>dd{grid-column:1/-1}.\[\&\>dd\]\:col-start-\[calc\(2-tan\(atan2\(var\(--definition-shortfall\)\,1px\)\)\)\]>dd{grid-column-start:calc(2 - tan(atan2(var(--definition-shortfall), 1px)))}.\[\&\>dd\]\:self-baseline>dd{align-self:baseline}.\[\&\>div\]\:py-\[token\]>div{padding-block:token}.\[\&\>div\]\:py-\[var\(--space-definition-item\)\]>div{padding-block:var(--space-definition-item)}.\[\&\>div\]\:py-\[var\(--space-definition-item-compact\)\]>div{padding-block:var(--space-definition-item-compact)}.\[\&\>div\:first-child\]\:border-b>div:first-child{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.\[\&\>div\:first-child\]\:border-solid>div:first-child{--tw-border-style:solid;border-style:solid}.\[\&\>div\:first-child\]\:border-border>div:first-child{border-color:var(--color-border)}.\[\&\>div\:first-child\]\:pb-\[var\(--space-stack\)\]>div:first-child{padding-bottom:var(--space-stack)}@media (width>=64rem){.lg\:\[\&\>div\:first-child\]\:border-r>div:first-child{border-right-style:var(--tw-border-style);border-right-width:1px}.lg\:\[\&\>div\:first-child\]\:border-b-0>div:first-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.lg\:\[\&\>div\:first-child\]\:pr-\[var\(--space-stack\)\]>div:first-child{padding-right:var(--space-stack)}.lg\:\[\&\>div\:first-child\]\:pb-0>div:first-child{padding-bottom:0}}.\[\&\>div\:first-child\>nav\]\:p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]>div:first-child>nav{padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}@media (width>=64rem){.lg\:\[\&\>div\:first-child\>nav\]\:sticky>div:first-child>nav{position:sticky}.lg\:\[\&\>div\:first-child\>nav\]\:top-0>div:first-child>nav{top:0}.lg\:\[\&\>div\:first-child\>nav\]\:max-h-\[min\(100dvh\,var\(--sidebar-scrollport-height\,100dvh\)\)\]>div:first-child>nav{max-height:min(100dvh, var(--sidebar-scrollport-height,100dvh))}.lg\:\[\&\>div\:first-child\>nav\]\:scroll-p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]>div:first-child>nav{scroll-padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}.lg\:\[\&\>div\:first-child\>nav\]\:overflow-y-auto>div:first-child>nav{overflow-y:auto}}.\[\&\>div\:first-child\>nav\>ul\]\:flex>div:first-child>nav>ul{display:flex}.\[\&\>div\:first-child\>nav\>ul\]\:flex-col>div:first-child>nav>ul{flex-direction:column}.\[\&\>div\:first-child\>nav\>ul\]\:gap-\[var\(--space-stack\)\]>div:first-child>nav>ul{gap:var(--space-stack)}.\[\&\>dt\]\:col-start-1>dt{grid-column-start:1}.\[\&\>dt\]\:self-baseline>dt{align-self:baseline}.\[\&\>label\]\:font-secondary>label{font-family:var(--font-secondary)}.\[\&\>label\]\:text-body>label{font-size:var(--text-body)}.\[\&\>label\]\:font-medium>label{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.\[\&\>label\]\:text-foreground>label{color:var(--color-foreground)}.\[\&\>p\]\:font-secondary>p{font-family:var(--font-secondary)}.\[\&\>p\]\:text-small>p{font-size:var(--text-small)}.\[\&\>p\]\:text-muted>p{color:var(--color-muted)}.\[\&\>p\[data-error\]\]\:text-error>p[data-error]{color:var(--color-error)}.\[\&\>select\]\:block>select{display:block}.\[\&\>select\]\:w-full>select{width:100%}.\[\&\>select\]\:rounded-\[var\(--radius-control\)\]>select{border-radius:var(--radius-control)}.\[\&\>select\]\:border>select{border-style:var(--tw-border-style);border-width:1px}.\[\&\>select\]\:border-solid>select{--tw-border-style:solid;border-style:solid}.\[\&\>select\]\:border-control-border>select{border-color:var(--color-control-border)}.\[\&\>select\]\:bg-transparent>select{background-color:#0000}.\[\&\>select\]\:px-3>select{padding-inline:calc(var(--spacing) * 3)}.\[\&\>select\]\:py-2>select{padding-block:calc(var(--spacing) * 2)}.\[\&\>select\]\:font-control>select{font-family:var(--font-control,var(--font-primary))}.\[\&\>select\]\:font-primary>select{font-family:var(--font-primary)}.\[\&\>select\]\:text-body>select{font-size:var(--text-body)}.\[\&\>select\]\:text-foreground>select{color:var(--color-foreground)}.\[\&\>select\]\:outline-offset-\[var\(--focus-ring-offset\)\]>select{outline-offset:var(--focus-ring-offset)}.\[\&\>select\]\:outline-focus-ring>select{outline-color:var(--color-focus-ring)}.\[\&\>select\]\:transition-colors>select{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.\[\&\>select\]\:duration-\[var\(--motion-duration-color\)\]>select{--tw-duration:var(--motion-duration-color);transition-duration:var(--motion-duration-color)}.\[\&\>select\]\:focus-visible\:outline>select:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.\[\&\>select\]\:focus-visible\:outline-\[length\:var\(--focus-ring-width\)\]>select:focus-visible{outline-style:var(--tw-outline-style);outline-width:var(--focus-ring-width)}.\[\&\>select\]\:disabled\:cursor-not-allowed>select:disabled{cursor:not-allowed}.\[\&\>select\]\:disabled\:border-disabled>select:disabled{border-color:var(--color-disabled)}.\[\&\>select\]\:disabled\:text-muted>select:disabled{color:var(--color-muted)}.\[\&\>select\]\:aria-\[invalid\=true\]\:border-error>select[aria-invalid=true]{border-color:var(--color-error)}.\[\&\>select\:user-invalid\]\:border-error>select:user-invalid{border-color:var(--color-error)}.\[\&\>span\]\:font-secondary>span{font-family:var(--font-secondary)}.\[\&\>span\]\:text-small>span{font-size:var(--text-small)}.\[\&\>span\]\:text-muted>span{color:var(--color-muted)}.\[\&\>table\]\:w-full>table{width:100%}.\[\&\>table\]\:border-collapse>table{border-collapse:collapse}.\[\&\>table\]\:text-left>table{text-align:left}.\[\&\>table\>\*\:nth-child\(2\)\>tr\:first-child\]\:border-rule>table>:nth-child(2)>tr:first-child{border-color:var(--color-rule)}.\[\&\[aria-selected\=true\]\>\*\:first-child\]\:relative[aria-selected=true]>:first-child{position:relative}.\[\&\[aria-selected\=true\]\>\*\:first-child\]\:before\:absolute[aria-selected=true]>:first-child:before{content:var(--tw-content);position:absolute}.\[\&\[aria-selected\=true\]\>\*\:first-child\]\:before\:inset-y-0[aria-selected=true]>:first-child:before{content:var(--tw-content);inset-block:0}.\[\&\[aria-selected\=true\]\>\*\:first-child\]\:before\:left-0[aria-selected=true]>:first-child:before{content:var(--tw-content);left:0}.\[\&\[aria-selected\=true\]\>\*\:first-child\]\:before\:border-l-\[length\:var\(--table-selection-marker-thickness\)\][aria-selected=true]>:first-child:before{content:var(--tw-content);border-left-style:var(--tw-border-style);border-left-width:var(--table-selection-marker-thickness)}.\[\&\[aria-selected\=true\]\>\*\:first-child\]\:before\:border-solid[aria-selected=true]>:first-child:before{content:var(--tw-content);--tw-border-style:solid;border-style:solid}.\[\&\[aria-selected\=true\]\>\*\:first-child\]\:before\:border-foreground[aria-selected=true]>:first-child:before{content:var(--tw-content);border-color:var(--color-foreground)}.\[\&\[data-columns\]\>table\]\:grid[data-columns]>table{display:grid}.\[\&\[data-columns\]\>table\]\:grid-cols-\[var\(--table-columns\)\][data-columns]>table{grid-template-columns:var(--table-columns)}.\[\&\[data-columns\]\>table\>\*\:not\(caption\)\]\:col-span-full[data-columns]>table>:not(caption){grid-column:1/-1}.\[\&\[data-columns\]\>table\>\*\:not\(caption\)\]\:grid[data-columns]>table>:not(caption){display:grid}.\[\&\[data-columns\]\>table\>\*\:not\(caption\)\]\:grid-cols-subgrid[data-columns]>table>:not(caption){grid-template-columns:subgrid}.\[\&\[data-columns\]\>table\>\*\>tr\]\:col-span-full[data-columns]>table>*>tr{grid-column:1/-1}.\[\&\[data-columns\]\>table\>\*\>tr\]\:grid[data-columns]>table>*>tr{display:grid}.\[\&\[data-columns\]\>table\>\*\>tr\]\:grid-cols-subgrid[data-columns]>table>*>tr{grid-template-columns:subgrid}.\[\&\[data-columns\]\>table\>\*\>tr\>td\]\:wrap-anywhere[data-columns]>table>*>tr>td,.\[\&\[data-columns\]\>table\>\*\>tr\>th\]\:wrap-anywhere[data-columns]>table>*>tr>th{overflow-wrap:anywhere}.\[\&\[data-columns\]\>table\>caption\]\:col-span-full[data-columns]>table>caption{grid-column:1/-1}@media not all and (width>=48rem){.\[\&\[data-notes\=content\]\:not\(\[data-columns\]\)_tbody\]\:max-md\:block[data-notes=content]:not([data-columns]) tbody,.\[\&\[data-notes\=content\]\:not\(\[data-columns\]\)_td\]\:max-md\:block[data-notes=content]:not([data-columns]) td,.\[\&\[data-notes\=content\]\:not\(\[data-columns\]\)_tfoot\]\:max-md\:block[data-notes=content]:not([data-columns]) tfoot,.\[\&\[data-notes\=content\]\:not\(\[data-columns\]\)_th\]\:max-md\:block[data-notes=content]:not([data-columns]) th,.\[\&\[data-notes\=content\]\:not\(\[data-columns\]\)_thead\]\:max-md\:block[data-notes=content]:not([data-columns]) thead,.\[\&\[data-notes\=content\]\:not\(\[data-columns\]\)_tr\]\:max-md\:block[data-notes=content]:not([data-columns]) tr,.\[\&\[data-notes\=content\]\:not\(\[data-columns\]\)\>table\]\:max-md\:block[data-notes=content]:not([data-columns])>table{display:block}.\[\&\[data-notes\=supplementary\]\:not\(\[data-columns\]\)_\[data-variant\=note\]\]\:max-md\:hidden[data-notes=supplementary]:not([data-columns]) [data-variant=note]{display:none}}[data-dialog-member=content]+.\[\[data-dialog-member\=content\]\+\&\]\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}[data-dialog-member=content]+.\[\[data-dialog-member\=content\]\+\&\]\:border-border{border-color:var(--color-border)}[data-dialog-member=title]+.\[\[data-dialog-member\=title\]\+\&\]\:mt-\[var\(--space-stack\)\]{margin-top:var(--space-stack)}[data-dialog-member=title]+.\[\[data-dialog-member\=title\]\+\&\]\:pt-0{padding-top:0}[data-section]+.\[\[data-section\]\+\&\]\:z-10{z-index:10}[data-section]+.\[\[data-section\]\+\&\]\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}[data-section]+.\[\[data-section\]\+\&\]\:border-solid{--tw-border-style:solid;border-style:solid}[data-section]+.\[\[data-section\]\+\&\]\:border-rule{border-color:var(--color-rule)}}:root{--color-surface:#fff;--color-foreground:#0f172a;--color-muted:#64748b;--color-border:#e2e8f0;--color-control-border:#64748b;--color-rule:#808fa3;--color-backing:#f1f5f9;--color-scrim:#0f172a80;--color-meter-fill:#0f172a;--color-meter-track:#e2e8f0;--color-primary:#7c3aed;--color-primary-hover:#6d28d9;--color-primary-foreground:#f8fafc;--color-secondary:#0369a1;--color-secondary-hover:#075985;--color-secondary-foreground:#f8fafc;--color-disabled:#94a3b8;--color-disabled-hover:#64748b;--color-focus-ring:var(--color-ring,#475569);--color-link:#2563eb;--color-success:#047857;--color-warning:#b45309;--color-error:#d63384;--color-error-hover:#be185d;--color-error-foreground:#fff;--color-info:#0e7490}.dark{--color-surface:#0f172a;--color-foreground:#f8fafc;--color-muted:#94a3b8;--color-border:#334155;--color-control-border:#94a3b8;--color-rule:#5b6a80;--color-backing:#1e293b;--color-scrim:#0f172a80;--color-meter-fill:#f8fafc;--color-meter-track:#334155;--color-primary:#8b5cf6;--color-primary-hover:#a78bfa;--color-primary-foreground:#020617;--color-secondary:#0ea5e9;--color-secondary-hover:#38bdf8;--color-secondary-foreground:#020617;--color-disabled:#475569;--color-disabled-hover:#334155;--color-focus-ring:var(--color-ring,#cbd5e1);--color-link:#60a5fa;--color-success:#34d399;--color-warning:#fbbf24;--color-error:#f48fb1;--color-error-hover:#f8bbd0;--color-error-foreground:#020617;--color-info:#22d3ee}:root{--motion-duration-color:.15s}@media (prefers-reduced-motion:reduce){:root{--motion-duration-color:0s}}:root{--focus-ring-width:3px;--focus-ring-offset:2px;--radius-control:.5rem;--radius-dialog:.375rem;--control-min-width:10.5rem;--standing-min-width:7.5rem;--underline-offset:.18em;--underline-thickness:1px;--underline-thickness-hover:2px;--measure:66ch;--measure-display:36ch;--measure-wide:72ch;--measure-action:20rem;--table-column-name:12rem;--table-column-fact:9rem;--table-column-figure:8rem;--table-column-action:12.5rem;--space-stack:.5em;--space-region:1.5em;--space-band:4em;--space-collection-item:1em;--space-definition-item:1.5rem;--space-definition-item-compact:.5rem;--space-definition-column:3rem;--definition-term-min-width:9rem;--definition-description-min-width:10rem}@property --definition-shortfall{syntax:"<length>";inherits:true;initial-value:1px}:root{--space-box-inset:1em;--table-cell-inset-inline:1rem;--table-cell-inset-block:.5rem;--table-cell-inset-inline-compact:.5rem;--table-cell-inset-block-compact:.25rem;--gutter:clamp(1.5rem, 5vw, 4rem);--fold-height:min(70vh, 40rem);--cover-height:100svh;--tick-length:.9rem;--tick-thickness:1px;--tab-marker-thickness:2px;--table-selection-marker-thickness:2px;--tab-inset-inline:1em;--tab-inset-block:.5em;--slider-track-thickness:.25rem;--slider-thumb-size:1.5rem;--choice-marker-size:1.125rem;--choice-marker-dot-size:.5rem;--meter-track-thickness:.5rem;--scrim-blur:0;--elevation-floating:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import type { VariantProps } from 'class-variance-authority';
|
|
2
|
+
import { type FunctionComponent, type ReactNode } from 'react';
|
|
3
|
+
declare const columnLayout: (props?: ({
|
|
4
|
+
gap?: "stack" | "region" | null | undefined;
|
|
5
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
|
+
/** The name of a CSS custom property, as written in a stylesheet: `--main-column-min-width`. */
|
|
7
|
+
type MinWidthToken = `--${string}`;
|
|
8
|
+
export interface IColumnLayoutRootProps extends VariantProps<typeof columnLayout> {
|
|
9
|
+
/** The columns, as `ColumnLayout.Column` elements: direct children, or arrays and fragments of
|
|
10
|
+
* them. A conditional that renders nothing reserves nothing. */
|
|
11
|
+
children?: ReactNode;
|
|
12
|
+
testId?: string;
|
|
13
|
+
}
|
|
14
|
+
export interface IColumnLayoutColumnProps {
|
|
15
|
+
/** This column's share of the width left after the gaps, relative to its siblings' weights: a
|
|
16
|
+
* positive finite number. `2` beside `1` is a two-thirds/one-third arrangement. */
|
|
17
|
+
weight: number;
|
|
18
|
+
/** The name of the consumer's custom property holding this column's minimum readable width,
|
|
19
|
+
* such as `--main-column-min-width`. A token name, never a length or a `var()`: the consumer
|
|
20
|
+
* declares it in the theme with a nonnegative CSS length. */
|
|
21
|
+
minWidth: MinWidthToken;
|
|
22
|
+
/** The column's content. Rendered unmodified: the column imposes no anatomy. */
|
|
23
|
+
children?: ReactNode;
|
|
24
|
+
testId?: string;
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* An arrangement of weighted columns that becomes one column when the space it is given cannot
|
|
28
|
+
* satisfy every column's minimum at the requested proportions. It owns the arrangement and nothing
|
|
29
|
+
* else - no landmark, no band, no join, no gutter, no fill - and takes no outer space, so whatever
|
|
30
|
+
* holds it owns the rhythm around it. `Stack`'s `split` keeps its own viewport-keyed contract; this
|
|
31
|
+
* one answers to the width of its holder (docs/adr/0008, Amendments).
|
|
32
|
+
*
|
|
33
|
+
* @Guarantees — enforced on every render
|
|
34
|
+
* - `Root` renders a `div` with no landmark role, no heading and no margin. Each `Column` is a
|
|
35
|
+
* `div` directly inside it, in the order written, so DOM, reading and keyboard order are the
|
|
36
|
+
* order of the children in both arrangements, and no column is ever remounted merely because
|
|
37
|
+
* the arrangement changed: resizing keeps every column's state and focus.
|
|
38
|
+
* - In the horizontal arrangement the gaps are taken off the Root's content width and the rest is
|
|
39
|
+
* divided in proportion to the weights: `2`, `1`, `1` is one half and two quarters of it. The
|
|
40
|
+
* columns align at the top and keep their own heights.
|
|
41
|
+
* - The row holds only while every proportional share is at least its own minimum. The moment one
|
|
42
|
+
* falls short, every column takes a line of its own and fills the Root's width - a column
|
|
43
|
+
* narrower than its minimum included: the minimum decides the switch and never floors a width.
|
|
44
|
+
* There is no in-between: no column wraps alone, no share is clamped, nothing is redistributed to
|
|
45
|
+
* postpone the switch. For n columns, gap g, total weight S and minimums m_i the row fits at and
|
|
46
|
+
* above `(n - 1) * g + max(m_i * S / w_i)`.
|
|
47
|
+
* - The space measured is the Root's own width, never the viewport, so two instances on one page
|
|
48
|
+
* switch independently, and a narrow holder on a wide screen stacks.
|
|
49
|
+
* - Every minimum is read from the theme as a CSS length each time layout runs, so re-pointing a
|
|
50
|
+
* token - in a theme class, a media query, or a scope around the Root - moves the threshold
|
|
51
|
+
* with it, and a font-relative length moves it as the type does.
|
|
52
|
+
* - `gap` selects which space role separates the columns, across the row and between the stacked
|
|
53
|
+
* lines alike: `region` (the default), the gap between groups of blocks, or `stack`, the gap
|
|
54
|
+
* between siblings within one block. Nothing else.
|
|
55
|
+
* - Only rendered columns count: a conditional that renders nothing reserves neither width nor
|
|
56
|
+
* gap, a single column fills the width, and an empty Root holds no tracks and no gaps.
|
|
57
|
+
* Allocations follow every change of columns, weights, gap, holder width or theme.
|
|
58
|
+
* - A column adds no scrolling, truncation or overflow treatment of its own and does not widen its
|
|
59
|
+
* track for its content: the content keeps whatever wrapping or scrolling contract it has.
|
|
60
|
+
* - Every value it emits is a role the token layer or the consumer's theme already names; the
|
|
61
|
+
* only literals are the switch's two states.
|
|
62
|
+
* - A non-positive or non-finite `weight`, or a `minWidth` that is not a custom-property name,
|
|
63
|
+
* throws {@link ColumnLayoutConfigurationError}; a `Column` that is not a direct child of a
|
|
64
|
+
* `Root` - loose, nested in another column, or reached through a wrapping component - throws
|
|
65
|
+
* {@link ColumnLayoutCompositionError}. Both are programmer errors, raised loud and early.
|
|
66
|
+
*
|
|
67
|
+
* @CallerMustEnsure — the component cannot see these and does not check them
|
|
68
|
+
* - Every `minWidth` token is declared, on the Root or an ancestor of it, as a valid nonnegative
|
|
69
|
+
* CSS length: `24rem`, `20em`, `40ch`, `320px`. A `rem` resolves against the document root, an
|
|
70
|
+
* `em` or `ch` against the Root's inherited type. A missing or invalid token is not a
|
|
71
|
+
* responsive configuration: the switch has nothing to compare and the columns size from their
|
|
72
|
+
* content instead.
|
|
73
|
+
* - The holder gives the Root a definite width, as any block does. Inside a shrink-to-fit frame
|
|
74
|
+
* there is no width to measure the shares against.
|
|
75
|
+
* - Content that cannot wrap - an unbroken string, a fixed-width control - needs its own overflow
|
|
76
|
+
* contract, as `Table.Root` has; the column will not widen to hold it.
|
|
77
|
+
* - `Root`'s children are `Column`s. Anything else placed beside them is rendered as given but is
|
|
78
|
+
* not a column: it takes no weight, counts for no gap or threshold, and sits in the row as
|
|
79
|
+
* content of its own width, which breaks the proportions. Content belongs inside a `Column`.
|
|
80
|
+
*
|
|
81
|
+
* @UXGuidelines
|
|
82
|
+
* - A minimum is the width below which the column's content stops being readable or operable -
|
|
83
|
+
* the narrowest a comparison table can be scanned, the narrowest a summary's labels keep their
|
|
84
|
+
* lines - not the width the designer would like. The stack is the readable fallback.
|
|
85
|
+
* - Weights are structural relationships: `2` and `1` say the table is the subject and the summary
|
|
86
|
+
* its support. A ratio chosen to hit a pixel width is a measurement, and the theme owns those.
|
|
87
|
+
*/
|
|
88
|
+
export declare const ColumnLayout: {
|
|
89
|
+
readonly Root: FunctionComponent<IColumnLayoutRootProps>;
|
|
90
|
+
readonly Column: FunctionComponent<IColumnLayoutColumnProps>;
|
|
91
|
+
};
|
|
92
|
+
export {};
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import type { VariantProps } from 'class-variance-authority';
|
|
2
|
+
import { type FunctionComponent, type ReactNode } from 'react';
|
|
3
|
+
declare const fieldRowRoot: (props?: ({
|
|
4
|
+
gap?: "stack" | "region" | null | undefined;
|
|
5
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
|
+
export interface IFieldRowRootProps extends VariantProps<typeof fieldRowRoot> {
|
|
7
|
+
/** `FieldRow.Field` and `FieldRow.Actions` members, in reading order. */
|
|
8
|
+
children?: ReactNode;
|
|
9
|
+
testId?: string;
|
|
10
|
+
}
|
|
11
|
+
export interface IFieldRowFieldProps {
|
|
12
|
+
/** One existing labelled field - `Input`, `NumberInput`, `Select`, `MultiSelect` or `TextArea`. */
|
|
13
|
+
children?: ReactNode;
|
|
14
|
+
/** The field's share of its row relative to the other fields on it. Positive and finite; `1`
|
|
15
|
+
* when omitted, so fields share a row equally unless one says otherwise. */
|
|
16
|
+
weight?: number;
|
|
17
|
+
/** The name of the consumer's theme token holding this field's minimum readable width, such as
|
|
18
|
+
* `--search-field-min-width`. A name, never a length, an expression or a `var()`. */
|
|
19
|
+
minWidth: `--${string}`;
|
|
20
|
+
testId?: string;
|
|
21
|
+
}
|
|
22
|
+
export interface IFieldRowActionsProps {
|
|
23
|
+
/** The consumer's action buttons, in reading order. */
|
|
24
|
+
children?: ReactNode;
|
|
25
|
+
testId?: string;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* A wrapping row of labelled fields and the shared actions that trail them, aligned on the bottom
|
|
29
|
+
* edges of the controls themselves rather than on the fields' boxes - so a label that wraps, an
|
|
30
|
+
* optional marker, a hint or an error on one field never pushes its neighbours' controls out of
|
|
31
|
+
* line. It owns that one arrangement and nothing else: no form, no landmark, no filter meaning,
|
|
32
|
+
* no wording, and no outer space. Composed from `Root`, a `Field` around each existing labelled
|
|
33
|
+
* field, and `Actions` around the consumer's buttons (docs/adr/0008, Amendments).
|
|
34
|
+
*
|
|
35
|
+
* @Guarantees — enforced on every render
|
|
36
|
+
* - `Root` renders a `div` with no role and no margin; the members render unmodified inside their
|
|
37
|
+
* items in content order, so reading and keyboard order are the content's.
|
|
38
|
+
* - On each row, every control's bottom edge and the actions' bottom edge meet the deepest one.
|
|
39
|
+
* The control is the element a field's own label labels - the association every field already
|
|
40
|
+
* guarantees - so a taller control, a `TextArea` or a group of wrapped buttons keeps its height
|
|
41
|
+
* and the others come down to it. Labels, markers, hints and errors are never the anchor.
|
|
42
|
+
* - Items wrap progressively at the available width of the holder, not the viewport: a row holds
|
|
43
|
+
* what fits every field's minimum, and each row aligns its controls independently. A field alone
|
|
44
|
+
* on a row narrower than its minimum fits that row rather than overflowing it.
|
|
45
|
+
* - Each row's width is shared among its fields in proportion to their `weight`s - equal by
|
|
46
|
+
* default - after the gaps and the actions' content width are reserved. Minimums come from the
|
|
47
|
+
* consumer's theme tokens named by `minWidth`, resolved live, so a theme change re-wraps. A
|
|
48
|
+
* field whose share would fall below its minimum keeps the minimum, and the others share the
|
|
49
|
+
* rest by weight.
|
|
50
|
+
* - The actions stay one trailing group: they move to the next row together, and their buttons
|
|
51
|
+
* wrap inside the group only once the group cannot fit on a row by itself, still in order.
|
|
52
|
+
* - `gap` selects which space role separates items along a row: `stack` (the default), the
|
|
53
|
+
* sibling gap of controls that belong together, or `region`. Wrapped rows and the buttons
|
|
54
|
+
* inside the actions are always `--space-stack`, as `Cluster` fixes its wrapped lines.
|
|
55
|
+
* - Reflow - a resize, a message appearing, a label changing, a field omitted or taken in - keeps
|
|
56
|
+
* every retained control mounted, with its value, selection and focus; nothing is re-keyed.
|
|
57
|
+
* Alignment is measured before paint on every render and again whenever an item's content
|
|
58
|
+
* resizes, so no frame paints a misaligned row. An omitted field reserves no space.
|
|
59
|
+
* - No literal length and no numbered spacing rung appears in the recipes; a `weight` that is
|
|
60
|
+
* not a positive finite number, or a `minWidth` that is not a custom property name, throws a
|
|
61
|
+
* `FieldRowConfigurationError`, and a member outside `Root` throws a
|
|
62
|
+
* `FieldRowCompositionError`.
|
|
63
|
+
*
|
|
64
|
+
* @CallerMustEnsure — the component cannot see these and does not check them
|
|
65
|
+
* - Every `minWidth` token is declared in the applicable theme with a nonnegative CSS length, on
|
|
66
|
+
* the row or an ancestor, in any unit including font-relative ones. An undeclared token is not a
|
|
67
|
+
* responsive configuration: the field then falls back to its content's minimum width.
|
|
68
|
+
* - `Field` and `Actions` are the direct children of `Root` - through arrays, fragments and
|
|
69
|
+
* consumer components that render them, but never wrapped in an element of the consumer's own.
|
|
70
|
+
* - A `Field` holds exactly one labelled field; the field keeps its label, hint, optional marker
|
|
71
|
+
* and error, and FieldRow reads none of their wording.
|
|
72
|
+
* - The form, its submission and any filter meaning belong to the consumer; the actions are the
|
|
73
|
+
* consumer's `Button`s, in the consumer's words, and a filter is never a landmark by itself.
|
|
74
|
+
*
|
|
75
|
+
* @UXGuidelines
|
|
76
|
+
* - `gap="stack"` is a filter: fields and actions that act together. `gap="region"` separates
|
|
77
|
+
* fields that are not one set.
|
|
78
|
+
* - Weight a search field higher than a threshold or a select; give every field a minimum its
|
|
79
|
+
* label and placeholder can be read at, and expect the row to wrap at that width.
|
|
80
|
+
* - Keep action wording short: a long label widens the group and wraps the row sooner.
|
|
81
|
+
*/
|
|
82
|
+
export declare const FieldRow: {
|
|
83
|
+
readonly Root: FunctionComponent<IFieldRowRootProps>;
|
|
84
|
+
readonly Field: FunctionComponent<IFieldRowFieldProps>;
|
|
85
|
+
readonly Actions: FunctionComponent<IFieldRowActionsProps>;
|
|
86
|
+
};
|
|
87
|
+
export {};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { IControlEdge } from './IControlEdge';
|
|
2
|
+
/**
|
|
3
|
+
* The top padding each item needs so that, on every row, every control's bottom edge meets the
|
|
4
|
+
* deepest one. Rows are found from the tops alone, so the caller hands in the measurements of a
|
|
5
|
+
* finished line layout and gets back one padding per item, in the same order.
|
|
6
|
+
*/
|
|
7
|
+
export declare const alignControlEdges: (items: readonly IControlEdge[]) => readonly number[];
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import type { FunctionComponent, ReactNode } from 'react';
|
|
2
|
+
export interface IBoxProps {
|
|
3
|
+
/** The enclosed matter - a Stack, a heading, facts. Rendered unmodified: Box imposes no anatomy. */
|
|
4
|
+
children?: ReactNode;
|
|
5
|
+
/** Exposes the enclosure as an accessible group with this name. Omit it, or pass an empty string,
|
|
6
|
+
* for an ordinary enclosure: an unnamed Box has no role and is inert to assistive technology. The
|
|
7
|
+
* name is never rendered - the consumer supplies any visible heading. */
|
|
8
|
+
name?: string;
|
|
9
|
+
testId?: string;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* A bounded content group with a semantic surface, border and inner padding. The consumer owns its
|
|
13
|
+
* content, headings and internal arrangement; Stack arranges, Box encloses.
|
|
14
|
+
*
|
|
15
|
+
* @Guarantees — enforced on every render
|
|
16
|
+
* - It paints `surface`, `foreground` and a one-pixel `border` hairline, with square corners and no
|
|
17
|
+
* shadow: it borrows neither the control radius nor the floating-layer elevation.
|
|
18
|
+
* - Its inset is the one `--space-box-inset` role on all four sides. There is no padding or size
|
|
19
|
+
* prop: the theme chooses the value, and re-pointing the role moves the actual inset.
|
|
20
|
+
* - It fills the width its holder allocates, border and padding included, grows with its content
|
|
21
|
+
* and shrinks inside a narrow holder: no fixed width, height, minimum viewport or aspect. Long
|
|
22
|
+
* prose and unbroken text wrap inside it rather than truncate, and nothing is clipped.
|
|
23
|
+
* - With a non-empty `name` it is an accessible group carrying that name; without one, a plain
|
|
24
|
+
* `div` with no role, no label and no landmark. In neither case does it add a focus stop or
|
|
25
|
+
* listen for a key, so controls inside keep their ordinary keyboard behaviour.
|
|
26
|
+
* - An empty Box is an empty enclosure - surface, border and padding - with no invented wording.
|
|
27
|
+
* - `children` render unmodified, in order, and it needs no JavaScript.
|
|
28
|
+
*
|
|
29
|
+
* @CallerMustEnsure — the component cannot see these and does not check them
|
|
30
|
+
* - Where `name` is given it matches the visible heading the consumer places inside, since the
|
|
31
|
+
* component labels the group with that string and cannot reference the heading's id.
|
|
32
|
+
* - Content with its own intrinsic sizing or overflow contract - a table, a figure, a code block -
|
|
33
|
+
* handles its own overflow; the Box wraps text and never scrolls or clips on its behalf.
|
|
34
|
+
* - Whether an empty group should render at all is the consumer's decision: omit the Box rather
|
|
35
|
+
* than expecting empty-state text from it.
|
|
36
|
+
*
|
|
37
|
+
* @UXGuidelines
|
|
38
|
+
* - A Box groups related facts that read as one unit. Enclosing every group on a page turns the
|
|
39
|
+
* boundary into noise; the consumer decides which group earns one.
|
|
40
|
+
*/
|
|
41
|
+
export declare const Box: FunctionComponent<IBoxProps>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { VariantProps } from 'class-variance-authority';
|
|
2
2
|
import type { FunctionComponent, ReactNode } from 'react';
|
|
3
3
|
declare const brandmark: (props?: ({
|
|
4
|
-
cut?: "
|
|
4
|
+
cut?: "compact" | "full" | null | undefined;
|
|
5
5
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
6
|
export interface IBrandmarkProps extends VariantProps<typeof brandmark> {
|
|
7
7
|
/**
|
|
@@ -1,16 +1,35 @@
|
|
|
1
|
+
import type { VariantProps } from 'class-variance-authority';
|
|
1
2
|
import type { FunctionComponent, ReactNode } from 'react';
|
|
2
|
-
|
|
3
|
+
declare const definitionList: (props?: ({
|
|
4
|
+
density?: "compact" | "comfortable" | null | undefined;
|
|
5
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
|
+
/** The name of a CSS custom property, as written in a stylesheet: `--summary-term-min-width`. */
|
|
7
|
+
type MinWidthToken = `--${string}`;
|
|
8
|
+
/** One column's allocation: its share of the row relative to the other's, and the theme token that
|
|
9
|
+
* holds its minimum readable width. Named only through `Root`'s props. */
|
|
10
|
+
type ColumnAllocation = {
|
|
11
|
+
weight: number;
|
|
12
|
+
minWidth: MinWidthToken;
|
|
13
|
+
};
|
|
14
|
+
export interface IDefinitionListRootProps extends VariantProps<typeof definitionList> {
|
|
15
|
+
/** The term column's share of the row and its minimum readable width, shared by every item.
|
|
16
|
+
* Defaults to weight `1` and the library's `--definition-term-min-width`; a consumer's own
|
|
17
|
+
* token is declared in the theme with a nonnegative CSS length, as ColumnLayout's are. */
|
|
18
|
+
termColumn?: ColumnAllocation;
|
|
19
|
+
/** The description column's share and minimum, likewise. Defaults to weight `2` and
|
|
20
|
+
* `--definition-description-min-width`. */
|
|
21
|
+
descriptionColumn?: ColumnAllocation;
|
|
3
22
|
children?: ReactNode;
|
|
4
23
|
testId?: string;
|
|
5
24
|
}
|
|
6
|
-
interface IDefinitionListItemProps {
|
|
25
|
+
export interface IDefinitionListItemProps {
|
|
7
26
|
children?: ReactNode;
|
|
8
27
|
testId?: string;
|
|
9
28
|
}
|
|
10
|
-
interface IDefinitionListTermProps {
|
|
29
|
+
export interface IDefinitionListTermProps {
|
|
11
30
|
children?: ReactNode;
|
|
12
31
|
}
|
|
13
|
-
interface IDefinitionListDescriptionProps {
|
|
32
|
+
export interface IDefinitionListDescriptionProps {
|
|
14
33
|
children?: ReactNode;
|
|
15
34
|
}
|
|
16
35
|
/**
|
|
@@ -20,17 +39,48 @@ interface IDefinitionListDescriptionProps {
|
|
|
20
39
|
* `Description` a `<dd>`.
|
|
21
40
|
*
|
|
22
41
|
* @Guarantees — enforced on every render
|
|
23
|
-
* - Renders semantic `dl`/`div`/`dt`/`dd
|
|
42
|
+
* - Renders semantic `dl`/`div`/`dt`/`dd` at either density, and works with JavaScript off: the
|
|
43
|
+
* arrangement is a stylesheet rule, so nothing is measured, reordered or remounted, and resizing
|
|
44
|
+
* keeps every descendant's state, focus and keyboard order.
|
|
24
45
|
* - The term is fixed to the subtitle type role and exposes no size prop or variant (docs/adr/0005).
|
|
25
|
-
*
|
|
46
|
+
* The description is body, muted, and capped at `--measure`; the term carries no measure cap.
|
|
47
|
+
* Density changes neither: `compact` pads each item from `--space-definition-item-compact` where
|
|
48
|
+
* `comfortable` (the default) pads from `--space-definition-item`, and nothing else moves.
|
|
26
49
|
* - A hairline sits above the first item and below every item, in `border`, and the block closes at
|
|
27
50
|
* the foot. No card, box, fill, icon or bullet - it reads from the rules alone.
|
|
28
|
-
* -
|
|
29
|
-
*
|
|
51
|
+
* - Every item shares one allocation: the term column and the description column each take a share
|
|
52
|
+
* of the width left after the column gap in proportion to their weights, `1` and `2` unless the
|
|
53
|
+
* caller says otherwise. The row holds while both shares are at least their minimum readable
|
|
54
|
+
* width; the moment one falls short, every item in the list puts its terms above its description
|
|
55
|
+
* at the full width, separated by the stack role. There is no in-between, and the minimum decides
|
|
56
|
+
* the switch rather than flooring a width. For column gap g, total weight S and minimums m_i the
|
|
57
|
+
* row fits at and above `g + max(m_i * S / w_i)`.
|
|
58
|
+
* - The width measured is the list's own, never the viewport, so a narrow list on a wide screen
|
|
59
|
+
* stacks while a wide one beside it keeps its columns, and a theme that re-points a minimum -
|
|
60
|
+
* at any scope - moves the threshold with it.
|
|
61
|
+
* - A long phrase or an unbroken value wraps inside its column; no content is truncated, nothing
|
|
62
|
+
* overlaps, and the list never widens past its holder.
|
|
63
|
+
* - A non-positive or non-finite `weight`, or a `minWidth` that is not a custom-property name,
|
|
64
|
+
* throws {@link DefinitionListConfigurationError}: a programmer error, raised loud and early.
|
|
30
65
|
*
|
|
31
|
-
* @
|
|
66
|
+
* @CallerMustEnsure — the component cannot see these and does not check them
|
|
32
67
|
* - Several `Term`s may share one `Description`; keep them inside one `Item` so the term column
|
|
33
68
|
* stays intact.
|
|
69
|
+
* - A `minWidth` token the caller names is declared, on the list or an ancestor of it, as a valid
|
|
70
|
+
* nonnegative CSS length. The library's own two defaults are declared in every token stylesheet.
|
|
71
|
+
* A missing or invalid token is not a responsive configuration: the threshold has nothing to
|
|
72
|
+
* compare and the list stays stacked at every width.
|
|
73
|
+
* - The holder gives the list a definite width, as any block, grid track or Dialog content region
|
|
74
|
+
* does. Inside a shrink-to-fit frame an inline-size container contributes no width of its own.
|
|
75
|
+
*
|
|
76
|
+
* @UXGuidelines
|
|
77
|
+
* - Choose `compact` for a fact list - short values beside their labels in a panel or a content
|
|
78
|
+
* Dialog - and `comfortable` for a glossary. The choice is what the list holds, never how much
|
|
79
|
+
* air a page wants.
|
|
80
|
+
* - A minimum is the width below which a column's content stops being readable - the narrowest
|
|
81
|
+
* the labels keep their lines - not the width the designer would like; the stack is the readable
|
|
82
|
+
* fallback. Weights are structural: `1` and `3` say the value is the subject and the term its
|
|
83
|
+
* label, and a ratio chosen to hit a pixel width is a measurement, which the theme owns.
|
|
34
84
|
*/
|
|
35
85
|
export declare const DefinitionList: {
|
|
36
86
|
readonly Root: FunctionComponent<IDefinitionListRootProps>;
|