npm - @monimesl/dot-renderer-react - Versions diffs - 0.1.0-alpha.3 → 0.1.0-alpha.5 - Mend

@monimesl/dot-renderer-react 0.1.0-alpha.3 → 0.1.0-alpha.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/LICENSE-PHOSPHOR +21 -0
package/dist/garra-versions.json +7 -0
package/dist/index.d.ts +19 -3
package/dist/index.js +22408 -1107
package/dist/react-host/19.3.0/react-dom.js +3 -0
package/dist/react-host/19.3.0/react-host.js +6 -6
package/dist/styles.css +1 -0
package/package.json +19 -8
package/dist/index.d.ts.map +0 -1
package/dist/index.js.map +0 -1

package/dist/styles.css ADDED Viewed

@@ -0,0 +1 @@

+ @layer reset;@layer base{[data-garra-adornment]{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}[data-garra-adornment]>[data-garra-icon]{display:block}[data-garra-icon][data-color=muted]{color:var(--garra-colors-icon-secondary)}[data-garra-icon][data-color=danger]{color:var(--garra-colors-feedback-danger-icon)}[data-garra-icon][data-color=success]{color:var(--garra-colors-feedback-success-icon)}[data-garra-icon][data-size=sm]{width:var(--garra-sizes-icon-small);height:var(--garra-sizes-icon-small)}[data-garra-icon][data-size=md]{width:var(--garra-sizes-icon-default);height:var(--garra-sizes-icon-default)}[data-garra-icon][data-size=lg]{width:var(--garra-sizes-icon-large);height:var(--garra-sizes-icon-large)}:root,[data-garra-mode],[data-garra-preset]{color:var(--garra-colors-text-primary);font-family:Inter,system-ui,sans-serif}:root,[data-garra-mode=system]{color-scheme:light dark}[data-garra-mode=light]{color-scheme:light}[data-garra-mode=dark]{color-scheme:dark}[data-garra-mode] *,[data-garra-mode] :before,[data-garra-mode] :after{box-sizing:border-box}}@layer tokens{:where(:root,:host,[data-garra-mode]),[data-garra-mode=light]{--garra-border-widths-default:1px;--garra-border-widths-emphasis:2px;--garra-border-widths-none:0px;--garra-border-widths-focus-ring-width:2px;--garra-colors-accent-icon:#1c1c1e;--garra-colors-accent-inverse-default:#7e7e7f;--garra-colors-accent-inverse-hover:#7e7e7f;--garra-colors-accent-inverse-pressed:#7e7e7f;--garra-colors-accent-solid-background-default:#1c1c1e;--garra-colors-accent-solid-background-hover:#1c1c1d;--garra-colors-accent-solid-background-pressed:#1b1b1d;--garra-colors-accent-solid-foreground-default:#fff;--garra-colors-accent-solid-foreground-hover:#fff;--garra-colors-accent-solid-foreground-pressed:#fff;--garra-colors-accent-surface-background:#ededed;--garra-colors-accent-surface-background-hover:#e1e1e2;--garra-colors-accent-surface-border:#1c1c1e;--garra-colors-accent-surface-foreground:#1c1c1e;--garra-colors-accent-text:#1c1c1e;--garra-colors-action-destructive-background-default:#ce2c31;--garra-colors-action-destructive-background-hover:#c62b30;--garra-colors-action-destructive-background-pressed:#bf2a2e;--garra-colors-action-destructive-border-default:#ce2c31;--garra-colors-action-destructive-border-hover:#ce2c31;--garra-colors-action-destructive-border-pressed:#ce2c31;--garra-colors-action-destructive-foreground-default:#fff;--garra-colors-action-destructive-foreground-hover:#fff;--garra-colors-action-destructive-foreground-pressed:#fff;--garra-colors-action-destructive-subtle-background-default:#f9e6e6;--garra-colors-action-destructive-subtle-background-hover:#f7ddde;--garra-colors-action-destructive-subtle-background-pressed:#f5d5d6;--garra-colors-action-destructive-text:#b7272c;--garra-colors-action-notice-background-default:#6550b9;--garra-colors-action-notice-background-hover:#624db2;--garra-colors-action-notice-background-pressed:#5e4bac;--garra-colors-action-notice-border-default:#6550b9;--garra-colors-action-notice-border-hover:#6550b9;--garra-colors-action-notice-border-pressed:#6550b9;--garra-colors-action-notice-foreground-default:#fff;--garra-colors-action-notice-foreground-hover:#fff;--garra-colors-action-notice-foreground-pressed:#fff;--garra-colors-action-notice-subtle-background-default:#edeaf7;--garra-colors-action-notice-subtle-background-hover:#e6e3f4;--garra-colors-action-notice-subtle-background-pressed:#e0dcf1;--garra-colors-action-notice-text:#6550b9;--garra-colors-action-primary-background-default:var(--garra-colors-accent-solid-background-default);--garra-colors-action-primary-background-hover:var(--garra-colors-accent-solid-background-hover);--garra-colors-action-primary-background-pressed:var(--garra-colors-accent-solid-background-pressed);--garra-colors-action-primary-border-default:var(--garra-colors-accent-surface-border);--garra-colors-action-primary-border-hover:var(--garra-colors-accent-surface-border);--garra-colors-action-primary-border-pressed:var(--garra-colors-accent-surface-border);--garra-colors-action-primary-foreground-default:var(--garra-colors-accent-solid-foreground-default);--garra-colors-action-primary-foreground-hover:var(--garra-colors-accent-solid-foreground-hover);--garra-colors-action-primary-foreground-pressed:var(--garra-colors-accent-solid-foreground-pressed);--garra-colors-action-primary-subtle-background-default:#e1e1e2;--garra-colors-action-primary-subtle-background-hover:#d8d8d9;--garra-colors-action-primary-subtle-background-pressed:#cfcfd0;--garra-colors-action-primary-text:#1c1c1e;--garra-colors-action-quiet-background-default:#0000;--garra-colors-action-quiet-background-hover:#f9f9f9;--garra-colors-action-quiet-background-pressed:#f1f1f1;--garra-colors-action-quiet-foreground-default:var(--garra-colors-text-primary);--garra-colors-action-quiet-foreground-hover:var(--garra-colors-text-primary);--garra-colors-action-quiet-foreground-pressed:var(--garra-colors-text-primary);--garra-colors-action-secondary-background-default:#fff;--garra-colors-action-secondary-background-hover:#f9f9f9;--garra-colors-action-secondary-background-pressed:#f1f1f1;--garra-colors-action-secondary-border-default:var(--garra-colors-border-control);--garra-colors-action-secondary-border-hover:var(--garra-colors-border-control-hover);--garra-colors-action-secondary-border-pressed:var(--garra-colors-border-control-hover);--garra-colors-action-secondary-foreground-default:var(--garra-colors-text-primary);--garra-colors-action-secondary-foreground-hover:var(--garra-colors-text-primary);--garra-colors-action-secondary-foreground-pressed:var(--garra-colors-text-primary);--garra-colors-action-secondary-subtle-background-default:#f1f1f1;--garra-colors-action-secondary-subtle-background-hover:#e7e7e7;--garra-colors-action-secondary-subtle-background-pressed:#dedede;--garra-colors-action-secondary-text:#111;--garra-colors-action-success-background-default:#218358;--garra-colors-action-success-background-hover:#207e55;--garra-colors-action-success-background-pressed:#207a52;--garra-colors-action-success-border-default:#218358;--garra-colors-action-success-border-hover:#218358;--garra-colors-action-success-border-pressed:#218358;--garra-colors-action-success-foreground-default:#fff;--garra-colors-action-success-foreground-hover:#fff;--garra-colors-action-success-foreground-pressed:#fff;--garra-colors-action-success-subtle-background-default:#e4f0eb;--garra-colors-action-success-subtle-background-hover:#dbebe4;--garra-colors-action-success-subtle-background-pressed:#d3e6de;--garra-colors-action-success-text:#1d724d;--garra-colors-action-warning-background-default:#ab6400;--garra-colors-action-warning-background-hover:#a56101;--garra-colors-action-warning-background-pressed:#9f5d01;--garra-colors-action-warning-border-default:#ab6400;--garra-colors-action-warning-border-hover:#ab6400;--garra-colors-action-warning-border-pressed:#ab6400;--garra-colors-action-warning-foreground-default:#fff;--garra-colors-action-warning-foreground-hover:#fff;--garra-colors-action-warning-foreground-pressed:#fff;--garra-colors-action-warning-subtle-background-default:#f5ece0;--garra-colors-action-warning-subtle-background-hover:#f2e6d6;--garra-colors-action-warning-subtle-background-pressed:#eee0cc;--garra-colors-action-warning-text:#935600;--garra-colors-background-canvas:#f2f2f2;--garra-colors-background-inverse:#111;--garra-colors-background-overlay:var(--garra-colors-background-surface-raised);--garra-colors-background-scrim:#0000007a;--garra-colors-background-surface:#fff;--garra-colors-background-surface-raised:var(--garra-colors-background-surface);--garra-colors-background-surface-sunken:var(--garra-colors-background-canvas);--garra-colors-border-control:#838383;--garra-colors-border-control-hover:#7c7c7c;--garra-colors-border-decorative:#d9d9d9;--garra-colors-border-disabled:var(--garra-colors-disabled-border);--garra-colors-disabled-background:#f1f1f1;--garra-colors-disabled-border:var(--garra-colors-border-decorative);--garra-colors-disabled-foreground:#8a8a8a;--garra-colors-feedback-danger-background:#fbeeef;--garra-colors-feedback-danger-border:#ebaaad;--garra-colors-feedback-danger-icon:#ce2c31;--garra-colors-feedback-danger-text:#ce2c31;--garra-colors-feedback-neutral-background:var(--garra-colors-fill-tertiary);--garra-colors-feedback-neutral-border:var(--garra-colors-border-decorative);--garra-colors-feedback-neutral-icon:var(--garra-colors-icon-secondary);--garra-colors-feedback-neutral-text:var(--garra-colors-text-primary);--garra-colors-feedback-notice-background:#f3f1f9;--garra-colors-feedback-notice-border:#c1b9e3;--garra-colors-feedback-notice-icon:#6550b9;--garra-colors-feedback-notice-text:#6550b9;--garra-colors-feedback-success-background:#edf5f2;--garra-colors-feedback-success-border:#a6cdbc;--garra-colors-feedback-success-icon:#218358;--garra-colors-feedback-success-text:#207d54;--garra-colors-feedback-warning-background:#f8f3eb;--garra-colors-feedback-warning-border:#ddc199;--garra-colors-feedback-warning-icon:#ab6400;--garra-colors-feedback-warning-text:#a15e00;--garra-colors-fill-primary:#e7e7e7;--garra-colors-fill-secondary:#f1f1f1;--garra-colors-fill-tertiary:#f9f9f9;--garra-colors-focus-inverse-ring:#0d74ce;--garra-colors-focus-inverse-separation:var(--garra-colors-background-inverse);--garra-colors-focus-ring:#0d74ce;--garra-colors-focus-separation:var(--garra-colors-background-surface);--garra-colors-icon-disabled:var(--garra-colors-disabled-foreground);--garra-colors-icon-inverse:var(--garra-colors-text-inverse);--garra-colors-icon-inverse-secondary:var(--garra-colors-text-inverse-secondary);--garra-colors-icon-primary:var(--garra-colors-text-primary);--garra-colors-icon-secondary:var(--garra-colors-text-secondary);--garra-colors-icon-tertiary:var(--garra-colors-text-tertiary);--garra-colors-intent-danger-border:#f4a9aa;--garra-colors-intent-danger-solid:#ce2c31;--garra-colors-intent-danger-solid-hover:#be292f;--garra-colors-intent-danger-solid-pressed:#ae262d;--garra-colors-intent-danger-surface:#feebec;--garra-colors-intent-danger-surface-hover:#ffdbdc;--garra-colors-intent-danger-surface-pressed:#ffcdce;--garra-colors-intent-danger-text:#641723;--garra-colors-intent-notice-border:#c2b5f5;--garra-colors-intent-notice-solid:#6550b9;--garra-colors-intent-notice-solid-hover:#5d4aac;--garra-colors-intent-notice-solid-pressed:#55439e;--garra-colors-intent-notice-surface:#f4f0fe;--garra-colors-intent-notice-surface-hover:#ebe4ff;--garra-colors-intent-notice-surface-pressed:#e1d9ff;--garra-colors-intent-notice-text:#2f265f;--garra-colors-intent-success-border:#8eceaa;--garra-colors-intent-success-solid:#218358;--garra-colors-intent-success-solid-hover:#207852;--garra-colors-intent-success-solid-pressed:#1f6d4b;--garra-colors-intent-success-surface:#e6f6eb;--garra-colors-intent-success-surface-hover:#d6f1df;--garra-colors-intent-success-surface-pressed:#c4e8d1;--garra-colors-intent-success-text:#193b2d;--garra-colors-intent-warning-border:#e9c162;--garra-colors-intent-warning-solid:#ab6400;--garra-colors-intent-warning-solid-hover:#9d5d05;--garra-colors-intent-warning-solid-pressed:#8f560a;--garra-colors-intent-warning-surface:#fff7c2;--garra-colors-intent-warning-surface-hover:#ffee9c;--garra-colors-intent-warning-surface-pressed:#fbe577;--garra-colors-intent-warning-text:#4f3422;--garra-colors-interaction-background-default:#fff;--garra-colors-interaction-background-hover:#f9f9f9;--garra-colors-interaction-background-pressed:#f1f1f1;--garra-colors-link-default:var(--garra-colors-accent-text);--garra-colors-link-hover:var(--garra-colors-accent-text);--garra-colors-link-inverse-default:var(--garra-colors-accent-inverse-default);--garra-colors-link-inverse-hover:var(--garra-colors-accent-inverse-hover);--garra-colors-link-inverse-pressed:var(--garra-colors-accent-inverse-pressed);--garra-colors-link-inverse-visited:var(--garra-colors-text-inverse-secondary);--garra-colors-link-pressed:var(--garra-colors-accent-text);--garra-colors-link-visited:#646464;--garra-colors-progress-indicator:#1c1c1e;--garra-colors-progress-track:var(--garra-colors-fill-primary);--garra-colors-read-only-background:var(--garra-colors-background-surface-sunken);--garra-colors-read-only-border:var(--garra-colors-border-decorative);--garra-colors-read-only-foreground:var(--garra-colors-text-primary);--garra-colors-selection-background:#e7e7e7;--garra-colors-selection-background-hover:#dedede;--garra-colors-selection-border:var(--garra-colors-border-control-hover);--garra-colors-selection-foreground:var(--garra-colors-text-primary);--garra-colors-skeleton-base:var(--garra-colors-fill-tertiary);--garra-colors-skeleton-highlight:var(--garra-colors-fill-primary);--garra-colors-text-disabled:var(--garra-colors-disabled-foreground);--garra-colors-text-inverse:#fff;--garra-colors-text-inverse-secondary:#b8b8b8;--garra-colors-text-placeholder:var(--garra-colors-text-tertiary);--garra-colors-text-primary:#111;--garra-colors-text-secondary:#646464;--garra-colors-text-tertiary:#676767;--garra-colors-validation-invalid-background:var(--garra-colors-feedback-danger-background);--garra-colors-validation-invalid-border:var(--garra-colors-feedback-danger-icon);--garra-colors-validation-invalid-icon:var(--garra-colors-feedback-danger-icon);--garra-colors-validation-invalid-text:var(--garra-colors-feedback-danger-text);--garra-shadows-flat:0px 0px 0px 0px #0000000f;--garra-shadows-floating:0px 4px 8px -2px #0000001a, 0px 12px 24px -8px #0000001a;--garra-shadows-modal:0px 8px 16px -4px #0000001a, 0px 24px 48px -12px #00000029;--garra-shadows-raised:0px 1px 2px 0px #0000000f, 0px 2px 4px -1px #0000000f;--garra-spacing-focus-ring-offset:-2px;--garra-spacing-layout-gutter-narrow:1rem;--garra-spacing-layout-gutter-wide:2rem;--garra-spacing-content-gap:1rem;--garra-spacing-field-gap:1rem;--garra-spacing-help-gap:.25rem;--garra-spacing-inline-gap:.5rem;--garra-spacing-inset-comfortable:1.5rem;--garra-spacing-inset-compact:.5rem;--garra-spacing-inset-default:.75rem;--garra-spacing-label-gap:.5rem;--garra-spacing-page-gutter-narrow:var(--garra-spacing-layout-gutter-narrow);--garra-spacing-page-gutter-wide:var(--garra-spacing-layout-gutter-wide);--garra-spacing-panel-inset:var(--garra-spacing-inset-comfortable);--garra-spacing-section-gap:2rem;--garra-spacing-stack-default:var(--garra-spacing-inline-gap);--garra-spacing-stack-loose:1.5rem;--garra-spacing-stack-tight:.375rem;--garra-z-index-base:0;--garra-z-index-floating:200;--garra-z-index-modal:300;--garra-z-index-notification:400;--garra-z-index-sticky:100;--garra-sizes-layout-content-default:64rem;--garra-sizes-layout-content-form:40rem;--garra-sizes-layout-content-wide:80rem;--garra-sizes-control-comfortable:3rem;--garra-sizes-control-compact:1.75rem;--garra-sizes-control-default:2rem;--garra-sizes-icon-default:1.25rem;--garra-sizes-icon-large:1.5rem;--garra-sizes-icon-small:1rem;--garra-sizes-target-touch:44px;--garra-durations-motion-expand-duration:.2s;--garra-durations-motion-expand-reduced-duration:0s;--garra-durations-motion-feedback-duration:.1s;--garra-durations-motion-feedback-reduced-duration:0s;--garra-durations-motion-floating-duration:.12s;--garra-durations-motion-floating-reduced-duration:0s;--garra-durations-motion-immediate-duration:0s;--garra-durations-motion-immediate-reduced-duration:0s;--garra-durations-motion-overlay-enter-duration:.18s;--garra-durations-motion-overlay-enter-reduced-duration:0s;--garra-durations-motion-overlay-exit-duration:.18s;--garra-durations-motion-overlay-exit-reduced-duration:0s;--garra-durations-motion-position-duration:.18s;--garra-durations-motion-position-reduced-duration:0s;--garra-durations-motion-progress-duration:.5s;--garra-durations-motion-progress-reduced-duration:0s;--garra-durations-motion-progress-update-duration:.15s;--garra-durations-motion-progress-update-reduced-duration:0s;--garra-easings-motion-expand-easing:cubic-bezier(0, 0, 1, 1);--garra-easings-motion-feedback-easing:cubic-bezier(.2, 0, 0, 1);--garra-easings-motion-floating-easing:cubic-bezier(0, 0, 1, 1);--garra-easings-motion-immediate-easing:cubic-bezier(0, 0, 1, 1);--garra-easings-motion-overlay-enter-easing:cubic-bezier(0, 0, 1, 1);--garra-easings-motion-overlay-exit-easing:cubic-bezier(0, 0, 1, 1);--garra-easings-motion-position-easing:cubic-bezier(.2, 0, 0, 1);--garra-easings-motion-progress-easing:cubic-bezier(0, 0, 1, 1);--garra-easings-motion-progress-update-easing:cubic-bezier(.2, 0, 0, 1);--garra-radii-control:6px;--garra-radii-full:9999px;--garra-radii-overlay:12px;--garra-radii-pill:var(--garra-radii-full);--garra-radii-surface:8px}[data-garra-mode=dark]{--garra-border-widths-default:1px;--garra-border-widths-emphasis:2px;--garra-border-widths-none:0px;--garra-border-widths-focus-ring-width:2px;--garra-colors-accent-icon:#f5f5f5;--garra-colors-accent-inverse-default:#6e6e6e;--garra-colors-accent-inverse-hover:#6e6e6e;--garra-colors-accent-inverse-pressed:#6e6e6e;--garra-colors-accent-solid-background-default:#f5f5f5;--garra-colors-accent-solid-background-hover:#f5f5f5;--garra-colors-accent-solid-background-pressed:#f6f6f6;--garra-colors-accent-solid-foreground-default:#111;--garra-colors-accent-solid-foreground-hover:#111;--garra-colors-accent-solid-foreground-pressed:#111;--garra-colors-accent-surface-background:#2f2f2f;--garra-colors-accent-surface-background-hover:#3a3a3a;--garra-colors-accent-surface-border:#f5f5f5;--garra-colors-accent-surface-foreground:#f5f5f5;--garra-colors-accent-text:#f5f5f5;--garra-colors-action-destructive-background-default:#ff9592;--garra-colors-action-destructive-background-hover:#ff9996;--garra-colors-action-destructive-background-pressed:#fe9d9a;--garra-colors-action-destructive-border-default:#ff9592;--garra-colors-action-destructive-border-hover:#ff9592;--garra-colors-action-destructive-border-pressed:#ff9592;--garra-colors-action-destructive-foreground-default:#1e1e1e;--garra-colors-action-destructive-foreground-hover:#1e1e1e;--garra-colors-action-destructive-foreground-pressed:#1e1e1e;--garra-colors-action-destructive-subtle-background-default:#392c2c;--garra-colors-action-destructive-subtle-background-hover:#423131;--garra-colors-action-destructive-subtle-background-pressed:#4b3635;--garra-colors-action-destructive-text:#ff9592;--garra-colors-action-notice-background-default:#baa7ff;--garra-colors-action-notice-background-hover:#bcaaff;--garra-colors-action-notice-background-pressed:#bfadfe;--garra-colors-action-notice-border-default:#baa7ff;--garra-colors-action-notice-border-hover:#baa7ff;--garra-colors-action-notice-border-pressed:#baa7ff;--garra-colors-action-notice-foreground-default:#1e1e1e;--garra-colors-action-notice-foreground-hover:#1e1e1e;--garra-colors-action-notice-foreground-pressed:#1e1e1e;--garra-colors-action-notice-subtle-background-default:#312e39;--garra-colors-action-notice-subtle-background-hover:#373442;--garra-colors-action-notice-subtle-background-pressed:#3d394b;--garra-colors-action-notice-text:#baa7ff;--garra-colors-action-primary-background-default:var(--garra-colors-accent-solid-background-default);--garra-colors-action-primary-background-hover:var(--garra-colors-accent-solid-background-hover);--garra-colors-action-primary-background-pressed:var(--garra-colors-accent-solid-background-pressed);--garra-colors-action-primary-border-default:var(--garra-colors-accent-surface-border);--garra-colors-action-primary-border-hover:var(--garra-colors-accent-surface-border);--garra-colors-action-primary-border-pressed:var(--garra-colors-accent-surface-border);--garra-colors-action-primary-foreground-default:var(--garra-colors-accent-solid-foreground-default);--garra-colors-action-primary-foreground-hover:var(--garra-colors-accent-solid-foreground-hover);--garra-colors-action-primary-foreground-pressed:var(--garra-colors-accent-solid-foreground-pressed);--garra-colors-action-primary-subtle-background-default:#3a3a3a;--garra-colors-action-primary-subtle-background-hover:#434343;--garra-colors-action-primary-subtle-background-pressed:#4b4b4b;--garra-colors-action-primary-text:#f5f5f5;--garra-colors-action-quiet-background-default:#0000;--garra-colors-action-quiet-background-hover:#232323;--garra-colors-action-quiet-background-pressed:#2b2b2b;--garra-colors-action-quiet-foreground-default:var(--garra-colors-text-primary);--garra-colors-action-quiet-foreground-hover:var(--garra-colors-text-primary);--garra-colors-action-quiet-foreground-pressed:var(--garra-colors-text-primary);--garra-colors-action-secondary-background-default:#1e1e1e;--garra-colors-action-secondary-background-hover:#232323;--garra-colors-action-secondary-background-pressed:#2b2b2b;--garra-colors-action-secondary-border-default:var(--garra-colors-border-control);--garra-colors-action-secondary-border-hover:var(--garra-colors-border-control-hover);--garra-colors-action-secondary-border-pressed:var(--garra-colors-border-control-hover);--garra-colors-action-secondary-foreground-default:var(--garra-colors-text-primary);--garra-colors-action-secondary-foreground-hover:var(--garra-colors-text-primary);--garra-colors-action-secondary-foreground-pressed:var(--garra-colors-text-primary);--garra-colors-action-secondary-subtle-background-default:#2b2b2b;--garra-colors-action-secondary-subtle-background-hover:#343434;--garra-colors-action-secondary-subtle-background-pressed:#3c3c3c;--garra-colors-action-secondary-text:#f5f5f5;--garra-colors-action-success-background-default:#3dd68c;--garra-colors-action-success-background-hover:#44d790;--garra-colors-action-success-background-pressed:#4cd894;--garra-colors-action-success-border-default:#3dd68c;--garra-colors-action-success-border-hover:#3dd68c;--garra-colors-action-success-border-pressed:#3dd68c;--garra-colors-action-success-foreground-default:#1e1e1e;--garra-colors-action-success-foreground-hover:#1e1e1e;--garra-colors-action-success-foreground-pressed:#1e1e1e;--garra-colors-action-success-subtle-background-default:#22342b;--garra-colors-action-success-subtle-background-hover:#233b30;--garra-colors-action-success-subtle-background-pressed:#244334;--garra-colors-action-success-text:#3dd68c;--garra-colors-action-warning-background-default:#ffca16;--garra-colors-action-warning-background-hover:#ffcc1f;--garra-colors-action-warning-background-pressed:#fecd28;--garra-colors-action-warning-border-default:#ffca16;--garra-colors-action-warning-border-hover:#ffca16;--garra-colors-action-warning-border-pressed:#ffca16;--garra-colors-action-warning-foreground-default:#1e1e1e;--garra-colors-action-warning-foreground-hover:#1e1e1e;--garra-colors-action-warning-foreground-pressed:#1e1e1e;--garra-colors-action-warning-subtle-background-default:#39331d;--garra-colors-action-warning-subtle-background-hover:#423a1d;--garra-colors-action-warning-subtle-background-pressed:#4b401c;--garra-colors-action-warning-text:#ffca16;--garra-colors-background-canvas:#121212;--garra-colors-background-inverse:#f5f5f5;--garra-colors-background-overlay:var(--garra-colors-background-surface-raised);--garra-colors-background-scrim:#0000007a;--garra-colors-background-surface:#1e1e1e;--garra-colors-background-surface-raised:var(--garra-colors-background-surface);--garra-colors-background-surface-sunken:var(--garra-colors-background-canvas);--garra-colors-border-control:#7e7e7e;--garra-colors-border-control-hover:#949494;--garra-colors-border-decorative:#404040;--garra-colors-border-disabled:var(--garra-colors-disabled-border);--garra-colors-disabled-background:#2b2b2b;--garra-colors-disabled-border:var(--garra-colors-border-decorative);--garra-colors-disabled-foreground:#747474;--garra-colors-feedback-danger-background:#302827;--garra-colors-feedback-danger-border:#784e4c;--garra-colors-feedback-danger-icon:#ff9592;--garra-colors-feedback-danger-text:#ff9592;--garra-colors-feedback-neutral-background:var(--garra-colors-fill-tertiary);--garra-colors-feedback-neutral-border:var(--garra-colors-border-decorative);--garra-colors-feedback-neutral-icon:var(--garra-colors-icon-secondary);--garra-colors-feedback-neutral-text:var(--garra-colors-text-primary);--garra-colors-feedback-notice-background:#2a2930;--garra-colors-feedback-notice-border:#5c5578;--garra-colors-feedback-notice-icon:#baa7ff;--garra-colors-feedback-notice-text:#baa7ff;--garra-colors-feedback-success-background:#202d27;--garra-colors-feedback-success-border:#2a684a;--garra-colors-feedback-success-icon:#3dd68c;--garra-colors-feedback-success-text:#3dd68c;--garra-colors-feedback-warning-background:#302c1d;--garra-colors-feedback-warning-border:#78631b;--garra-colors-feedback-warning-icon:#ffca16;--garra-colors-feedback-warning-text:#ffca16;--garra-colors-fill-primary:#343434;--garra-colors-fill-secondary:#2b2b2b;--garra-colors-fill-tertiary:#232323;--garra-colors-focus-inverse-ring:#0d74ce;--garra-colors-focus-inverse-separation:var(--garra-colors-background-inverse);--garra-colors-focus-ring:#70b8ff;--garra-colors-focus-separation:var(--garra-colors-background-surface);--garra-colors-icon-disabled:var(--garra-colors-disabled-foreground);--garra-colors-icon-inverse:var(--garra-colors-text-inverse);--garra-colors-icon-inverse-secondary:var(--garra-colors-text-inverse-secondary);--garra-colors-icon-primary:var(--garra-colors-text-primary);--garra-colors-icon-secondary:var(--garra-colors-text-secondary);--garra-colors-icon-tertiary:var(--garra-colors-text-tertiary);--garra-colors-intent-danger-border:#8c333a;--garra-colors-intent-danger-solid:#ff9592;--garra-colors-intent-danger-solid-hover:#ff9e9d;--garra-colors-intent-danger-solid-pressed:#ffa7a7;--garra-colors-intent-danger-surface:#3b1219;--garra-colors-intent-danger-surface-hover:#500f1c;--garra-colors-intent-danger-surface-pressed:#611623;--garra-colors-intent-danger-text:#ffd1d9;--garra-colors-intent-notice-border:#56468b;--garra-colors-intent-notice-solid:#baa7ff;--garra-colors-intent-notice-solid-hover:#c0afff;--garra-colors-intent-notice-solid-pressed:#c6b7ff;--garra-colors-intent-notice-surface:#291f43;--garra-colors-intent-notice-surface-hover:#33255b;--garra-colors-intent-notice-surface-pressed:#3c2e69;--garra-colors-intent-notice-text:#e2ddfe;--garra-colors-intent-success-border:#28684a;--garra-colors-intent-success-solid:#3dd68c;--garra-colors-intent-success-solid-hover:#4eda95;--garra-colors-intent-success-solid-pressed:#60de9f;--garra-colors-intent-success-surface:#132d21;--garra-colors-intent-success-surface-hover:#113b29;--garra-colors-intent-success-surface-pressed:#174933;--garra-colors-intent-success-text:#b1f1cb;--garra-colors-intent-warning-border:#714f19;--garra-colors-intent-warning-solid:#ffca16;--garra-colors-intent-warning-solid-hover:#ffce2e;--garra-colors-intent-warning-solid-pressed:#ffd345;--garra-colors-intent-warning-surface:#302008;--garra-colors-intent-warning-surface-hover:#3f2700;--garra-colors-intent-warning-surface-pressed:#4d3000;--garra-colors-intent-warning-text:#ffe7b3;--garra-colors-interaction-background-default:#1e1e1e;--garra-colors-interaction-background-hover:#232323;--garra-colors-interaction-background-pressed:#2b2b2b;--garra-colors-link-default:var(--garra-colors-accent-text);--garra-colors-link-hover:var(--garra-colors-accent-text);--garra-colors-link-inverse-default:var(--garra-colors-accent-inverse-default);--garra-colors-link-inverse-hover:var(--garra-colors-accent-inverse-hover);--garra-colors-link-inverse-pressed:var(--garra-colors-accent-inverse-pressed);--garra-colors-link-inverse-visited:var(--garra-colors-text-inverse-secondary);--garra-colors-link-pressed:var(--garra-colors-accent-text);--garra-colors-link-visited:#b4b4b4;--garra-colors-progress-indicator:#f5f5f5;--garra-colors-progress-track:var(--garra-colors-fill-primary);--garra-colors-read-only-background:var(--garra-colors-background-surface-sunken);--garra-colors-read-only-border:var(--garra-colors-border-decorative);--garra-colors-read-only-foreground:var(--garra-colors-text-primary);--garra-colors-selection-background:#343434;--garra-colors-selection-background-hover:#3c3c3c;--garra-colors-selection-border:var(--garra-colors-border-control-hover);--garra-colors-selection-foreground:var(--garra-colors-text-primary);--garra-colors-skeleton-base:var(--garra-colors-fill-tertiary);--garra-colors-skeleton-highlight:var(--garra-colors-fill-primary);--garra-colors-text-disabled:var(--garra-colors-disabled-foreground);--garra-colors-text-inverse:#1e1e1e;--garra-colors-text-inverse-secondary:#5f5f5f;--garra-colors-text-placeholder:var(--garra-colors-text-tertiary);--garra-colors-text-primary:#f5f5f5;--garra-colors-text-secondary:#aaa;--garra-colors-text-tertiary:#9c9c9c;--garra-colors-validation-invalid-background:var(--garra-colors-feedback-danger-background);--garra-colors-validation-invalid-border:var(--garra-colors-feedback-danger-icon);--garra-colors-validation-invalid-icon:var(--garra-colors-feedback-danger-icon);--garra-colors-validation-invalid-text:var(--garra-colors-feedback-danger-text);--garra-shadows-flat:0px 0px 0px 0px #0000000f;--garra-shadows-floating:0px 4px 8px -2px #0000001a, 0px 12px 24px -8px #0000001a;--garra-shadows-modal:0px 8px 16px -4px #0000001a, 0px 24px 48px -12px #00000029;--garra-shadows-raised:0px 1px 2px 0px #0000000f, 0px 2px 4px -1px #0000000f;--garra-spacing-focus-ring-offset:-2px;--garra-spacing-layout-gutter-narrow:1rem;--garra-spacing-layout-gutter-wide:2rem;--garra-spacing-content-gap:1rem;--garra-spacing-field-gap:1rem;--garra-spacing-help-gap:.25rem;--garra-spacing-inline-gap:.5rem;--garra-spacing-inset-comfortable:1.5rem;--garra-spacing-inset-compact:.5rem;--garra-spacing-inset-default:.75rem;--garra-spacing-label-gap:.5rem;--garra-spacing-page-gutter-narrow:var(--garra-spacing-layout-gutter-narrow);--garra-spacing-page-gutter-wide:var(--garra-spacing-layout-gutter-wide);--garra-spacing-panel-inset:var(--garra-spacing-inset-comfortable);--garra-spacing-section-gap:2rem;--garra-spacing-stack-default:var(--garra-spacing-inline-gap);--garra-spacing-stack-loose:1.5rem;--garra-spacing-stack-tight:.375rem;--garra-z-index-base:0;--garra-z-index-floating:200;--garra-z-index-modal:300;--garra-z-index-notification:400;--garra-z-index-sticky:100;--garra-sizes-layout-content-default:64rem;--garra-sizes-layout-content-form:40rem;--garra-sizes-layout-content-wide:80rem;--garra-sizes-control-comfortable:3rem;--garra-sizes-control-compact:1.75rem;--garra-sizes-control-default:2rem;--garra-sizes-icon-default:1.25rem;--garra-sizes-icon-large:1.5rem;--garra-sizes-icon-small:1rem;--garra-sizes-target-touch:44px;--garra-durations-motion-expand-duration:.2s;--garra-durations-motion-expand-reduced-duration:0s;--garra-durations-motion-feedback-duration:.1s;--garra-durations-motion-feedback-reduced-duration:0s;--garra-durations-motion-floating-duration:.12s;--garra-durations-motion-floating-reduced-duration:0s;--garra-durations-motion-immediate-duration:0s;--garra-durations-motion-immediate-reduced-duration:0s;--garra-durations-motion-overlay-enter-duration:.18s;--garra-durations-motion-overlay-enter-reduced-duration:0s;--garra-durations-motion-overlay-exit-duration:.18s;--garra-durations-motion-overlay-exit-reduced-duration:0s;--garra-durations-motion-position-duration:.18s;--garra-durations-motion-position-reduced-duration:0s;--garra-durations-motion-progress-duration:.5s;--garra-durations-motion-progress-reduced-duration:0s;--garra-durations-motion-progress-update-duration:.15s;--garra-durations-motion-progress-update-reduced-duration:0s;--garra-easings-motion-expand-easing:cubic-bezier(0, 0, 1, 1);--garra-easings-motion-feedback-easing:cubic-bezier(.2, 0, 0, 1);--garra-easings-motion-floating-easing:cubic-bezier(0, 0, 1, 1);--garra-easings-motion-immediate-easing:cubic-bezier(0, 0, 1, 1);--garra-easings-motion-overlay-enter-easing:cubic-bezier(0, 0, 1, 1);--garra-easings-motion-overlay-exit-easing:cubic-bezier(0, 0, 1, 1);--garra-easings-motion-position-easing:cubic-bezier(.2, 0, 0, 1);--garra-easings-motion-progress-easing:cubic-bezier(0, 0, 1, 1);--garra-easings-motion-progress-update-easing:cubic-bezier(.2, 0, 0, 1);--garra-radii-control:6px;--garra-radii-full:9999px;--garra-radii-overlay:12px;--garra-radii-pill:var(--garra-radii-full);--garra-radii-surface:8px}[data-garra-density=dense]{--garra-spacing-content-gap:12px;--garra-spacing-field-gap:12px;--garra-spacing-inline-gap:4px;--garra-spacing-inset-comfortable:16px;--garra-spacing-inset-compact:6px;--garra-spacing-inset-default:8px;--garra-spacing-section-gap:24px;--garra-spacing-stack-loose:16px;--garra-spacing-stack-tight:4px;--garra-sizes-control-comfortable:40px;--garra-sizes-control-compact:24px;--garra-sizes-control-default:28px}[data-garra-density=compact]{--garra-spacing-content-gap:16px;--garra-spacing-field-gap:16px;--garra-spacing-inline-gap:8px;--garra-spacing-inset-comfortable:24px;--garra-spacing-inset-compact:8px;--garra-spacing-inset-default:12px;--garra-spacing-section-gap:32px;--garra-spacing-stack-loose:24px;--garra-spacing-stack-tight:6px;--garra-sizes-control-comfortable:48px;--garra-sizes-control-compact:28px;--garra-sizes-control-default:32px}[data-garra-density=comfortable]{--garra-spacing-content-gap:24px;--garra-spacing-field-gap:20px;--garra-spacing-inline-gap:12px;--garra-spacing-inset-comfortable:32px;--garra-spacing-inset-compact:12px;--garra-spacing-inset-default:16px;--garra-spacing-section-gap:40px;--garra-spacing-stack-loose:32px;--garra-spacing-stack-tight:8px;--garra-sizes-control-comfortable:48px;--garra-sizes-control-compact:32px;--garra-sizes-control-default:40px}[data-garra-shape=square]{--garra-radii-control:0px;--garra-radii-overlay:0px;--garra-radii-pill:0px;--garra-radii-surface:0px}[data-garra-shape=subtle]{--garra-radii-control:2px;--garra-radii-overlay:6px;--garra-radii-pill:9999px;--garra-radii-surface:4px}[data-garra-shape=soft]{--garra-radii-control:6px;--garra-radii-overlay:12px;--garra-radii-pill:9999px;--garra-radii-surface:8px}[data-garra-shape=rounded]{--garra-radii-control:12px;--garra-radii-overlay:16px;--garra-radii-pill:9999px;--garra-radii-surface:16px}@keyframes garra-fade-enter{0%{opacity:0}to{opacity:1}}@keyframes garra-fade-exit{0%{opacity:1}to{opacity:0}}@keyframes garra-floating-enter{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@keyframes garra-floating-exit{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.97)}}@keyframes garra-overlay-enter{0%{opacity:0;transform:translateY(4px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes garra-overlay-exit{0%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(4px)scale(.98)}}@keyframes garra-progress-slide-rtl{0%{transform:translate(100%)}to{transform:translate(-350%)}}@keyframes garra-progress-arc{0%{stroke-dasharray:1 100;stroke-dashoffset:0}50%{stroke-dasharray:70 100;stroke-dashoffset:-15px}to{stroke-dasharray:1 100;stroke-dashoffset:-100px}}@keyframes garra-progress-slide{0%{transform:translate(-100%)}to{transform:translate(350%)}}@keyframes garra-progress-rotate{0%{transform:rotate(-90deg)}to{transform:rotate(270deg)}}@keyframes garra-spin{to{transform:rotate(360deg)}}@keyframes garra-skeleton-pulse{0%,to{opacity:1}50%{opacity:.5}}@media (prefers-color-scheme:dark){:where(:root,:host,[data-garra-mode]){--garra-border-widths-default:1px;--garra-border-widths-emphasis:2px;--garra-border-widths-none:0px;--garra-border-widths-focus-ring-width:2px;--garra-colors-accent-icon:#f5f5f5;--garra-colors-accent-inverse-default:#6e6e6e;--garra-colors-accent-inverse-hover:#6e6e6e;--garra-colors-accent-inverse-pressed:#6e6e6e;--garra-colors-accent-solid-background-default:#f5f5f5;--garra-colors-accent-solid-background-hover:#f5f5f5;--garra-colors-accent-solid-background-pressed:#f6f6f6;--garra-colors-accent-solid-foreground-default:#111;--garra-colors-accent-solid-foreground-hover:#111;--garra-colors-accent-solid-foreground-pressed:#111;--garra-colors-accent-surface-background:#2f2f2f;--garra-colors-accent-surface-background-hover:#3a3a3a;--garra-colors-accent-surface-border:#f5f5f5;--garra-colors-accent-surface-foreground:#f5f5f5;--garra-colors-accent-text:#f5f5f5;--garra-colors-action-destructive-background-default:#ff9592;--garra-colors-action-destructive-background-hover:#ff9996;--garra-colors-action-destructive-background-pressed:#fe9d9a;--garra-colors-action-destructive-border-default:#ff9592;--garra-colors-action-destructive-border-hover:#ff9592;--garra-colors-action-destructive-border-pressed:#ff9592;--garra-colors-action-destructive-foreground-default:#1e1e1e;--garra-colors-action-destructive-foreground-hover:#1e1e1e;--garra-colors-action-destructive-foreground-pressed:#1e1e1e;--garra-colors-action-destructive-subtle-background-default:#392c2c;--garra-colors-action-destructive-subtle-background-hover:#423131;--garra-colors-action-destructive-subtle-background-pressed:#4b3635;--garra-colors-action-destructive-text:#ff9592;--garra-colors-action-notice-background-default:#baa7ff;--garra-colors-action-notice-background-hover:#bcaaff;--garra-colors-action-notice-background-pressed:#bfadfe;--garra-colors-action-notice-border-default:#baa7ff;--garra-colors-action-notice-border-hover:#baa7ff;--garra-colors-action-notice-border-pressed:#baa7ff;--garra-colors-action-notice-foreground-default:#1e1e1e;--garra-colors-action-notice-foreground-hover:#1e1e1e;--garra-colors-action-notice-foreground-pressed:#1e1e1e;--garra-colors-action-notice-subtle-background-default:#312e39;--garra-colors-action-notice-subtle-background-hover:#373442;--garra-colors-action-notice-subtle-background-pressed:#3d394b;--garra-colors-action-notice-text:#baa7ff;--garra-colors-action-primary-background-default:var(--garra-colors-accent-solid-background-default);--garra-colors-action-primary-background-hover:var(--garra-colors-accent-solid-background-hover);--garra-colors-action-primary-background-pressed:var(--garra-colors-accent-solid-background-pressed);--garra-colors-action-primary-border-default:var(--garra-colors-accent-surface-border);--garra-colors-action-primary-border-hover:var(--garra-colors-accent-surface-border);--garra-colors-action-primary-border-pressed:var(--garra-colors-accent-surface-border);--garra-colors-action-primary-foreground-default:var(--garra-colors-accent-solid-foreground-default);--garra-colors-action-primary-foreground-hover:var(--garra-colors-accent-solid-foreground-hover);--garra-colors-action-primary-foreground-pressed:var(--garra-colors-accent-solid-foreground-pressed);--garra-colors-action-primary-subtle-background-default:#3a3a3a;--garra-colors-action-primary-subtle-background-hover:#434343;--garra-colors-action-primary-subtle-background-pressed:#4b4b4b;--garra-colors-action-primary-text:#f5f5f5;--garra-colors-action-quiet-background-default:#0000;--garra-colors-action-quiet-background-hover:#232323;--garra-colors-action-quiet-background-pressed:#2b2b2b;--garra-colors-action-quiet-foreground-default:var(--garra-colors-text-primary);--garra-colors-action-quiet-foreground-hover:var(--garra-colors-text-primary);--garra-colors-action-quiet-foreground-pressed:var(--garra-colors-text-primary);--garra-colors-action-secondary-background-default:#1e1e1e;--garra-colors-action-secondary-background-hover:#232323;--garra-colors-action-secondary-background-pressed:#2b2b2b;--garra-colors-action-secondary-border-default:var(--garra-colors-border-control);--garra-colors-action-secondary-border-hover:var(--garra-colors-border-control-hover);--garra-colors-action-secondary-border-pressed:var(--garra-colors-border-control-hover);--garra-colors-action-secondary-foreground-default:var(--garra-colors-text-primary);--garra-colors-action-secondary-foreground-hover:var(--garra-colors-text-primary);--garra-colors-action-secondary-foreground-pressed:var(--garra-colors-text-primary);--garra-colors-action-secondary-subtle-background-default:#2b2b2b;--garra-colors-action-secondary-subtle-background-hover:#343434;--garra-colors-action-secondary-subtle-background-pressed:#3c3c3c;--garra-colors-action-secondary-text:#f5f5f5;--garra-colors-action-success-background-default:#3dd68c;--garra-colors-action-success-background-hover:#44d790;--garra-colors-action-success-background-pressed:#4cd894;--garra-colors-action-success-border-default:#3dd68c;--garra-colors-action-success-border-hover:#3dd68c;--garra-colors-action-success-border-pressed:#3dd68c;--garra-colors-action-success-foreground-default:#1e1e1e;--garra-colors-action-success-foreground-hover:#1e1e1e;--garra-colors-action-success-foreground-pressed:#1e1e1e;--garra-colors-action-success-subtle-background-default:#22342b;--garra-colors-action-success-subtle-background-hover:#233b30;--garra-colors-action-success-subtle-background-pressed:#244334;--garra-colors-action-success-text:#3dd68c;--garra-colors-action-warning-background-default:#ffca16;--garra-colors-action-warning-background-hover:#ffcc1f;--garra-colors-action-warning-background-pressed:#fecd28;--garra-colors-action-warning-border-default:#ffca16;--garra-colors-action-warning-border-hover:#ffca16;--garra-colors-action-warning-border-pressed:#ffca16;--garra-colors-action-warning-foreground-default:#1e1e1e;--garra-colors-action-warning-foreground-hover:#1e1e1e;--garra-colors-action-warning-foreground-pressed:#1e1e1e;--garra-colors-action-warning-subtle-background-default:#39331d;--garra-colors-action-warning-subtle-background-hover:#423a1d;--garra-colors-action-warning-subtle-background-pressed:#4b401c;--garra-colors-action-warning-text:#ffca16;--garra-colors-background-canvas:#121212;--garra-colors-background-inverse:#f5f5f5;--garra-colors-background-overlay:var(--garra-colors-background-surface-raised);--garra-colors-background-scrim:#0000007a;--garra-colors-background-surface:#1e1e1e;--garra-colors-background-surface-raised:var(--garra-colors-background-surface);--garra-colors-background-surface-sunken:var(--garra-colors-background-canvas);--garra-colors-border-control:#7e7e7e;--garra-colors-border-control-hover:#949494;--garra-colors-border-decorative:#404040;--garra-colors-border-disabled:var(--garra-colors-disabled-border);--garra-colors-disabled-background:#2b2b2b;--garra-colors-disabled-border:var(--garra-colors-border-decorative);--garra-colors-disabled-foreground:#747474;--garra-colors-feedback-danger-background:#302827;--garra-colors-feedback-danger-border:#784e4c;--garra-colors-feedback-danger-icon:#ff9592;--garra-colors-feedback-danger-text:#ff9592;--garra-colors-feedback-neutral-background:var(--garra-colors-fill-tertiary);--garra-colors-feedback-neutral-border:var(--garra-colors-border-decorative);--garra-colors-feedback-neutral-icon:var(--garra-colors-icon-secondary);--garra-colors-feedback-neutral-text:var(--garra-colors-text-primary);--garra-colors-feedback-notice-background:#2a2930;--garra-colors-feedback-notice-border:#5c5578;--garra-colors-feedback-notice-icon:#baa7ff;--garra-colors-feedback-notice-text:#baa7ff;--garra-colors-feedback-success-background:#202d27;--garra-colors-feedback-success-border:#2a684a;--garra-colors-feedback-success-icon:#3dd68c;--garra-colors-feedback-success-text:#3dd68c;--garra-colors-feedback-warning-background:#302c1d;--garra-colors-feedback-warning-border:#78631b;--garra-colors-feedback-warning-icon:#ffca16;--garra-colors-feedback-warning-text:#ffca16;--garra-colors-fill-primary:#343434;--garra-colors-fill-secondary:#2b2b2b;--garra-colors-fill-tertiary:#232323;--garra-colors-focus-inverse-ring:#0d74ce;--garra-colors-focus-inverse-separation:var(--garra-colors-background-inverse);--garra-colors-focus-ring:#70b8ff;--garra-colors-focus-separation:var(--garra-colors-background-surface);--garra-colors-icon-disabled:var(--garra-colors-disabled-foreground);--garra-colors-icon-inverse:var(--garra-colors-text-inverse);--garra-colors-icon-inverse-secondary:var(--garra-colors-text-inverse-secondary);--garra-colors-icon-primary:var(--garra-colors-text-primary);--garra-colors-icon-secondary:var(--garra-colors-text-secondary);--garra-colors-icon-tertiary:var(--garra-colors-text-tertiary);--garra-colors-intent-danger-border:#8c333a;--garra-colors-intent-danger-solid:#ff9592;--garra-colors-intent-danger-solid-hover:#ff9e9d;--garra-colors-intent-danger-solid-pressed:#ffa7a7;--garra-colors-intent-danger-surface:#3b1219;--garra-colors-intent-danger-surface-hover:#500f1c;--garra-colors-intent-danger-surface-pressed:#611623;--garra-colors-intent-danger-text:#ffd1d9;--garra-colors-intent-notice-border:#56468b;--garra-colors-intent-notice-solid:#baa7ff;--garra-colors-intent-notice-solid-hover:#c0afff;--garra-colors-intent-notice-solid-pressed:#c6b7ff;--garra-colors-intent-notice-surface:#291f43;--garra-colors-intent-notice-surface-hover:#33255b;--garra-colors-intent-notice-surface-pressed:#3c2e69;--garra-colors-intent-notice-text:#e2ddfe;--garra-colors-intent-success-border:#28684a;--garra-colors-intent-success-solid:#3dd68c;--garra-colors-intent-success-solid-hover:#4eda95;--garra-colors-intent-success-solid-pressed:#60de9f;--garra-colors-intent-success-surface:#132d21;--garra-colors-intent-success-surface-hover:#113b29;--garra-colors-intent-success-surface-pressed:#174933;--garra-colors-intent-success-text:#b1f1cb;--garra-colors-intent-warning-border:#714f19;--garra-colors-intent-warning-solid:#ffca16;--garra-colors-intent-warning-solid-hover:#ffce2e;--garra-colors-intent-warning-solid-pressed:#ffd345;--garra-colors-intent-warning-surface:#302008;--garra-colors-intent-warning-surface-hover:#3f2700;--garra-colors-intent-warning-surface-pressed:#4d3000;--garra-colors-intent-warning-text:#ffe7b3;--garra-colors-interaction-background-default:#1e1e1e;--garra-colors-interaction-background-hover:#232323;--garra-colors-interaction-background-pressed:#2b2b2b;--garra-colors-link-default:var(--garra-colors-accent-text);--garra-colors-link-hover:var(--garra-colors-accent-text);--garra-colors-link-inverse-default:var(--garra-colors-accent-inverse-default);--garra-colors-link-inverse-hover:var(--garra-colors-accent-inverse-hover);--garra-colors-link-inverse-pressed:var(--garra-colors-accent-inverse-pressed);--garra-colors-link-inverse-visited:var(--garra-colors-text-inverse-secondary);--garra-colors-link-pressed:var(--garra-colors-accent-text);--garra-colors-link-visited:#b4b4b4;--garra-colors-progress-indicator:#f5f5f5;--garra-colors-progress-track:var(--garra-colors-fill-primary);--garra-colors-read-only-background:var(--garra-colors-background-surface-sunken);--garra-colors-read-only-border:var(--garra-colors-border-decorative);--garra-colors-read-only-foreground:var(--garra-colors-text-primary);--garra-colors-selection-background:#343434;--garra-colors-selection-background-hover:#3c3c3c;--garra-colors-selection-border:var(--garra-colors-border-control-hover);--garra-colors-selection-foreground:var(--garra-colors-text-primary);--garra-colors-skeleton-base:var(--garra-colors-fill-tertiary);--garra-colors-skeleton-highlight:var(--garra-colors-fill-primary);--garra-colors-text-disabled:var(--garra-colors-disabled-foreground);--garra-colors-text-inverse:#1e1e1e;--garra-colors-text-inverse-secondary:#5f5f5f;--garra-colors-text-placeholder:var(--garra-colors-text-tertiary);--garra-colors-text-primary:#f5f5f5;--garra-colors-text-secondary:#aaa;--garra-colors-text-tertiary:#9c9c9c;--garra-colors-validation-invalid-background:var(--garra-colors-feedback-danger-background);--garra-colors-validation-invalid-border:var(--garra-colors-feedback-danger-icon);--garra-colors-validation-invalid-icon:var(--garra-colors-feedback-danger-icon);--garra-colors-validation-invalid-text:var(--garra-colors-feedback-danger-text);--garra-shadows-flat:0px 0px 0px 0px #0000000f;--garra-shadows-floating:0px 4px 8px -2px #0000001a, 0px 12px 24px -8px #0000001a;--garra-shadows-modal:0px 8px 16px -4px #0000001a, 0px 24px 48px -12px #00000029;--garra-shadows-raised:0px 1px 2px 0px #0000000f, 0px 2px 4px -1px #0000000f;--garra-spacing-focus-ring-offset:-2px;--garra-spacing-layout-gutter-narrow:1rem;--garra-spacing-layout-gutter-wide:2rem;--garra-spacing-content-gap:1rem;--garra-spacing-field-gap:1rem;--garra-spacing-help-gap:.25rem;--garra-spacing-inline-gap:.5rem;--garra-spacing-inset-comfortable:1.5rem;--garra-spacing-inset-compact:.5rem;--garra-spacing-inset-default:.75rem;--garra-spacing-label-gap:.5rem;--garra-spacing-page-gutter-narrow:var(--garra-spacing-layout-gutter-narrow);--garra-spacing-page-gutter-wide:var(--garra-spacing-layout-gutter-wide);--garra-spacing-panel-inset:var(--garra-spacing-inset-comfortable);--garra-spacing-section-gap:2rem;--garra-spacing-stack-default:var(--garra-spacing-inline-gap);--garra-spacing-stack-loose:1.5rem;--garra-spacing-stack-tight:.375rem;--garra-z-index-base:0;--garra-z-index-floating:200;--garra-z-index-modal:300;--garra-z-index-notification:400;--garra-z-index-sticky:100;--garra-sizes-layout-content-default:64rem;--garra-sizes-layout-content-form:40rem;--garra-sizes-layout-content-wide:80rem;--garra-sizes-control-comfortable:3rem;--garra-sizes-control-compact:1.75rem;--garra-sizes-control-default:2rem;--garra-sizes-icon-default:1.25rem;--garra-sizes-icon-large:1.5rem;--garra-sizes-icon-small:1rem;--garra-sizes-target-touch:44px;--garra-durations-motion-expand-duration:.2s;--garra-durations-motion-expand-reduced-duration:0s;--garra-durations-motion-feedback-duration:.1s;--garra-durations-motion-feedback-reduced-duration:0s;--garra-durations-motion-floating-duration:.12s;--garra-durations-motion-floating-reduced-duration:0s;--garra-durations-motion-immediate-duration:0s;--garra-durations-motion-immediate-reduced-duration:0s;--garra-durations-motion-overlay-enter-duration:.18s;--garra-durations-motion-overlay-enter-reduced-duration:0s;--garra-durations-motion-overlay-exit-duration:.18s;--garra-durations-motion-overlay-exit-reduced-duration:0s;--garra-durations-motion-position-duration:.18s;--garra-durations-motion-position-reduced-duration:0s;--garra-durations-motion-progress-duration:.5s;--garra-durations-motion-progress-reduced-duration:0s;--garra-durations-motion-progress-update-duration:.15s;--garra-durations-motion-progress-update-reduced-duration:0s;--garra-easings-motion-expand-easing:cubic-bezier(0, 0, 1, 1);--garra-easings-motion-feedback-easing:cubic-bezier(.2, 0, 0, 1);--garra-easings-motion-floating-easing:cubic-bezier(0, 0, 1, 1);--garra-easings-motion-immediate-easing:cubic-bezier(0, 0, 1, 1);--garra-easings-motion-overlay-enter-easing:cubic-bezier(0, 0, 1, 1);--garra-easings-motion-overlay-exit-easing:cubic-bezier(0, 0, 1, 1);--garra-easings-motion-position-easing:cubic-bezier(.2, 0, 0, 1);--garra-easings-motion-progress-easing:cubic-bezier(0, 0, 1, 1);--garra-easings-motion-progress-update-easing:cubic-bezier(.2, 0, 0, 1);--garra-radii-control:6px;--garra-radii-full:9999px;--garra-radii-overlay:12px;--garra-radii-pill:var(--garra-radii-full);--garra-radii-surface:8px}}}@layer recipes{@layer _base{.garra-garra-toggle{gap:var(--garra-spacing-inline-gap);border-radius:var(--garra-radii-control);border-width:var(--garra-border-widths-default);padding-inline:var(--garra-spacing-inset-default);padding-block:var(--garra-spacing-help-gap);letter-spacing:0;color:var(--garra-colors-text-secondary);cursor:pointer;transition-property:background-color,color,border-color;transition-duration:var(--garra-durations-motion-feedback-duration);transition-timing-function:var(--garra-easings-motion-feedback-easing);min-height:var(--garra-sizes-control-default);background:0 0;border-style:solid;border-color:#0000;flex-shrink:0;justify-content:center;align-items:center;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;font-size:.875rem;font-weight:500;line-height:1.42857;display:inline-flex}.garra-garra-toggle[data-pressed]{background:var(--toggle-bg);border-color:var(--toggle-border);color:var(--toggle-fg)}.garra-garra-toggle[data-pressed]:is(:hover,[data-hover]){background:var(--toggle-bg-hover,color-mix(in srgb, var(--toggle-bg) 92%, var(--toggle-fg)))}.garra-garra-toggle[data-disabled]{background:var(--garra-colors-disabled-background);border-color:var(--garra-colors-disabled-border);color:var(--garra-colors-disabled-foreground);cursor:not-allowed}.garra-garra-toggle[data-dot-chip]{background:var(--garra-colors-background-surface);border-radius:var(--garra-radii-pill);border-color:var(--garra-colors-border-control);color:var(--garra-colors-text-primary);gap:.375rem;padding-block:0;font-size:.8125rem}.garra-garra-toggle[data-dot-chip][data-pressed]{background:var(--garra-colors-action-primary-background-default);border-color:var(--garra-colors-action-primary-border-default);color:var(--garra-colors-action-primary-foreground-default)}.garra-garra-toggle[data-dot-chip][data-pressed]:is(:hover,[data-hover]){background:var(--garra-colors-action-primary-background-hover)}.garra-garra-toggle[data-dot-chip][data-disabled]{background:var(--garra-colors-disabled-background);border-color:var(--garra-colors-disabled-border);color:var(--garra-colors-disabled-foreground)}.garra-garra-toggle:is(:focus-visible,[data-focus-visible]){outline:2px solid;outline-color:var(--garra-colors-focus-ring)}.garra-garra-toggle:is(:hover,[data-hover]){background:var(--garra-colors-interaction-background-hover);color:var(--garra-colors-text-primary)}.garra-garra-toggle:is(:active,[data-active]){background:var(--garra-colors-interaction-background-pressed)}.garra-dot-footer{background:var(--garra-colors-background-canvas);gap:var(--garra-spacing-inline-gap);padding-block:var(--garra-spacing-inline-gap);margin-top:auto;position:sticky;bottom:0}.garra-garra-badge{padding-inline:var(--garra-spacing-help-gap);letter-spacing:0;vertical-align:middle;white-space:nowrap;flex-shrink:0;justify-content:center;align-items:center;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;font-size:.75rem;font-weight:500;line-height:1.33333;display:inline-flex}.garra-garra-text{overflow-wrap:anywhere;color:var(--garra-colors-text-primary);min-width:0;margin:0}.garra-dot-image{max-width:100%;display:block}.garra-dot-qr-code{background:var(--garra-colors-background-surface);border-radius:var(--garra-radii-surface);flex-shrink:0;display:block;overflow:hidden}.garra-garra-heading{overflow-wrap:anywhere;color:var(--garra-colors-text-primary);min-width:0;margin:0}.garra-dot-view[data-dot-view-card]{overflow:visible}.garra-dot-view[data-dot-view]{min-width:auto}.garra-garra-stack{flex-direction:column;min-width:0;display:flex}.garra-garra-inline{flex-wrap:wrap;align-items:center;min-width:0;display:flex}.garra-garra-skeleton{background:var(--garra-colors-border-decorative);border-radius:var(--garra-radii-control);flex-shrink:0;display:block}.garra-garra-button{gap:var(--garra-spacing-inline-gap);border-width:var(--garra-border-widths-default);padding-inline:var(--garra-spacing-inset-default);padding-block:var(--garra-spacing-help-gap);border-radius:var(--garra-radii-control);vertical-align:middle;-webkit-appearance:none;appearance:none;letter-spacing:0;cursor:pointer;white-space:normal;overflow-wrap:anywhere;transition-property:background-color,border-color,color;transition-duration:var(--garra-durations-motion-feedback-duration);transition-timing-function:var(--garra-easings-motion-feedback-easing);min-width:0;max-width:100%;min-height:var(--garra-sizes-control-default);border-style:solid;flex-shrink:0;justify-content:center;align-items:center;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;font-size:.875rem;font-weight:500;line-height:1.42857;text-decoration:none;display:inline-flex;position:relative}.garra-garra-button:disabled,.garra-garra-button[data-disabled]:not([data-loading]),.garra-garra-button[aria-disabled=true]:not([data-loading]){background:var(--garra-colors-disabled-background);border-color:var(--garra-colors-disabled-border);color:var(--garra-colors-disabled-foreground);cursor:not-allowed}.garra-garra-button [data-spinner]{animation:1s linear infinite garra-spin;display:inline-flex}.garra-garra-button[data-loading]{cursor:progress}.garra-garra-button [data-garra-icon]{flex-shrink:0}.garra-garra-button:is(:focus-visible,[data-focus-visible]){outline:2px solid;outline-color:var(--garra-colors-focus-ring)}.garra-garra-divider{background:currentColor;border:0;flex-shrink:0;margin:0}.garra-garra-divider[data-orientation=vertical]{width:var(--divider-thickness,1px);align-self:stretch;min-height:1em}.garra-garra-divider[data-orientation=horizontal]{width:100%;height:var(--divider-thickness,1px)}@media (pointer:coarse){.garra-garra-toggle,.garra-garra-button,.garra-garra-icon-button:not([data-embedded]){min-height:var(--garra-sizes-target-touch)}}@media (prefers-reduced-motion:reduce){.garra-garra-toggle,.garra-garra-button{transition-duration:0s}.garra-garra-button [data-spinner]{animation:none}}}.garra-garra-toggle--size_sm{padding-inline:var(--garra-spacing-inset-compact);min-height:var(--garra-sizes-control-compact)}.garra-garra-toggle--size_sm[data-dot-chip]{min-height:2.125rem;padding-inline:.875rem}.garra-garra-toggle--intent_default{--toggle-bg:var(--garra-colors-selection-background);--toggle-bg-hover:var(--garra-colors-selection-background-hover);--toggle-fg:var(--garra-colors-selection-foreground);--toggle-border:var(--garra-colors-selection-border)}.garra-garra-toggle--size_md{min-height:var(--garra-sizes-control-default)}.garra-garra-toggle--intent_primary{--toggle-bg:var(--garra-colors-selection-background);--toggle-bg-hover:var(--garra-colors-selection-background-hover);--toggle-fg:var(--garra-colors-selection-foreground);--toggle-border:var(--garra-colors-selection-border)}.garra-garra-toggle--intent_notice{--toggle-bg:var(--garra-colors-feedback-notice-background);--toggle-fg:var(--garra-colors-feedback-notice-text);--toggle-border:var(--garra-colors-feedback-notice-icon)}.garra-garra-toggle--intent_success{--toggle-bg:var(--garra-colors-feedback-success-background);--toggle-fg:var(--garra-colors-feedback-success-text);--toggle-border:var(--garra-colors-feedback-success-icon)}.garra-garra-toggle--intent_warning{--toggle-bg:var(--garra-colors-feedback-warning-background);--toggle-fg:var(--garra-colors-feedback-warning-text);--toggle-border:var(--garra-colors-feedback-warning-icon)}.garra-garra-toggle--intent_danger{--toggle-bg:var(--garra-colors-feedback-danger-background);--toggle-fg:var(--garra-colors-feedback-danger-text);--toggle-border:var(--garra-colors-feedback-danger-icon)}.garra-garra-toggle--fullWidth_true{width:100%}.garra-garra-toggle--size_lg{min-height:2.5rem}.garra-garra-toggle--size_xlg{padding-inline:var(--garra-spacing-inset-comfortable);min-height:var(--garra-sizes-control-comfortable)}.garra-garra-badge--size_sm{min-width:1rem;min-height:1rem}.garra-garra-badge--rounding_full{border-radius:var(--garra-radii-pill)}.garra-garra-badge--intent_danger{background:var(--garra-colors-feedback-danger-background);color:var(--garra-colors-feedback-danger-text)}.garra-garra-badge--intent_danger[data-dot-grid-badge]{background:var(--garra-colors-action-destructive-background-default);color:var(--garra-colors-action-destructive-foreground-default)}.garra-garra-badge--intent_primary{background:var(--garra-colors-selection-background);color:var(--garra-colors-selection-foreground)}.garra-garra-badge--intent_primary[data-dot-tab-badge]{background:var(--garra-colors-action-primary-background-default);color:var(--garra-colors-action-primary-foreground-default)}.garra-garra-badge--size_md{min-width:1.5rem;min-height:1.5rem}.garra-garra-badge--size_lg{min-width:2rem;min-height:2rem}.garra-garra-badge--size_lg,.garra-garra-badge--size_xlg{letter-spacing:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;font-size:.875rem;font-weight:500;line-height:1.42857}.garra-garra-badge--size_xlg{min-width:2.5rem;min-height:2.5rem}.garra-garra-badge--rounding_sm{border-radius:min(2px, var(--garra-radii-control))}.garra-garra-badge--rounding_md{border-radius:var(--garra-radii-control)}.garra-garra-badge--rounding_lg{border-radius:var(--garra-radii-surface)}.garra-garra-badge--intent_default{background:var(--garra-colors-background-surface-sunken);color:var(--garra-colors-text-primary)}.garra-garra-badge--intent_notice{background:var(--garra-colors-feedback-notice-background);color:var(--garra-colors-feedback-notice-text)}.garra-garra-badge--intent_success{background:var(--garra-colors-feedback-success-background);color:var(--garra-colors-feedback-success-text)}.garra-garra-badge--intent_warning{background:var(--garra-colors-feedback-warning-background);color:var(--garra-colors-feedback-warning-text)}.garra-garra-text--variant_caption{letter-spacing:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;font-size:.75rem;font-weight:400;line-height:1.33333}.garra-garra-text--align_center{text-align:center}.garra-garra-text--variant_body{font-size:1rem;line-height:1.5}.garra-garra-text--variant_body,.garra-garra-text--variant_bodySmall{letter-spacing:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;font-weight:400}.garra-garra-text--variant_bodySmall{font-size:.875rem;line-height:1.42857}.garra-garra-text--variant_bodyLarge{letter-spacing:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;font-size:1.125rem;font-weight:400;line-height:1.55556}.garra-garra-text--variant_label{font-size:.875rem;line-height:1.42857}.garra-garra-text--variant_label,.garra-garra-text--variant_labelSmall{letter-spacing:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;font-weight:500}.garra-garra-text--variant_labelSmall{font-size:.75rem;line-height:1.33333}.garra-garra-text--variant_code{letter-spacing:0;font-family:JetBrains Mono,ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.875rem;font-weight:400;line-height:1.42857}.garra-garra-text--align_left{text-align:left}.garra-garra-text--align_right{text-align:right}.garra-garra-text--tone_default{color:var(--garra-colors-text-primary)}.garra-garra-text--tone_secondary{color:var(--garra-colors-text-secondary)}.garra-garra-text--tone_danger{color:var(--garra-colors-feedback-danger-text)}.garra-garra-text--tone_success{color:var(--garra-colors-feedback-success-text)}.garra-garra-text--tone_inherit{color:inherit}.garra-dot-image--shape_rounded{border-radius:var(--garra-radii-surface)}.garra-dot-image--shape_square{border-radius:0}.garra-dot-image--shape_circle{border-radius:var(--garra-radii-full)}.garra-garra-heading--variant_headingMedium{letter-spacing:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;font-size:1.5rem;font-weight:600;line-height:1.33333}.garra-garra-heading--align_right{text-align:right}.garra-garra-heading--align_left{text-align:left}.garra-garra-heading--variant_headingSmall{letter-spacing:0;font-size:1.25rem;line-height:1.4}.garra-garra-heading--variant_headingSmall,.garra-garra-heading--variant_headingLarge{font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;font-weight:600}.garra-garra-heading--variant_headingLarge{letter-spacing:-.01875rem;font-size:1.875rem;line-height:1.26667}.garra-garra-heading--variant_displaySmall{font-size:2.25rem;line-height:1.22222}.garra-garra-heading--variant_displaySmall,.garra-garra-heading--variant_display{letter-spacing:-.0375rem;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;font-weight:600}.garra-garra-heading--variant_display{font-size:3rem;line-height:1.16667}.garra-garra-heading--align_center{text-align:center}.garra-dot-view--direction_column{flex-direction:column}.garra-dot-view--gap_medium{gap:var(--garra-spacing-inline-gap)}.garra-dot-view--align_stretch{align-items:stretch}.garra-dot-view--justify_start{justify-content:flex-start}.garra-dot-view--wrap_false{flex-wrap:nowrap}.garra-dot-view--padding_none{padding:0}.garra-dot-view--interactive_true{cursor:pointer}.garra-dot-view--padding_large{padding:var(--garra-spacing-content-gap)}.garra-dot-view--direction_row{flex-direction:row}.garra-dot-view--gap_none{gap:0}.garra-dot-view--gap_small{gap:var(--garra-spacing-help-gap)}.garra-dot-view--gap_large{gap:var(--garra-spacing-content-gap)}.garra-dot-view--align_start{align-items:flex-start}.garra-dot-view--align_center{align-items:center}.garra-dot-view--align_end{align-items:flex-end}.garra-dot-view--justify_center{justify-content:center}.garra-dot-view--justify_end{justify-content:flex-end}.garra-dot-view--justify_between{justify-content:space-between}.garra-dot-view--wrap_true{flex-wrap:wrap}.garra-dot-view--grow_true{flex-grow:1}.garra-dot-view--grow_true[data-dot-view-grow]{min-width:0}.garra-dot-view--padding_small{padding:var(--garra-spacing-help-gap)}.garra-dot-view--padding_medium{padding:var(--garra-spacing-inline-gap)}.garra-dot-view--paddingTop_none{padding-top:0}.garra-dot-view--paddingTop_small{padding-top:var(--garra-spacing-help-gap)}.garra-dot-view--paddingTop_medium{padding-top:var(--garra-spacing-inline-gap)}.garra-dot-view--paddingTop_large{padding-top:var(--garra-spacing-content-gap)}.garra-dot-view--paddingStart_none{padding-inline-start:0}.garra-dot-view--paddingStart_small{padding-inline-start:var(--garra-spacing-help-gap)}.garra-dot-view--paddingStart_medium{padding-inline-start:var(--garra-spacing-inline-gap)}.garra-dot-view--paddingStart_large{padding-inline-start:var(--garra-spacing-content-gap)}.garra-dot-view--paddingEnd_none{padding-inline-end:0}.garra-dot-view--paddingEnd_small{padding-inline-end:var(--garra-spacing-help-gap)}.garra-dot-view--paddingEnd_medium{padding-inline-end:var(--garra-spacing-inline-gap)}.garra-dot-view--paddingEnd_large{padding-inline-end:var(--garra-spacing-content-gap)}.garra-dot-view--paddingBottom_none{padding-bottom:0}.garra-dot-view--paddingBottom_small{padding-bottom:var(--garra-spacing-help-gap)}.garra-dot-view--paddingBottom_medium{padding-bottom:var(--garra-spacing-inline-gap)}.garra-dot-view--paddingBottom_large{padding-bottom:var(--garra-spacing-content-gap)}.garra-garra-stack--role_content{gap:var(--garra-spacing-content-gap)}.garra-garra-stack--align_stretch{align-items:stretch}.garra-garra-stack--role_fields{gap:var(--garra-spacing-field-gap)}.garra-garra-stack--role_sections{gap:var(--garra-spacing-section-gap)}.garra-garra-stack--role_related{gap:var(--garra-spacing-stack-default)}.garra-garra-stack--role_supporting{gap:var(--garra-spacing-help-gap)}.garra-garra-stack--align_start{align-items:flex-start}.garra-garra-stack--align_center{align-items:center}.garra-garra-stack--align_end{align-items:flex-end}.garra-garra-inline--role_related{gap:var(--garra-spacing-inline-gap)}.garra-garra-inline--align_center{align-items:center}.garra-garra-inline--justify_start{justify-content:flex-start}.garra-garra-inline--role_controls{gap:var(--garra-spacing-inline-gap)}.garra-garra-inline--role_supporting{gap:var(--garra-spacing-help-gap)}.garra-garra-inline--align_start{align-items:flex-start}.garra-garra-inline--align_end{align-items:flex-end}.garra-garra-inline--align_baseline{align-items:baseline}.garra-garra-inline--justify_end{justify-content:flex-end}.garra-garra-inline--justify_between{justify-content:space-between}.garra-garra-inline--justify_center{justify-content:center}.garra-garra-inline--wrap_false{flex-wrap:nowrap}.garra-garra-skeleton--variant_text{border-radius:min(2px, var(--garra-radii-control));width:100%;height:1rem}.garra-garra-skeleton--animated_true{animation:1.8s ease-in-out infinite garra-skeleton-pulse}.garra-garra-skeleton--variant_icon{width:1rem;height:1rem}.garra-garra-skeleton--variant_circle{border-radius:var(--garra-radii-full);width:2.5rem;height:2.5rem}.garra-garra-skeleton--variant_block{border-radius:var(--garra-radii-surface);width:100%;height:6rem}.garra-garra-skeleton--intent_brand{background:var(--garra-colors-selection-background)}.garra-garra-skeleton--intent_danger{background:var(--garra-colors-feedback-danger-background)}.garra-garra-skeleton--intent_success{background:var(--garra-colors-feedback-success-background)}.garra-garra-skeleton--intent_warning{background:var(--garra-colors-feedback-warning-background)}.garra-garra-button--variant_fill{background:var(--action-bg);border-color:var(--action-border);color:var(--action-fg)}.garra-garra-button--variant_fill:is(:disabled,[data-disabled],[aria-disabled=true]):not([data-loading]){background:var(--garra-colors-disabled-background);border-color:var(--garra-colors-disabled-border);color:var(--garra-colors-disabled-foreground);cursor:not-allowed}.garra-garra-button--variant_fill:is(:focus-visible,[data-focus-visible]){outline-color:currentColor}.garra-garra-button--variant_fill:is(:hover,[data-hover]){background:var(--action-hover);border-color:var(--action-border-hover);color:var(--action-fg-hover)}.garra-garra-button--variant_fill:is(:active,[data-active]){background:var(--action-pressed);border-color:var(--action-border-pressed);color:var(--action-fg-pressed)}.garra-garra-button--intent_primary{--action-bg:var(--garra-colors-action-primary-background-default);--action-hover:var(--garra-colors-action-primary-background-hover);--action-pressed:var(--garra-colors-action-primary-background-pressed);--action-fg:var(--garra-colors-action-primary-foreground-default);--action-fg-hover:var(--garra-colors-action-primary-foreground-hover);--action-fg-pressed:var(--garra-colors-action-primary-foreground-pressed);--action-ink:var(--garra-colors-action-primary-text);--action-border:var(--garra-colors-action-primary-border-default);--action-border-hover:var(--garra-colors-action-primary-border-hover);--action-border-pressed:var(--garra-colors-action-primary-border-pressed);--action-soft-default:var(--garra-colors-action-primary-subtle-background-default);--action-soft-hover:var(--garra-colors-action-primary-subtle-background-hover);--action-soft-pressed:var(--garra-colors-action-primary-subtle-background-pressed)}.garra-garra-button--size_md{min-height:var(--garra-sizes-control-default)}.garra-garra-button--rounding_basic{border-radius:var(--garra-radii-control)}.garra-garra-button--intent_default{--action-bg:var(--garra-colors-action-secondary-background-default);--action-hover:var(--garra-colors-action-secondary-background-hover);--action-pressed:var(--garra-colors-action-secondary-background-pressed);--action-fg:var(--garra-colors-action-secondary-foreground-default);--action-fg-hover:var(--garra-colors-action-secondary-foreground-hover);--action-fg-pressed:var(--garra-colors-action-secondary-foreground-pressed);--action-ink:var(--garra-colors-action-secondary-text);--action-border:var(--garra-colors-action-secondary-border-default);--action-border-hover:var(--garra-colors-action-secondary-border-hover);--action-border-pressed:var(--garra-colors-action-secondary-border-pressed);--action-soft-default:var(--garra-colors-action-secondary-subtle-background-default);--action-soft-hover:var(--garra-colors-action-secondary-subtle-background-hover);--action-soft-pressed:var(--garra-colors-action-secondary-subtle-background-pressed)}.garra-garra-button--intent_danger{--action-bg:var(--garra-colors-action-destructive-background-default);--action-hover:var(--garra-colors-action-destructive-background-hover);--action-pressed:var(--garra-colors-action-destructive-background-pressed);--action-fg:var(--garra-colors-action-destructive-foreground-default);--action-fg-hover:var(--garra-colors-action-destructive-foreground-hover);--action-fg-pressed:var(--garra-colors-action-destructive-foreground-pressed);--action-ink:var(--garra-colors-action-destructive-text);--action-border:var(--garra-colors-action-destructive-border-default);--action-border-hover:var(--garra-colors-action-destructive-border-hover);--action-border-pressed:var(--garra-colors-action-destructive-border-pressed);--action-soft-default:var(--garra-colors-action-destructive-subtle-background-default);--action-soft-hover:var(--garra-colors-action-destructive-subtle-background-hover);--action-soft-pressed:var(--garra-colors-action-destructive-subtle-background-pressed)}.garra-garra-button--intent_notice{--action-bg:var(--garra-colors-action-notice-background-default);--action-hover:var(--garra-colors-action-notice-background-hover);--action-pressed:var(--garra-colors-action-notice-background-pressed);--action-fg:var(--garra-colors-action-notice-foreground-default);--action-fg-hover:var(--garra-colors-action-notice-foreground-hover);--action-fg-pressed:var(--garra-colors-action-notice-foreground-pressed);--action-ink:var(--garra-colors-action-notice-text);--action-border:var(--garra-colors-action-notice-border-default);--action-border-hover:var(--garra-colors-action-notice-border-hover);--action-border-pressed:var(--garra-colors-action-notice-border-pressed);--action-soft-default:var(--garra-colors-action-notice-subtle-background-default);--action-soft-hover:var(--garra-colors-action-notice-subtle-background-hover);--action-soft-pressed:var(--garra-colors-action-notice-subtle-background-pressed)}.garra-garra-button--intent_success{--action-bg:var(--garra-colors-action-success-background-default);--action-hover:var(--garra-colors-action-success-background-hover);--action-pressed:var(--garra-colors-action-success-background-pressed);--action-fg:var(--garra-colors-action-success-foreground-default);--action-fg-hover:var(--garra-colors-action-success-foreground-hover);--action-fg-pressed:var(--garra-colors-action-success-foreground-pressed);--action-ink:var(--garra-colors-action-success-text);--action-border:var(--garra-colors-action-success-border-default);--action-border-hover:var(--garra-colors-action-success-border-hover);--action-border-pressed:var(--garra-colors-action-success-border-pressed);--action-soft-default:var(--garra-colors-action-success-subtle-background-default);--action-soft-hover:var(--garra-colors-action-success-subtle-background-hover);--action-soft-pressed:var(--garra-colors-action-success-subtle-background-pressed)}.garra-garra-button--intent_warning{--action-bg:var(--garra-colors-action-warning-background-default);--action-hover:var(--garra-colors-action-warning-background-hover);--action-pressed:var(--garra-colors-action-warning-background-pressed);--action-fg:var(--garra-colors-action-warning-foreground-default);--action-fg-hover:var(--garra-colors-action-warning-foreground-hover);--action-fg-pressed:var(--garra-colors-action-warning-foreground-pressed);--action-ink:var(--garra-colors-action-warning-text);--action-border:var(--garra-colors-action-warning-border-default);--action-border-hover:var(--garra-colors-action-warning-border-hover);--action-border-pressed:var(--garra-colors-action-warning-border-pressed);--action-soft-default:var(--garra-colors-action-warning-subtle-background-default);--action-soft-hover:var(--garra-colors-action-warning-subtle-background-hover);--action-soft-pressed:var(--garra-colors-action-warning-subtle-background-pressed)}.garra-garra-button--variant_outline{background:var(--garra-colors-background-surface);border-color:var(--action-border);color:var(--action-ink)}.garra-garra-button--variant_outline:is(:disabled,[data-disabled],[aria-disabled=true]):not([data-loading]){background:var(--garra-colors-disabled-background);border-color:var(--garra-colors-disabled-border);color:var(--garra-colors-disabled-foreground);cursor:not-allowed}.garra-garra-button--variant_outline:is(:hover,[data-hover]){background:var(--action-soft-hover)}.garra-garra-button--variant_outline:is(:active,[data-active]){background:var(--action-soft-pressed)}.garra-garra-button--variant_text{color:var(--action-ink);background:0 0;border-color:#0000}.garra-garra-button--variant_text:is(:disabled,[data-disabled],[aria-disabled=true]):not([data-loading]){background:var(--garra-colors-disabled-background);border-color:var(--garra-colors-disabled-border);color:var(--garra-colors-disabled-foreground);cursor:not-allowed}.garra-garra-button--variant_text:is(:hover,[data-hover]){background:var(--action-soft-default)}.garra-garra-button--variant_text:is(:active,[data-active]){background:var(--action-soft-hover)}.garra-garra-button--variant_ghost{background:var(--action-soft-default);color:var(--action-ink);border-color:#0000}.garra-garra-button--variant_ghost:is(:disabled,[data-disabled],[aria-disabled=true]):not([data-loading]){background:var(--garra-colors-disabled-background);border-color:var(--garra-colors-disabled-border);color:var(--garra-colors-disabled-foreground);cursor:not-allowed}.garra-garra-button--variant_ghost:is(:hover,[data-hover]){background:var(--action-soft-hover)}.garra-garra-button--variant_ghost:is(:active,[data-active]){background:var(--action-soft-pressed)}.garra-garra-button--size_sm{padding-inline:var(--garra-spacing-inset-compact);min-height:var(--garra-sizes-control-compact)}.garra-garra-button--size_lg{min-height:2.5rem}.garra-garra-button--size_xlg{padding-inline:var(--garra-spacing-inset-comfortable);min-height:var(--garra-sizes-control-comfortable)}.garra-garra-button--rounding_none{border-radius:0}.garra-garra-button--rounding_medium{border-radius:var(--garra-radii-surface)}.garra-garra-button--rounding_full{border-radius:var(--garra-radii-pill)}.garra-garra-button--spacing_compact{padding-inline:var(--garra-spacing-inset-compact);min-height:var(--garra-sizes-control-compact)}.garra-garra-button--spacing_none{padding:0}.garra-garra-button--fullWidth_true{width:100%}.garra-garra-divider--intent_default{color:var(--garra-colors-border-decorative)}.garra-garra-divider--intent_primary{color:var(--garra-colors-selection-border)}.garra-garra-divider--intent_success{color:var(--garra-colors-feedback-success-border)}.garra-garra-divider--intent_warning{color:var(--garra-colors-feedback-warning-border)}.garra-garra-divider--intent_danger{color:var(--garra-colors-feedback-danger-border)}.garra-garra-divider--intent_notice{color:var(--garra-colors-feedback-notice-border)}@media (pointer:coarse){.garra-garra-toggle--size_sm{min-height:var(--garra-sizes-target-touch)}.garra-garra-toggle--size_sm[data-dot-chip]{min-height:2.125rem}.garra-garra-toggle--size_md,.garra-garra-toggle--size_lg,.garra-garra-toggle--size_xlg,.garra-garra-button--size_md,.garra-garra-button--size_sm,.garra-garra-button--size_lg,.garra-garra-button--size_xlg,.garra-garra-button--spacing_compact,.garra-garra-icon-button--size_md:not([data-embedded]),.garra-garra-icon-button--size_sm:not([data-embedded]),.garra-garra-icon-button--size_lg:not([data-embedded]),.garra-garra-icon-button--size_xlg:not([data-embedded]),.garra-garra-icon-button--spacing_compact:not([data-embedded]){min-height:var(--garra-sizes-target-touch)}}@media (prefers-reduced-motion:reduce){.garra-garra-skeleton--animated_true{animation:none}}}@layer utilities{@layer compositions{.garra-textStyle_bodyStrong{font-size:1rem;line-height:1.5}.garra-textStyle_bodyStrong,.garra-textStyle_bodySmallStrong{letter-spacing:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;font-weight:600}.garra-textStyle_bodySmallStrong{font-size:.875rem;line-height:1.42857}}.garra-bdr_md{border-radius:md}.garra-gap_8px{gap:8px}.garra-flex_0_0_auto{flex:none}.garra-c_currentColor{color:currentColor}.garra-d_flex{display:flex}.garra-flex-d_column{flex-direction:column}.garra-ai_center{align-items:center}.garra-resize_none{resize:none}.garra-w_40{width:40px}.garra-h_40{height:40px}.garra-h_80{height:80px}.garra-w_100\%{width:100%}.garra-w_60\%{width:60%}.garra-h_12{height:12px}}@layer recipes.slots{@layer _base{.garra-garra-number-field__root{width:min(16rem,100%);min-width:0}.garra-garra-number-field__root[data-dot-amount-input]{width:100%}.garra-garra-number-field__group{background:var(--garra-colors-background-surface);border:1px solid;border-color:var(--garra-colors-border-control);border-radius:var(--garra-radii-control);display:flex;overflow:hidden}.garra-garra-number-field__group[data-disabled]{background:var(--garra-colors-disabled-background);border-color:var(--garra-colors-disabled-border)}.garra-garra-number-field__group[data-invalid]{border-color:var(--garra-colors-feedback-danger-border)}.garra-garra-number-field__group[data-dot-amount-group]{align-items:center}.garra-garra-number-field__group [data-dot-amount-currency]{color:var(--garra-colors-text-primary);flex-shrink:0;padding-inline-start:var(--garra-spacing-inset-compact);font-size:1.25rem;font-weight:500}.garra-garra-number-field__group:has(input:focus-visible){border-color:var(--garra-colors-focus-ring);box-shadow:inset 0 0 0 1px var(--garra-colors-focus-ring)}.garra-garra-number-field__input{padding-inline:var(--garra-spacing-inset-compact);letter-spacing:0;color:var(--garra-colors-text-primary);width:100%;min-width:0;min-height:calc(var(--garra-sizes-control-default) - 2px);background:0 0;border:0;outline:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;font-size:.875rem;font-weight:400;line-height:1.42857}.garra-garra-number-field__input:is(:disabled,[disabled],[data-disabled],[aria-disabled=true]){color:var(--garra-colors-disabled-foreground)}.garra-garra-number-field__input[data-dot-amount-control]{min-height:var(--garra-sizes-target-touch);font-size:1.75rem;font-weight:600}.garra-garra-number-field__increment{color:var(--garra-colors-icon-secondary);cursor:pointer;transition-property:color;transition-duration:var(--garra-durations-motion-feedback-duration);transition-timing-function:var(--garra-easings-motion-feedback-easing);width:var(--garra-sizes-control-default);min-height:calc(var(--garra-sizes-control-default) - 2px);background:0 0;border:0;border-radius:0;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.garra-garra-number-field__increment:is(:disabled,[data-disabled],[aria-disabled=true]){color:var(--garra-colors-disabled-foreground);cursor:default;background:0 0}.garra-garra-number-field__increment:is(:focus-visible,[data-focus-visible]){outline:2px solid;outline-color:var(--garra-colors-focus-ring)}.garra-garra-number-field__increment:is(:hover,:active,[data-pressed]){color:var(--garra-colors-icon-primary);background:0 0}.garra-garra-number-field__decrement{color:var(--garra-colors-icon-secondary);cursor:pointer;transition-property:color;transition-duration:var(--garra-durations-motion-feedback-duration);transition-timing-function:var(--garra-easings-motion-feedback-easing);width:var(--garra-sizes-control-default);min-height:calc(var(--garra-sizes-control-default) - 2px);background:0 0;border:0;border-radius:0;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.garra-garra-number-field__decrement:is(:disabled,[data-disabled],[aria-disabled=true]){color:var(--garra-colors-disabled-foreground);cursor:default;background:0 0}.garra-garra-number-field__decrement:is(:focus-visible,[data-focus-visible]){outline:2px solid;outline-color:var(--garra-colors-focus-ring)}.garra-garra-number-field__decrement:is(:hover,:active,[data-pressed]){color:var(--garra-colors-icon-primary);background:0 0}.garra-garra-linear-progress__root{gap:var(--garra-spacing-help-gap);grid-template-columns:1fr auto;align-items:center;width:min(20rem,100%);display:grid}.garra-garra-linear-progress__root[data-full-width]{width:100%}.garra-garra-linear-progress__label{color:var(--garra-colors-text-primary);font-size:.875rem;font-weight:500;line-height:1.42857}.garra-garra-linear-progress__label,.garra-garra-linear-progress__value{letter-spacing:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif}.garra-garra-linear-progress__value{color:var(--garra-colors-text-secondary);grid-column:2;font-size:.75rem;font-weight:400;line-height:1.33333}.garra-garra-linear-progress__track{background:var(--garra-colors-progress-track);border-radius:var(--progress-radius,0px);height:var(--progress-height,4px);grid-column:1/-1;position:relative;overflow:hidden}.garra-garra-linear-progress__indicator{background:var(--progress-color);border-radius:inherit;transition-property:width;transition-duration:var(--garra-durations-motion-progress-update-duration);transition-timing-function:var(--garra-easings-motion-progress-update-easing)}.garra-garra-linear-progress__indicator[data-indeterminate]{width:40%;height:100%;animation:1.4s ease-in-out infinite garra-progress-slide}.garra-garra-linear-progress__indicator[data-indeterminate]:dir(rtl){animation-name:garra-progress-slide-rtl}.garra-garra-callout__root{--callout-bg:var(--garra-colors-background-surface-sunken);--callout-fg:var(--garra-colors-text-primary);--callout-icon:var(--garra-colors-text-secondary);--callout-border:var(--garra-colors-border-decorative);padding:var(--garra-spacing-inset-default);background:var(--callout-bg);gap:var(--garra-spacing-inline-gap);border-radius:var(--garra-radii-surface);border:1px solid;border-color:var(--callout-border);color:var(--callout-fg);grid-template-columns:minmax(0,1fr);align-items:start;display:grid}.garra-garra-callout__root[data-has-icon]{grid-template-columns:auto minmax(0,1fr)}.garra-garra-callout__root[data-has-title]>[data-garra-adornment]{min-height:1.5rem}.garra-garra-callout__icon{color:var(--callout-icon);justify-content:center;align-items:center;min-height:1.25rem;display:inline-flex}.garra-garra-callout__content{min-width:0}.garra-garra-callout__title{font-size:1rem;font-weight:600;line-height:1.5}.garra-garra-callout__title,.garra-garra-callout__body{letter-spacing:0;color:inherit;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif}.garra-garra-callout__body{opacity:.88;font-size:.875rem;font-weight:400;line-height:1.42857}.garra-garra-callout__body:not(:first-child){margin-top:var(--garra-spacing-help-gap)}.garra-garra-callout__actions{gap:var(--garra-spacing-inline-gap);margin-top:var(--garra-spacing-content-gap);flex-wrap:wrap;align-items:center;display:flex}.garra-dot-grid__root{display:grid}.garra-dot-grid__item{padding-block:var(--garra-spacing-help-gap);gap:.375rem;position:relative}.garra-dot-grid__item[data-interactive]{cursor:pointer}.garra-dot-grid__picture{background:var(--garra-colors-fill-primary);border-radius:var(--garra-radii-surface);color:var(--garra-colors-accent-icon);flex-shrink:0;justify-content:center;align-items:center;width:3.25rem;height:3.25rem;display:flex;position:relative}.garra-dot-grid__image{border-radius:inherit;width:100%;height:100%;display:block}.garra-dot-grid__badge{inset-inline-end:-.625rem;position:absolute;top:-.375rem}.garra-dot-grid__label{color:var(--garra-colors-text-primary);-webkit-box-orient:vertical;width:100%;font-size:.8125rem;line-height:normal;display:-webkit-box;overflow:hidden}.garra-garra-text-field__control{background:var(--garra-colors-background-surface);gap:var(--garra-spacing-help-gap);border-width:var(--garra-border-widths-default);border-style:solid;border-color:var(--garra-colors-border-control);border-radius:var(--garra-radii-control);padding-inline:var(--garra-spacing-inset-compact);color:var(--garra-colors-text-primary);min-height:var(--garra-sizes-control-default);align-items:center;display:flex}.garra-garra-text-field__control[data-disabled]{background:var(--garra-colors-disabled-background);border-color:var(--garra-colors-disabled-border);color:var(--garra-colors-disabled-foreground)}.garra-garra-text-field__control[data-invalid]{border-color:var(--garra-colors-validation-invalid-border)}.garra-garra-text-field__control:has(>[data-slot=start]>[data-embedded]){padding-inline-start:2px}.garra-garra-text-field__control:has(>[data-slot=end]>[data-embedded]){padding-inline-end:2px}.garra-garra-text-field__control:has(input:focus-visible){outline:2px solid;outline-color:var(--garra-colors-focus-ring)}.garra-garra-text-field__control:hover:not([data-disabled]){border-color:var(--garra-colors-border-control-hover)}.garra-garra-text-field__start,.garra-garra-text-field__end{white-space:nowrap;color:var(--garra-colors-icon-secondary);flex-shrink:0;display:inline-flex}.garra-garra-text-field__start,.garra-garra-text-field__end,.garra-garra-text-field__input{letter-spacing:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;font-size:.875rem;font-weight:400;line-height:1.42857}.garra-garra-text-field__input{padding-block:var(--garra-spacing-help-gap);color:inherit;background:0 0;border:0;outline:0;width:100%;min-width:0;padding-inline:0}.garra-garra-text-field__input::placeholder,.garra-garra-text-field__input[data-placeholder]{color:var(--garra-colors-text-placeholder)}.garra-garra-text-field__input:is(:disabled,[disabled],[data-disabled],[aria-disabled=true]){cursor:not-allowed;color:var(--garra-colors-disabled-foreground)}.garra-dot-select-sheet__list{gap:var(--garra-spacing-stack-tight);display:grid}.garra-dot-select-sheet__option{text-align:start;justify-content:space-between}.garra-garra-circular-progress__root{gap:var(--garra-spacing-help-gap);vertical-align:middle;flex-direction:column;align-items:center;display:inline-flex}.garra-garra-circular-progress__label{color:var(--garra-colors-text-primary);font-size:.875rem;font-weight:500;line-height:1.42857}.garra-garra-circular-progress__label,.garra-garra-circular-progress__value{letter-spacing:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif}.garra-garra-circular-progress__value{color:var(--garra-colors-text-secondary);font-size:.75rem;font-weight:400;line-height:1.33333}.garra-garra-circular-progress__track{width:var(--progress-size,40px);height:var(--progress-size,40px);display:block;transform:rotate(-90deg)}.garra-garra-circular-progress__track[data-indeterminate]{animation:1.4s linear infinite garra-progress-rotate}.garra-garra-circular-progress__indicator{stroke:var(--progress-color);fill:none;transition-property:stroke-dashoffset;transition-duration:var(--garra-durations-motion-progress-update-duration);transition-timing-function:var(--garra-easings-motion-progress-update-easing)}.garra-garra-circular-progress__indicator[data-indeterminate]{animation:1.4s ease-in-out infinite garra-progress-arc}.garra-garra-toast__viewport{gap:var(--garra-spacing-stack-tight);z-index:var(--garra-z-index-notification);max-height:calc(100dvh - 2rem);inset-inline-start:var(--garra-spacing-page-gutter-narrow);inset-inline-end:var(--garra-spacing-page-gutter-narrow);top:calc(env(safe-area-inset-top,0px) + var(--garra-spacing-page-gutter-narrow));outline:0;flex-direction:column;width:20rem;max-width:calc(100vw - 2rem);margin-inline:auto;display:flex;position:fixed;bottom:auto;overflow-y:auto}.garra-garra-toast__root{padding:var(--garra-spacing-inset-default);background:var(--garra-colors-background-surface-raised);border:1px solid;border-color:var(--garra-colors-border-decorative);border-radius:var(--garra-radii-overlay);padding-block:var(--garra-spacing-inset-compact);color:var(--garra-colors-text-primary);box-shadow:var(--garra-shadows-floating);opacity:1;transform:translateX(var(--toast-swipe-movement-x,0px));transition-property:opacity,transform;transition-duration:var(--garra-durations-motion-position-duration);transition-timing-function:var(--garra-easings-motion-position-easing);outline:0;flex-shrink:0;padding-inline-end:2.75rem;position:relative}.garra-garra-toast__root [data-spinner]{animation:.8s linear infinite garra-spin;display:inline-flex}.garra-garra-toast__root[data-swiping]{transition:none}.garra-garra-toast__root[data-starting-style],.garra-garra-toast__root[data-ending-style]{opacity:0;transform:translateY(8px)}.garra-garra-toast__root[data-ending-style]{transition-duration:var(--garra-durations-motion-feedback-duration)}.garra-garra-toast__root[data-ending-style][data-swipe-direction=right]{transform:translate(110%)}.garra-garra-toast__root[data-limited]{display:none}.garra-garra-toast__root[data-type=success] [data-toast-icon]{color:var(--garra-colors-feedback-success-icon)}.garra-garra-toast__root[data-type=danger] [data-toast-icon]{color:var(--garra-colors-feedback-danger-icon)}.garra-garra-toast__root[data-type=warning] [data-toast-icon]{color:var(--garra-colors-feedback-warning-icon)}.garra-garra-toast__root[data-type=notice] [data-toast-icon]{color:var(--garra-colors-feedback-notice-icon)}.garra-garra-toast__root:focus-visible{outline:2px solid;outline-color:var(--garra-colors-focus-ring)}.garra-garra-toast__content{gap:var(--garra-spacing-inline-gap);grid-template-columns:auto minmax(0,1fr);align-items:start;display:grid}.garra-garra-toast__title{margin:0;font-weight:500}.garra-garra-toast__title,.garra-garra-toast__description{letter-spacing:0;overflow-wrap:anywhere;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;font-size:.875rem;line-height:1.42857}.garra-garra-toast__description{color:var(--garra-colors-text-secondary);margin-top:var(--garra-spacing-help-gap);font-weight:400}.garra-garra-toast__icon{margin-top:2px;display:inline-flex}.garra-garra-toast__close{box-shadow:none;inset-inline-end:var(--garra-spacing-help-gap);top:var(--garra-spacing-help-gap);background:0 0;border-color:#0000;position:absolute}.garra-garra-toast__action{margin-top:var(--garra-spacing-inline-gap)}.garra-garra-card__root{background:var(--garra-colors-background-surface);border-radius:var(--garra-radii-surface);color:var(--garra-colors-text-primary);flex-direction:column;min-width:0;display:flex;overflow:hidden}.garra-garra-card__header{padding:var(--card-padding);padding-bottom:0}.garra-garra-card__title{color:var(--garra-colors-text-primary);font-size:1rem;font-weight:600;line-height:1.5}.garra-garra-card__title,.garra-garra-card__description{letter-spacing:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif}.garra-garra-card__description{color:var(--garra-colors-text-secondary);margin-top:var(--garra-spacing-help-gap);font-size:.875rem;font-weight:400;line-height:1.42857}.garra-garra-card__body{padding:var(--card-padding);min-width:0}.garra-garra-card__footer{padding:var(--card-padding);gap:var(--garra-spacing-inline-gap);flex-wrap:wrap;align-items:center;padding-top:0;display:flex}.garra-garra-list__root{color:var(--garra-colors-text-primary);min-width:0;margin:0;padding:0;list-style:none}.garra-garra-list__item{padding:var(--list-padding);gap:var(--garra-spacing-inline-gap);border-bottom:var(--list-divider);border-color:var(--garra-colors-border-decorative);grid-template-columns:auto minmax(0,1fr) auto;align-items:center;min-width:0;display:grid}.garra-garra-list__item[data-interactive]{padding:0;display:block}.garra-garra-list__item:last-child{border-bottom:0}.garra-garra-list__interactive{padding:var(--list-padding);gap:var(--garra-spacing-inline-gap);border-radius:var(--garra-radii-control);color:inherit;text-align:start;cursor:pointer;width:100%;min-width:0;min-height:var(--garra-sizes-target-touch);background:0 0;border:0;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;text-decoration:none;display:grid}.garra-garra-list__interactive:disabled,.garra-garra-list__interactive[aria-disabled=true]{color:var(--garra-colors-disabled-foreground);cursor:not-allowed}.garra-garra-list__interactive:is(:focus-visible,[data-focus-visible]){outline:2px solid;outline-color:var(--garra-colors-focus-ring)}.garra-garra-list__interactive:is(:hover,[data-hover]){background:var(--garra-colors-action-quiet-background-hover)}.garra-garra-list__leading{color:var(--garra-colors-text-secondary);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.garra-garra-list__content{min-width:0}.garra-garra-list__title{color:var(--garra-colors-text-primary);font-size:1rem;line-height:1.5}.garra-garra-list__title,.garra-garra-list__description{letter-spacing:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;font-weight:400}.garra-garra-list__description{color:var(--garra-colors-text-secondary);margin-top:var(--garra-spacing-help-gap);font-size:.875rem;line-height:1.42857}.garra-garra-list__trailing{color:var(--garra-colors-text-secondary);justify-content:flex-end;align-items:center;min-width:0;display:inline-flex}.garra-garra-empty-state__root{padding:var(--garra-spacing-panel-inset);text-align:center;color:var(--garra-colors-text-primary);flex-direction:column;justify-content:center;align-items:center;min-width:0;display:flex}.garra-garra-empty-state__icon{background:var(--garra-colors-background-surface-sunken);border-radius:var(--garra-radii-full);color:var(--garra-colors-text-secondary);width:3rem;height:3rem;margin-bottom:var(--garra-spacing-content-gap);justify-content:center;align-items:center;display:inline-flex}.garra-garra-empty-state__title{color:var(--garra-colors-text-primary);font-size:1.25rem;font-weight:600;line-height:1.4}.garra-garra-empty-state__title,.garra-garra-empty-state__description{letter-spacing:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif}.garra-garra-empty-state__description{color:var(--garra-colors-text-secondary);max-width:32rem;margin-top:var(--garra-spacing-help-gap);font-size:.875rem;font-weight:400;line-height:1.42857}.garra-garra-empty-state__actions{gap:var(--garra-spacing-inline-gap);margin-top:var(--garra-spacing-content-gap);flex-wrap:wrap;justify-content:center;align-items:center;display:flex}.garra-garra-otp-field__root{gap:var(--garra-spacing-help-gap);flex-wrap:wrap;align-items:center;display:flex}.garra-garra-otp-field__input{background:var(--garra-colors-background-surface);border:1px solid;border-color:var(--garra-colors-border-control);border-radius:var(--garra-radii-control);text-align:center;letter-spacing:0;color:var(--garra-colors-text-primary);width:var(--garra-sizes-control-default);min-width:0;min-height:var(--garra-sizes-control-comfortable);outline:0;padding-inline:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.5}.garra-garra-otp-field__input:is(:disabled,[disabled],[data-disabled],[aria-disabled=true]){background:var(--garra-colors-disabled-background);border-color:var(--garra-colors-disabled-border);color:var(--garra-colors-disabled-foreground)}.garra-garra-otp-field__input[data-invalid]{border-color:var(--garra-colors-feedback-danger-border)}.garra-garra-otp-field__input:is(:focus,[data-focus]){border-color:var(--garra-colors-focus-ring);box-shadow:inset 0 0 0 1px var(--garra-colors-focus-ring)}.garra-garra-otp-field__separator{background:var(--garra-colors-border-decorative);margin-inline:var(--garra-spacing-help-gap);width:inlineGap;height:1px}.garra-garra-checkbox__control{background:var(--garra-colors-background-surface);border-radius:min(2px, var(--garra-radii-control));border-width:var(--garra-border-widths-default);border-style:solid;border-color:var(--garra-colors-border-control);cursor:pointer;flex-shrink:0;justify-content:center;align-items:center;width:1rem;height:1rem;display:inline-flex}.garra-garra-checkbox__control[data-checked],.garra-garra-checkbox__control[data-indeterminate]{background:var(--choice-fill);border-color:var(--choice-fill);color:var(--choice-ink)}.garra-garra-checkbox__control[data-disabled]{background:var(--garra-colors-disabled-background);border-color:var(--garra-colors-disabled-border);color:var(--garra-colors-disabled-foreground);cursor:not-allowed}.garra-garra-checkbox__control[data-invalid]{border-color:var(--garra-colors-validation-invalid-border)}.garra-garra-checkbox__control:is(:focus-visible,[data-focus-visible]){outline:2px solid;outline-color:var(--garra-colors-focus-ring)}.garra-garra-checkbox__indicator{opacity:0;transition-property:opacity,transform;transition-duration:0s;transition-timing-function:var(--garra-easings-motion-feedback-easing);justify-content:center;align-items:center;display:inline-flex;transform:scale(.95)}.garra-garra-checkbox__indicator[data-checked],.garra-garra-checkbox__indicator[data-indeterminate]{opacity:1;transition-duration:var(--garra-durations-motion-feedback-duration);transform:scale(1)}.garra-garra-checkbox__indicator[data-disabled],[role=checkbox]:focus-visible .garra-garra-checkbox__indicator,[role=radiogroup]:has(:focus-visible) .garra-garra-checkbox__indicator{transition-duration:0s}.garra-garra-radio-group__root{gap:var(--garra-spacing-inline-gap);flex-direction:column;display:flex}.garra-garra-radio-group__item{gap:var(--garra-spacing-inline-gap);cursor:pointer;min-height:var(--garra-sizes-control-default);align-items:center;display:flex}.garra-garra-radio-group__item:has([data-disabled]){cursor:not-allowed}.garra-garra-radio-group__control{background:var(--garra-colors-background-surface);border-radius:var(--garra-radii-full);border-width:var(--garra-border-widths-default);border-style:solid;border-color:var(--garra-colors-border-control);flex-shrink:0;justify-content:center;align-items:center;width:1rem;height:1rem;display:inline-flex}.garra-garra-radio-group__control[data-checked]{background:var(--choice-fill);border-color:var(--choice-fill);color:var(--choice-ink)}.garra-garra-radio-group__control[data-disabled]{background:var(--garra-colors-disabled-background);border-color:var(--garra-colors-disabled-border);color:var(--garra-colors-disabled-foreground)}.garra-garra-radio-group__control[data-invalid]{border-color:var(--garra-colors-validation-invalid-border)}.garra-garra-radio-group__control:is(:focus-visible,[data-focus-visible]){outline:2px solid;outline-color:var(--garra-colors-focus-ring)}.garra-garra-radio-group__indicator{border-radius:var(--garra-radii-full);opacity:0;transition-property:opacity,transform;transition-duration:0s;transition-timing-function:var(--garra-easings-motion-feedback-easing);background:currentColor;width:50%;height:50%;transform:scale(.95)}.garra-garra-radio-group__indicator[data-checked],.garra-garra-radio-group__indicator[data-indeterminate]{opacity:1;transition-duration:var(--garra-durations-motion-feedback-duration);transform:scale(1)}.garra-garra-radio-group__indicator[data-disabled],[role=checkbox]:focus-visible .garra-garra-radio-group__indicator,[role=radiogroup]:has(:focus-visible) .garra-garra-radio-group__indicator{transition-duration:0s}.garra-garra-radio-group__label{font-weight:500}.garra-garra-radio-group__label,.garra-garra-text-area__control{letter-spacing:0;color:var(--garra-colors-text-primary);font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;font-size:.875rem;line-height:1.42857}.garra-garra-text-area__control{background:var(--garra-colors-background-surface);padding:var(--garra-spacing-inset-compact);border-width:var(--garra-border-widths-default);border-style:solid;border-color:var(--garra-colors-border-control);border-radius:var(--garra-radii-control);box-sizing:border-box;resize:vertical;width:20rem;min-width:0;max-width:100%;font-weight:400;display:block}.garra-garra-text-area__control:is(:disabled,[disabled],[data-disabled],[aria-disabled=true]){background:var(--garra-colors-disabled-background);border-color:var(--garra-colors-disabled-border);color:var(--garra-colors-disabled-foreground);cursor:not-allowed}.garra-garra-text-area__control[data-invalid]{border-color:var(--garra-colors-validation-invalid-border)}.garra-garra-text-area__control::placeholder,.garra-garra-text-area__control[data-placeholder]{color:var(--garra-colors-text-placeholder)}.garra-garra-text-area__control:is(:focus-visible,[data-focus-visible]){outline:2px solid;outline-color:var(--garra-colors-focus-ring)}.garra-garra-text-area__control:hover:not(:disabled){border-color:var(--garra-colors-border-control-hover)}.garra-garra-select__root{width:16rem;max-width:100%}.garra-garra-select__control{background:var(--garra-colors-background-surface);gap:var(--garra-spacing-inline-gap);padding-inline:var(--garra-spacing-inset-compact);border:1px solid;border-color:var(--garra-colors-border-control);border-radius:var(--garra-radii-control);color:var(--garra-colors-text-primary);letter-spacing:0;width:100%;min-height:var(--garra-sizes-control-default);justify-content:space-between;align-items:center;font-family:inherit;font-size:.875rem;font-weight:400;line-height:1.42857;display:flex}.garra-garra-select__control[data-disabled],.garra-garra-select__control:has(input:disabled){background:var(--garra-colors-disabled-background);border-color:var(--garra-colors-disabled-border);color:var(--garra-colors-disabled-foreground)}.garra-garra-select__control[data-invalid],.garra-garra-select__control:has(input[aria-invalid=true]){border-color:var(--garra-colors-validation-invalid-border)}.garra-garra-select__control:focus-visible,.garra-garra-select__control:has(input:focus-visible){outline:2px solid;outline-color:var(--garra-colors-focus-ring)}.garra-garra-select__value{text-align:start}.garra-garra-select__value[data-placeholder]{color:var(--garra-colors-text-placeholder)}.garra-garra-select__icon{flex-shrink:0;justify-content:center;align-items:center;line-height:0;display:inline-flex}.garra-garra-select__positioner{z-index:var(--garra-z-index-floating)}.garra-garra-select__popup{background:var(--garra-colors-background-surface-raised);padding:var(--garra-spacing-help-gap);border:1px solid;border-color:var(--garra-colors-border-decorative);border-radius:var(--garra-radii-overlay);transform-origin:var(--garra-floating-transform-origin,center);opacity:1;transition-property:opacity,transform;transition-duration:var(--garra-durations-motion-floating-duration);transition-timing-function:var(--garra-easings-motion-floating-easing);color:var(--garra-colors-text-primary);box-shadow:var(--garra-shadows-floating);width:var(--garra-floating-anchor-inline-size,auto);min-width:12rem;max-width:var(--garra-floating-available-inline-size,calc(100vw - 2rem));max-height:var(--garra-floating-available-block-size,calc(100vh - 2rem));outline:0;animation-fill-mode:both;overflow-y:auto;transform:scale(1)}.garra-garra-select__popup[data-garra-instant],.garra-garra-select__popup[data-instant]{transition:none;animation:none}.garra-garra-select__popup:is([open],[data-open],[data-state=open],:popover-open){animation-name:garra-floating-enter;animation-duration:var(--garra-durations-motion-floating-duration);animation-timing-function:var(--garra-easings-motion-floating-easing)}.garra-garra-select__popup:is([closed],[data-closed],[data-state=closed]){animation-name:garra-floating-exit;animation-duration:var(--garra-durations-motion-floating-duration);animation-timing-function:var(--garra-easings-motion-floating-easing)}.garra-garra-select__popup[data-garra-state=open]{animation-name:garra-floating-enter;animation-duration:var(--garra-durations-motion-floating-duration);animation-timing-function:var(--garra-easings-motion-floating-easing)}.garra-garra-select__popup[data-garra-state=closed]{animation-name:garra-floating-exit;animation-duration:var(--garra-durations-motion-floating-duration);animation-timing-function:var(--garra-easings-motion-floating-easing)}.garra-garra-select__popup[data-garra-transition=entering],.garra-garra-select__popup[data-starting-style],.garra-garra-select__popup[data-garra-transition=exiting],.garra-garra-select__popup[data-ending-style]{opacity:0;animation-name:none;transform:scale(.97)}.garra-garra-select__list{outline:0;max-height:16rem;overflow-y:auto}.garra-garra-select__item{gap:var(--garra-spacing-inline-gap);padding-inline:var(--garra-spacing-inset-compact);padding-block:var(--garra-spacing-help-gap);border-radius:var(--garra-radii-control);letter-spacing:0;cursor:default;min-height:var(--garra-sizes-control-default);outline:0;justify-content:space-between;align-items:center;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;font-size:.875rem;font-weight:400;line-height:1.42857;display:flex}.garra-garra-select__item[data-highlighted]{background:var(--garra-colors-selection-background);color:var(--garra-colors-selection-foreground)}.garra-garra-select__item[data-disabled]{color:var(--garra-colors-disabled-foreground)}.garra-garra-select__empty{padding:var(--garra-spacing-inset-compact);letter-spacing:0;color:var(--garra-colors-text-secondary);font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;font-size:.875rem;font-weight:400;line-height:1.42857}.garra-garra-select__empty:empty{display:none}.garra-garra-select__groupLabel{padding:var(--garra-spacing-inset-compact);letter-spacing:0;color:var(--garra-colors-text-secondary);font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;font-size:.75rem;font-weight:500;line-height:1.33333}.garra-garra-sheet__backdrop{background:var(--garra-colors-background-scrim);z-index:var(--garra-z-index-modal);transition-property:opacity;transition-duration:var(--garra-durations-motion-overlay-enter-duration);transition-timing-function:var(--garra-easings-motion-overlay-enter-easing);animation-fill-mode:both;position:fixed;inset:0}.garra-garra-sheet__backdrop[data-garra-instant],.garra-garra-sheet__backdrop[data-instant]{transition:none;animation:none}.garra-garra-sheet__backdrop:is([open],[data-open],[data-state=open],:popover-open){animation-name:garra-fade-enter;animation-duration:var(--garra-durations-motion-overlay-enter-duration);animation-timing-function:var(--garra-easings-motion-overlay-enter-easing)}.garra-garra-sheet__backdrop:is([closed],[data-closed],[data-state=closed]){animation-name:garra-fade-exit;animation-duration:var(--garra-durations-motion-overlay-exit-duration);animation-timing-function:var(--garra-easings-motion-overlay-exit-easing)}.garra-garra-sheet__backdrop[data-garra-state=open]{animation-name:garra-fade-enter;animation-duration:var(--garra-durations-motion-overlay-enter-duration);animation-timing-function:var(--garra-easings-motion-overlay-enter-easing)}.garra-garra-sheet__backdrop[data-garra-state=closed]{animation-name:garra-fade-exit;animation-duration:var(--garra-durations-motion-overlay-exit-duration);animation-timing-function:var(--garra-easings-motion-overlay-exit-easing)}.garra-garra-sheet__backdrop[data-garra-transition=entering],.garra-garra-sheet__backdrop[data-starting-style]{opacity:0;animation-name:none}.garra-garra-sheet__backdrop[data-garra-transition=exiting],.garra-garra-sheet__backdrop[data-ending-style]{opacity:0;transition-duration:var(--garra-durations-motion-overlay-exit-duration);transition-timing-function:var(--garra-easings-motion-overlay-exit-easing);animation-name:none}.garra-garra-sheet__viewport{z-index:var(--garra-z-index-modal);justify-content:flex-end;align-items:center;padding:0;display:flex;position:fixed;inset:0;overflow:clip}.garra-garra-sheet__popup{background:var(--garra-colors-background-surface-raised);border:1px solid;border-color:var(--garra-colors-border-decorative);overflow-wrap:anywhere;box-shadow:var(--garra-shadows-modal);color:var(--garra-colors-text-primary);transition-property:transform;transition-duration:var(--garra-durations-motion-overlay-enter-duration);transition-timing-function:var(--garra-easings-motion-overlay-enter-easing);opacity:1;border-radius:0;outline:0;flex-direction:column;flex-shrink:0;width:100%;min-width:0;max-width:30rem;height:100dvh;min-height:0;max-height:100dvh;animation-fill-mode:both;display:flex;position:relative;overflow-y:auto;transform:translate(0)}.garra-garra-sheet__popup[data-garra-instant],.garra-garra-sheet__popup[data-instant]{transition:none;animation:none}.garra-garra-sheet__popup:is([open],[data-open],[data-state=open],:popover-open){animation-name:garra-overlay-enter;animation-duration:var(--garra-durations-motion-overlay-enter-duration);animation-timing-function:var(--garra-easings-motion-overlay-enter-easing)}.garra-garra-sheet__popup:is([closed],[data-closed],[data-state=closed]){animation-name:garra-overlay-exit;animation-duration:var(--garra-durations-motion-overlay-exit-duration);animation-timing-function:var(--garra-easings-motion-overlay-exit-easing)}.garra-garra-sheet__popup[data-garra-state=open]{animation-name:garra-overlay-enter;animation-duration:var(--garra-durations-motion-overlay-enter-duration);animation-timing-function:var(--garra-easings-motion-overlay-enter-easing)}.garra-garra-sheet__popup[data-garra-state=closed]{animation-name:garra-overlay-exit;animation-duration:var(--garra-durations-motion-overlay-exit-duration);animation-timing-function:var(--garra-easings-motion-overlay-exit-easing)}.garra-garra-sheet__popup[data-garra-transition=entering],.garra-garra-sheet__popup[data-starting-style]{opacity:0;animation-name:none;transform:translateY(4px)scale(.98)}.garra-garra-sheet__popup[data-garra-transition=exiting],.garra-garra-sheet__popup[data-ending-style]{opacity:0;transition-duration:var(--garra-durations-motion-overlay-exit-duration);transition-timing-function:var(--garra-easings-motion-overlay-exit-easing);animation-name:none;transform:translateY(4px)scale(.98)}.garra-garra-sheet__popup[data-starting-style],.garra-garra-sheet__popup[data-ending-style]{opacity:1;transform:translate3d(var(--sheet-enter-x,100%), var(--sheet-enter-y,0%), 0)}.garra-garra-sheet__header{padding:var(--garra-spacing-panel-inset);padding-inline-end:3.5rem;padding-bottom:var(--garra-spacing-inline-gap);flex-shrink:0}.garra-garra-sheet__title{letter-spacing:0;margin:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;font-size:1.25rem;font-weight:600;line-height:1.4}.garra-garra-sheet__description{color:var(--garra-colors-text-secondary);margin:0;margin-top:var(--garra-spacing-help-gap)}.garra-garra-sheet__description,.garra-garra-sheet__body{letter-spacing:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;font-size:.875rem;font-weight:400;line-height:1.42857}.garra-garra-sheet__body{flex:1;min-height:0;overflow-y:auto}.garra-garra-sheet__body,.garra-garra-sheet__footer{padding:var(--garra-spacing-panel-inset);padding-top:var(--garra-spacing-inline-gap)}.garra-garra-sheet__footer{gap:var(--garra-spacing-inline-gap);flex-wrap:wrap;flex-shrink:0;justify-content:flex-end;align-items:center;display:flex}.garra-garra-sheet__close{inset-inline-end:var(--garra-spacing-inset-default);top:var(--garra-spacing-inset-default);position:absolute}.garra-garra-base-ui-presence__surface.garra-garra-base-ui-presence__surface:is([open],[data-open],[data-state=open],:popover-open),.garra-garra-base-ui-presence__surface.garra-garra-base-ui-presence__surface:is([closed],[data-closed],[data-state=closed]){animation-name:none}.garra-garra-base-ui-floating__positioner{--garra-floating-anchor-inline-size:var(--anchor-width);--garra-floating-anchor-block-size:var(--anchor-height);--garra-floating-available-inline-size:var(--available-width);--garra-floating-available-block-size:var(--available-height);--garra-floating-transform-origin:var(--transform-origin)}.garra-garra-field__root{gap:var(--garra-spacing-help-gap);width:fit-content;min-width:0;max-width:100%;display:grid}.garra-garra-field__row{gap:var(--garra-spacing-inline-gap);align-items:center;min-width:0;display:flex}.garra-garra-field__label{color:var(--garra-colors-text-primary);font-weight:500}.garra-garra-field__label,.garra-garra-field__description{letter-spacing:0;overflow-wrap:anywhere;min-width:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;font-size:.875rem;line-height:1.42857}.garra-garra-field__description{color:var(--garra-colors-text-secondary);font-weight:400}.garra-garra-field__error{overflow-wrap:anywhere;letter-spacing:0;color:var(--garra-colors-feedback-danger-text);min-width:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;font-size:.875rem;font-weight:400;line-height:1.42857}.garra-garra-switch__control{--thumb-size:.75rem;--thumb-travel:.875rem;background:var(--garra-colors-background-surface-sunken);border-radius:var(--garra-radii-full);border-width:var(--garra-border-widths-default);border-style:solid;border-color:var(--garra-colors-border-control);transition-duration:var(--garra-durations-motion-feedback-duration);transition-timing-function:var(--garra-easings-motion-feedback-easing);cursor:pointer;flex-shrink:0;align-items:center;width:2rem;height:1.125rem;margin-inline-start:auto;padding:2px;transition-property:background-color,border-color;display:inline-flex}.garra-garra-switch__control[data-disabled]{background:var(--garra-colors-disabled-background);border-color:var(--garra-colors-disabled-border);cursor:not-allowed;transition-duration:0s}.garra-garra-switch__control[data-checked]{background:var(--choice-fill);border-color:var(--choice-fill)}.garra-garra-switch__control[data-invalid]{border-color:var(--garra-colors-validation-invalid-border)}.garra-garra-switch__control:is(:focus-visible,[data-focus-visible]){outline:2px solid;outline-color:var(--garra-colors-focus-ring)}.garra-garra-switch__control:focus-visible,[role=switch]:focus-visible .garra-garra-switch__control{transition-duration:0s}.garra-garra-switch__thumb{background:var(--garra-colors-icon-secondary);border-radius:var(--garra-radii-full);transition-duration:var(--garra-durations-motion-feedback-duration);transition-timing-function:var(--garra-easings-motion-feedback-easing);width:var(--thumb-size);height:var(--thumb-size);transition-property:transform,background-color;display:block;transform:translate(0)}.garra-garra-switch__thumb[data-disabled]{background:var(--garra-colors-disabled-foreground);transition-duration:0s}.garra-garra-switch__thumb[data-checked]{background:var(--choice-ink);transform:translateX(var(--thumb-travel))}:where([dir=rtl],:dir(rtl)) .garra-garra-switch__thumb[data-checked]{transform:translateX(calc(-1 * var(--thumb-travel)))}.garra-garra-switch__thumb:focus-visible,[role=switch]:focus-visible .garra-garra-switch__thumb{transition-duration:0s}.garra-garra-tab__root{gap:var(--garra-spacing-content-gap);flex-direction:column;min-width:0;display:flex}.garra-garra-tab__root[data-orientation=vertical]{flex-flow:wrap}.garra-garra-tab__root[data-orientation=vertical]>[role=tabpanel]{flex-basis:12rem}.garra-garra-tab__list{--tab-text:var(--garra-colors-text-secondary);--tab-active:var(--garra-colors-selection-foreground);--tab-hover:var(--garra-colors-action-quiet-background-hover);--tab-disabled:var(--garra-colors-disabled-foreground);--tab-focus:var(--garra-colors-focus-ring);--tab-line:var(--garra-colors-selection-border);flex-shrink:0;gap:0;min-width:0;display:flex;position:relative;overflow-x:auto}.garra-garra-tab__list[data-surface=inverse]{--tab-text:var(--garra-colors-text-inverse);--tab-active:var(--garra-colors-text-inverse);--tab-hover:color-mix(in srgb, var(--garra-colors-text-inverse) 6%, transparent);--tab-disabled:color-mix(in srgb, var(--garra-colors-text-inverse) 38%, var(--garra-colors-background-inverse));--tab-focus:var(--garra-colors-text-inverse);--tab-line:var(--garra-colors-text-inverse);background:var(--garra-colors-background-inverse);padding:var(--garra-spacing-help-gap);border-radius:var(--garra-radii-control);border-color:#0000}.garra-garra-tab__list[data-surface=subtle]{background:var(--garra-colors-background-surface-sunken);padding:var(--garra-spacing-help-gap);border-radius:var(--garra-radii-control)}.garra-garra-tab__list[data-orientation=vertical]{flex-direction:column;flex-shrink:1;flex-basis:min(100%,12rem);max-width:100%}.garra-garra-tab__trigger{border-radius:var(--garra-radii-control);padding-block:0;padding-inline:var(--garra-spacing-inset-default);z-index:1;transition-property:color,background-color;transition-duration:var(--garra-durations-motion-feedback-duration);transition-timing-function:var(--garra-easings-motion-feedback-easing);overflow-wrap:anywhere;color:var(--tab-text);letter-spacing:0;cursor:pointer;white-space:nowrap;min-width:0;min-height:var(--garra-sizes-control-default);background:0 0;border:0;flex-shrink:0;justify-content:center;align-items:center;gap:.375rem;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;font-size:.9375rem;font-weight:500;line-height:normal;display:inline-flex;position:relative}.garra-garra-tab__trigger[data-orientation=vertical]{text-align:start;justify-content:flex-start}.garra-garra-tab__trigger:is(:disabled,[disabled],[data-disabled],[aria-disabled=true]){color:var(--tab-disabled);cursor:default}.garra-garra-tab__trigger[data-active]{color:var(--tab-active);font-weight:600}.garra-garra-tab__trigger:is(:focus-visible,[data-focus-visible]){outline:2px solid;outline-color:var(--tab-focus)}.garra-garra-tab__trigger:hover:not([data-active]):not(:disabled):not([data-disabled]){background:var(--tab-hover)}.garra-garra-tab__content{flex:1;min-width:0}.garra-garra-tab__content:is(:focus-visible,[data-focus-visible]){outline:2px solid;outline-color:var(--garra-colors-focus-ring)}.garra-garra-tab__indicator{z-index:0;transform:translateX(var(--active-tab-left));transition-property:transform,width,height;transition-duration:var(--garra-durations-motion-position-duration);transition-timing-function:var(--garra-easings-motion-position-easing);width:var(--active-tab-width);position:absolute;left:0}[data-tab-keyboard] .garra-garra-tab__indicator{transition:none}.garra-garra-tab__adornment{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}@media (pointer:coarse){.garra-garra-number-field__group,.garra-garra-text-field__control{min-height:var(--garra-sizes-target-touch)}.garra-garra-toast__close{width:var(--garra-sizes-control-default)!important;min-width:var(--garra-sizes-control-default)!important;height:var(--garra-sizes-control-default)!important;min-height:var(--garra-sizes-control-default)!important}.garra-garra-breadcrumbs__overflowTrigger,.garra-garra-otp-field__input,.garra-garra-radio-group__item,.garra-garra-slider__control,.garra-garra-select__control,.garra-garra-select__item,.garra-garra-combo-select__control,.garra-garra-combo-select__item,.garra-garra-combo-multi-select__control,.garra-garra-combo-multi-select__item,.garra-garra-tags-input__control,.garra-garra-autocomplete-text-field__control,.garra-garra-autocomplete-text-field__item,.garra-garra-dropdown-menu__item,.garra-garra-context-menu__item,.garra-garra-file-input__input,.garra-garra-tag__root,.garra-garra-tag__remove,.garra-garra-pagination__control,.garra-garra-tab__trigger{min-height:var(--garra-sizes-target-touch)}}@media (prefers-reduced-motion:reduce){.garra-garra-number-field__increment,.garra-garra-number-field__decrement{transition-duration:0s}.garra-garra-linear-progress__indicator{transition:none}.garra-garra-linear-progress__indicator[data-indeterminate],.garra-garra-circular-progress__track[data-indeterminate]{animation:none}.garra-garra-circular-progress__indicator{transition:none}.garra-garra-circular-progress__indicator[data-indeterminate]{animation:none}.garra-garra-toast__root{transition:none}.garra-garra-toast__root [data-spinner]{animation:none}.garra-garra-checkbox__indicator,.garra-garra-radio-group__indicator{transition-duration:0s;transform:none}.garra-garra-select__popup,.garra-garra-combo-select__popup,.garra-garra-combo-multi-select__popup,.garra-garra-autocomplete-text-field__popup,.garra-garra-dialog__backdrop,.garra-garra-dialog__popup,.garra-garra-popover__popup,.garra-garra-dropdown-menu__popup,.garra-garra-context-menu__popup,.garra-garra-tooltip__popup,.garra-garra-hover-card__popup,.garra-garra-alert-dialog__backdrop,.garra-garra-alert-dialog__popup,.garra-garra-sheet__backdrop,.garra-garra-sheet__popup{transition:none;animation:none}.garra-garra-switch__control,.garra-garra-switch__thumb{transition-duration:0s}.garra-garra-tab__indicator{transition:none}}}.garra-garra-linear-progress__root--intent_primary{--progress-color:var(--garra-colors-progress-indicator)}.garra-garra-linear-progress__root--intent_secondary{--progress-color:var(--garra-colors-text-secondary)}.garra-garra-linear-progress__root--intent_warning{--progress-color:var(--garra-colors-feedback-warning-icon)}.garra-garra-linear-progress__root--intent_success{--progress-color:var(--garra-colors-feedback-success-icon)}.garra-garra-linear-progress__root--intent_danger{--progress-color:var(--garra-colors-feedback-danger-icon)}.garra-garra-callout__root--intent_notice{--callout-bg:var(--garra-colors-feedback-notice-background);--callout-fg:var(--garra-colors-feedback-notice-text);--callout-icon:var(--garra-colors-feedback-notice-icon);--callout-border:var(--garra-colors-feedback-notice-border)}.garra-garra-callout__root--intent_primary{--callout-bg:var(--garra-colors-selection-background);--callout-fg:var(--garra-colors-selection-foreground);--callout-icon:var(--garra-colors-selection-foreground);--callout-border:var(--garra-colors-selection-border)}.garra-garra-callout__root--intent_success{--callout-bg:var(--garra-colors-feedback-success-background);--callout-fg:var(--garra-colors-feedback-success-text);--callout-icon:var(--garra-colors-feedback-success-icon);--callout-border:var(--garra-colors-feedback-success-border)}.garra-garra-callout__root--intent_warning{--callout-bg:var(--garra-colors-feedback-warning-background);--callout-fg:var(--garra-colors-feedback-warning-text);--callout-icon:var(--garra-colors-feedback-warning-icon);--callout-border:var(--garra-colors-feedback-warning-border)}.garra-garra-callout__root--intent_danger{--callout-bg:var(--garra-colors-feedback-danger-background);--callout-fg:var(--garra-colors-feedback-danger-text);--callout-icon:var(--garra-colors-feedback-danger-icon);--callout-border:var(--garra-colors-feedback-danger-border)}.garra-garra-callout__root--variant_outline{background:0 0}.garra-dot-grid__root--gap_medium{gap:var(--garra-spacing-inline-gap)}.garra-dot-grid__badge--badgeStyle_solid [data-dot-grid-badge]{min-width:1.125rem;min-height:1rem;padding:1px 6px;font-size:.6875rem;font-weight:600;line-height:1rem}.garra-dot-grid__root--gap_none{gap:0}.garra-dot-grid__root--gap_small{gap:var(--garra-spacing-help-gap)}.garra-dot-grid__root--gap_large{gap:var(--garra-spacing-content-gap)}.garra-garra-text-field__control--size_md{--field-control-size:var(--garra-sizes-control-default);min-height:var(--garra-sizes-control-default)}.garra-garra-text-field__control--rounding_md{border-radius:var(--garra-radii-control)}.garra-garra-text-field__control--size_sm{--field-control-size:var(--garra-sizes-control-compact);min-height:var(--garra-sizes-control-compact);padding-inline:.375rem}.garra-garra-text-field__control--size_lg{--field-control-size:2.5rem;min-height:2.5rem}.garra-garra-text-field__control--size_xlg{--field-control-size:var(--garra-sizes-control-comfortable);min-height:var(--garra-sizes-control-comfortable)}.garra-garra-text-field__control--rounding_sm{border-radius:min(4px, var(--garra-radii-control))}.garra-garra-text-field__control--rounding_lg{border-radius:var(--garra-radii-surface)}.garra-garra-text-field__control--rounding_full{border-radius:var(--garra-radii-pill)}.garra-garra-text-field__control--intent_warning{border-color:var(--garra-colors-feedback-warning-icon)}.garra-garra-text-field__control--intent_warning[data-invalid]{border-color:var(--garra-colors-validation-invalid-border)}.garra-garra-text-field__control--intent_warning[data-disabled]{border-color:var(--garra-colors-disabled-border)}.garra-garra-circular-progress__root--intent_primary{--progress-color:var(--garra-colors-progress-indicator)}.garra-garra-circular-progress__root--intent_secondary{--progress-color:var(--garra-colors-text-secondary)}.garra-garra-circular-progress__root--intent_warning{--progress-color:var(--garra-colors-feedback-warning-icon)}.garra-garra-circular-progress__root--intent_success{--progress-color:var(--garra-colors-feedback-success-icon)}.garra-garra-circular-progress__root--intent_danger{--progress-color:var(--garra-colors-feedback-danger-icon)}.garra-garra-card__root--variant_surface{border:1px solid;border-color:var(--garra-colors-border-decorative)}.garra-garra-card__root--padding_comfortable{--card-padding:var(--garra-spacing-panel-inset)}.garra-garra-card__root--variant_elevated{background:var(--garra-colors-background-surface-raised);border:1px solid;border-color:var(--garra-colors-border-decorative);box-shadow:var(--garra-shadows-raised)}.garra-garra-card__root--variant_subtle{background:var(--garra-colors-background-surface-sunken)}.garra-garra-card__root--padding_compact{--card-padding:var(--garra-spacing-inset-default)}.garra-garra-list__root--variant_plain{--list-divider:0 solid transparent}.garra-garra-list__root--spacing_default{--list-padding:var(--garra-spacing-inset-default)}.garra-garra-list__root--size_md [data-garra-list-title]{letter-spacing:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.5}.garra-garra-list__root--size_md [data-garra-list-description]{letter-spacing:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;font-size:.875rem;font-weight:400;line-height:1.42857}.garra-garra-list__root--variant_divided{--list-divider:1px solid}.garra-garra-list__root--variant_surface{--list-divider:1px solid;background:var(--garra-colors-background-surface);border:1px solid;border-color:var(--garra-colors-border-decorative);border-radius:var(--garra-radii-surface);overflow:hidden}.garra-garra-list__root--spacing_compact{--list-padding:var(--garra-spacing-inset-compact)}.garra-garra-list__root--size_sm [data-garra-list-title]{letter-spacing:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;font-size:.875rem;font-weight:600;line-height:1.42857}.garra-garra-list__root--size_sm [data-garra-list-description]{letter-spacing:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;font-size:.75rem;font-weight:400;line-height:1.33333}.garra-garra-empty-state__root--variant_surface{background:var(--garra-colors-background-surface-sunken);border:1px solid;border-color:var(--garra-colors-border-decorative);border-radius:var(--garra-radii-surface)}.garra-garra-empty-state__icon--variant_surface{background:var(--garra-colors-background-surface)}.garra-garra-checkbox__control--intent_primary{--choice-fill:var(--garra-colors-action-primary-background-default);--choice-ink:var(--garra-colors-action-primary-foreground-default)}.garra-garra-checkbox__control--size_md{width:1rem;height:1rem}.garra-garra-checkbox__control--intent_notice{--choice-fill:var(--garra-colors-action-notice-background-default);--choice-ink:var(--garra-colors-action-notice-foreground-default)}.garra-garra-checkbox__control--intent_success{--choice-fill:var(--garra-colors-action-success-background-default);--choice-ink:var(--garra-colors-action-success-foreground-default)}.garra-garra-checkbox__control--intent_warning{--choice-fill:var(--garra-colors-action-warning-background-default);--choice-ink:var(--garra-colors-action-warning-foreground-default)}.garra-garra-checkbox__control--intent_danger{--choice-fill:var(--garra-colors-action-destructive-background-default);--choice-ink:var(--garra-colors-action-destructive-foreground-default)}.garra-garra-checkbox__control--size_sm{width:.875rem;height:.875rem}.garra-garra-checkbox__control--size_lg{width:1.25rem;height:1.25rem}.garra-garra-checkbox__control--size_xlg{width:1.5rem;height:1.5rem}.garra-garra-radio-group__control--size_md{width:1rem;height:1rem}.garra-garra-radio-group__control--intent_primary{--choice-fill:var(--garra-colors-action-primary-background-default);--choice-ink:var(--garra-colors-action-primary-foreground-default)}.garra-garra-radio-group__root--orientation_vertical{flex-direction:column}.garra-garra-radio-group__control--intent_notice{--choice-fill:var(--garra-colors-action-notice-background-default);--choice-ink:var(--garra-colors-action-notice-foreground-default)}.garra-garra-radio-group__control--intent_success{--choice-fill:var(--garra-colors-action-success-background-default);--choice-ink:var(--garra-colors-action-success-foreground-default)}.garra-garra-radio-group__control--intent_warning{--choice-fill:var(--garra-colors-action-warning-background-default);--choice-ink:var(--garra-colors-action-warning-foreground-default)}.garra-garra-radio-group__control--intent_danger{--choice-fill:var(--garra-colors-action-destructive-background-default);--choice-ink:var(--garra-colors-action-destructive-foreground-default)}.garra-garra-radio-group__control--size_sm{width:.875rem;height:.875rem}.garra-garra-radio-group__control--size_lg{width:1.25rem;height:1.25rem}.garra-garra-radio-group__control--size_xlg{width:1.5rem;height:1.5rem}.garra-garra-radio-group__root--orientation_horizontal{flex-flow:wrap}.garra-garra-radio-group__item--radioPos_end{flex-direction:row-reverse;justify-content:space-between}.garra-garra-text-area__control--resize_vertical{resize:vertical}.garra-garra-text-area__control--fullWidth_true{width:100%}.garra-garra-text-area__control--size_sm{padding:.375rem}.garra-garra-text-area__control--size_lg,.garra-garra-text-area__control--size_xlg{padding:var(--garra-spacing-inset-default)}.garra-garra-text-area__control--size_xlg{letter-spacing:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.5}.garra-garra-text-area__control--resize_none{resize:none}.garra-garra-text-area__control--resize_both{resize:both}.garra-garra-select__control--size_sm{min-height:var(--garra-sizes-control-compact);padding-inline:.375rem}.garra-garra-select__control--size_lg{min-height:2.5rem}.garra-garra-select__control--size_xlg{min-height:var(--garra-sizes-control-comfortable)}.garra-garra-select__root--fullWidth_true{width:100%}.garra-garra-sheet__popup--size_md{max-width:30rem}.garra-garra-sheet__viewport--anchor_right{justify-content:flex-end}.garra-garra-sheet__popup--anchor_right{--sheet-enter-x:100%;--sheet-enter-y:0%}.garra-garra-sheet__popup--size_sm{max-width:24rem}.garra-garra-sheet__popup--size_lg{max-width:40rem}.garra-garra-sheet__popup--size_xlg{max-width:48rem}.garra-garra-sheet__viewport--anchor_left{justify-content:flex-start}.garra-garra-sheet__popup--anchor_left{--sheet-enter-x:-100%;--sheet-enter-y:0%}.garra-garra-sheet__viewport--anchor_top{align-items:flex-start}.garra-garra-sheet__popup--anchor_top{--sheet-enter-x:0%;--sheet-enter-y:-100%;width:100%;max-width:100%;height:auto;max-height:90dvh}.garra-garra-sheet__viewport--anchor_bottom{align-items:flex-end}.garra-garra-sheet__popup--anchor_bottom{--sheet-enter-x:0%;--sheet-enter-y:100%;width:100%;max-width:100%;height:auto;max-height:90dvh}.garra-garra-sheet__popup--fullScreen_true{width:100%;max-width:100%;height:100dvh;max-height:100dvh}.garra-garra-field__row--inline_false{gap:var(--garra-spacing-label-gap);flex-direction:column;align-items:stretch}.garra-garra-field__root--fullWidth_true{width:100%}.garra-garra-field__row--inline_true{min-height:var(--garra-sizes-control-default)}.garra-garra-switch__control--intent_primary{--choice-fill:var(--garra-colors-action-primary-background-default);--choice-ink:var(--garra-colors-action-primary-foreground-default)}.garra-garra-switch__control--intent_notice{--choice-fill:var(--garra-colors-action-notice-background-default);--choice-ink:var(--garra-colors-action-notice-foreground-default)}.garra-garra-switch__control--intent_success{--choice-fill:var(--garra-colors-action-success-background-default);--choice-ink:var(--garra-colors-action-success-foreground-default)}.garra-garra-switch__control--intent_warning{--choice-fill:var(--garra-colors-action-warning-background-default);--choice-ink:var(--garra-colors-action-warning-foreground-default)}.garra-garra-switch__control--intent_danger{--choice-fill:var(--garra-colors-action-destructive-background-default);--choice-ink:var(--garra-colors-action-destructive-foreground-default)}.garra-garra-switch__control--size_sm{--thumb-size:.625rem;--thumb-travel:.75rem;width:1.75rem;height:1rem}.garra-garra-switch__control--size_lg{--thumb-size:1.125rem;--thumb-travel:1rem;width:2.5rem;height:1.5rem}.garra-garra-switch__control--size_xlg{--thumb-size:1.375rem;--thumb-travel:1.25rem;width:3rem;height:1.75rem}.garra-garra-tab__list--variant_line{--tab-hover-text:var(--garra-colors-text-primary);--tab-active:var(--garra-colors-accent-text);--tab-line:var(--garra-colors-accent-text);border-bottom:1px solid;border-color:var(--garra-colors-fill-primary)}.garra-garra-tab__list--variant_line[data-surface=transparent],.garra-garra-tab__list--variant_line[data-surface=subtle]{--tab-hover:transparent}.garra-garra-tab__list--variant_line[data-surface=inverse]{--tab-hover-text:var(--garra-colors-text-inverse)}.garra-garra-tab__list--variant_line[data-orientation=vertical]{border-bottom:0;border-inline-start:1px solid;border-color:var(--garra-colors-border-decorative)}.garra-garra-tab__trigger--variant_line{min-height:var(--garra-sizes-target-touch);border-radius:0}.garra-garra-tab__trigger--variant_line [data-dot-tab-badge]{min-width:1.125rem;min-height:1rem;padding:1px 6px;font-size:.6875rem;font-weight:600;line-height:1rem}.garra-garra-tab__trigger--variant_line:is(:hover,[data-hover]){color:var(--tab-hover-text)}.garra-garra-tab__trigger--variant_line[data-active]:hover{color:var(--tab-active)}.garra-garra-tab__indicator--variant_line{background:var(--tab-line);z-index:2;height:2px;bottom:0}.garra-garra-tab__indicator--variant_line[data-orientation=vertical]{transform:translateY(var(--active-tab-top));width:2px;height:var(--active-tab-height);top:0;bottom:auto}.garra-garra-tab__trigger--size_sm{letter-spacing:0;min-height:var(--garra-sizes-control-compact);font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;font-size:.75rem;font-weight:500;line-height:1.33333}.garra-garra-tab__trigger--size_lg{min-height:2.5rem}.garra-garra-tab__trigger--size_xlg{min-height:var(--garra-sizes-control-comfortable)}.garra-garra-tab__root--fullWidth_true,.garra-garra-tab__list--fullWidth_true[data-orientation=horizontal]{width:100%}.garra-garra-tab__trigger--fullWidth_true[data-orientation=horizontal]{flex:1}.garra-garra-tab__list--variant_ghost{gap:.125rem;padding:.1875rem}.garra-garra-tab__list--variant_ghost[data-surface=inverse]{--tab-active:var(--garra-colors-background-inverse)}.garra-garra-tab__list--variant_ghost[data-surface=subtle]{background:var(--garra-colors-fill-primary);border-radius:var(--garra-radii-overlay)}.garra-garra-tab__trigger--variant_ghost{min-height:2.25rem}.garra-garra-tab__trigger--variant_ghost[data-active]{background:0 0}.garra-garra-tab__trigger--variant_ghost[data-active]:is(:focus-visible,[data-focus-visible]){outline-color:var(--tab-active)}.garra-garra-tab__trigger--variant_ghost [data-dot-tab-badge]{min-width:1.125rem;min-height:1rem;padding:1px 6px;font-size:.6875rem;font-weight:600;line-height:1rem}.garra-garra-tab__indicator--variant_ghost{background:var(--garra-colors-background-surface);border-radius:var(--garra-radii-control);top:var(--active-tab-top);height:var(--active-tab-height);box-shadow:0 1px 3px #00000026}.garra-garra-tab__indicator--variant_ghost[data-orientation=vertical]{transform:translateY(var(--active-tab-top));top:0;left:var(--active-tab-left)}@media (pointer:coarse){.garra-garra-text-field__control--size_md,.garra-garra-text-field__control--size_sm,.garra-garra-text-field__control--size_lg,.garra-garra-text-field__control--size_xlg,.garra-garra-select__control--size_sm,.garra-garra-select__control--size_lg,.garra-garra-select__control--size_xlg,.garra-garra-combo-select__control--size_sm,.garra-garra-combo-select__control--size_lg,.garra-garra-combo-select__control--size_xlg,.garra-garra-combo-multi-select__control--size_sm,.garra-garra-combo-multi-select__control--size_lg,.garra-garra-combo-multi-select__control--size_xlg,.garra-garra-tags-input__control--size_sm,.garra-garra-tags-input__control--size_lg,.garra-garra-tags-input__control--size_xlg,.garra-garra-autocomplete-text-field__control--size_md,.garra-garra-autocomplete-text-field__control--size_sm,.garra-garra-autocomplete-text-field__control--size_lg,.garra-garra-autocomplete-text-field__control--size_xlg,.garra-garra-field__row--inline_true{min-height:var(--garra-sizes-target-touch)}}}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@monimesl/dot-renderer-react",
-  "version": "0.1.0-alpha.3",
+  "version": "0.1.0-alpha.5",
   "description": "React renderer for Dot webviews",
   "type": "module",
   "repository": {
@@ -8,7 +8,9 @@
     "url": "git+https://github.com/monime-lab/dot.git",
     "directory": "packages/renderers/react"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "files": [
     "dist"
   ],
@@ -24,33 +26,42 @@
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "lucide": "^1.48.0",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
-    "@monimesl/dot-core": "0.1.0-alpha.3",
-    "@monimesl/dot-webview": "0.1.0-alpha.3"
+    "uqr": "^0.1.3",
+    "@monimesl/dot-core": "0.1.0-alpha.5",
+    "@monimesl/dot-webview": "0.1.0-alpha.5"
   },
   "devDependencies": {
+    "@monime-lab/garra-icons": "0.1.1-alpha.0",
+    "@monime-lab/garra-presets": "0.1.1-alpha.4",
+    "@monime-lab/garra-style-system": "0.1.1-alpha.7",
+    "@monime-lab/garra-tokens": "0.1.1-alpha.2",
+    "@monime-lab/garra-ui": "0.1.1-alpha.7",
+    "@pandacss/dev": "1.12.1",
     "@testing-library/react": "^16.3.3",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "jsdom": "^30.1.1",
+    "lightningcss": "1.33.0",
     "publint": "^0.3.24",
     "rimraf": "^6.1.3",
     "rolldown": "^1.2.9",
     "tsdown": "^0.23.0",
     "typescript": "^5.9.3",
     "vitest": "^5.0.1",
-    "@monimesl/dot-service": "0.1.0-alpha.3"
+    "@monimesl/dot-service": "0.1.0-alpha.5"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "tsdown && node scripts/build-react-host.mjs",
+    "build": "pnpm icons:generate && pnpm css:generate && tsdown && cp src/_panda/styles.css dist/styles.css && cp node_modules/@monime-lab/garra-icons/LICENSE-PHOSPHOR dist/LICENSE-PHOSPHOR && node scripts/write-garra-versions.mjs && node scripts/build-react-host.mjs && node scripts/verify-dist.mjs",
+    "css:generate": "panda codegen && panda cssgen --outfile src/_panda/styles.css && node scripts/minify-css.mjs",
+    "icons:generate": "node scripts/generate-icon-artwork.mjs && prettier --write src/components/icon-artwork.ts",
     "dev": "tsdown --watch",
     "typecheck": "tsc --noEmit -p tsconfig.json",
     "test": "vitest run",
-    "clean": "rimraf dist *.tsbuildinfo"
+    "clean": "rimraf dist src/_panda *.tsbuildinfo"
   }
 }

package/dist/index.d.ts.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"index.d.ts","names":[],"sources":["../src/root.tsx","../src/types.ts","../src/components/index.ts","../src/renderer.tsx","../src/theme.ts"],"mappings":";;;;KASY,UAAU;EAAgB,OAAO;EAAO,UAAU;;;;KCNlD,eAAe,UAAU,qBAAqB,cAAc,QAAQ,GAAG;KAEvE,gBAAgB,kBAAkB,eAAe,kCACjD,WAAW,YAAY,eAAe,UAAU;KAGhD,yBAAyB,gBAAgB;;;qBCUxC,UAAU;;;UCTN;EACf,aAAa,QAAQ,0BACnB,SAAS,eAAe;EAC1B,UAAU;;iBAGI,gBAAgB,YAAiB,YAAW,uBAA4B;;;UCbvE;EACf;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;UAGe;EACf,QAAQ;EACR,QAAQ;EACR;;wBAqCc,aAAa,OAAO,OAAO,cAAc,cAAc;wBA0BvD,YAAY"}

package/dist/index.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"index.js","names":["Image","List"],"sources":["../src/theme.ts","../src/components/tokens.ts","../src/components/spinner.tsx","../src/components/button.tsx","../src/components/divider.tsx","../src/components/tones.ts","../src/components/icon.tsx","../src/components/feedback.tsx","../src/components/footer.tsx","../src/components/image.tsx","../src/components/field.tsx","../src/components/field-box.ts","../src/components/typed-text.ts","../src/components/input.tsx","../src/components/list.tsx","../src/components/animate.ts","../src/components/sheet.tsx","../src/components/select.tsx","../src/components/skeleton.tsx","../src/components/text.tsx","../src/components/text-area.tsx","../src/components/toast.tsx","../src/components/toggles.tsx","../src/components/view.tsx","../src/components/index.ts","../src/page-root.tsx","../src/root.tsx","../src/renderer.tsx","../src/index.ts"],"sourcesContent":["import type { ColorScheme, SchemeColor, Theme } from '@monimesl/dot-core';\nimport { createContext, useContext } from 'react';\n\nexport interface ResolvedColors {\n primary: string;\n background: string;\n surface: string;\n text: string;\n subtle: string;\n muted: string;\n border: string;\n info: string;\n success: string;\n warning: string;\n danger: string;\n}\n\nexport interface ResolvedTheme {\n scheme: ColorScheme;\n colors: ResolvedColors;\n radius: number;\n}\n\nexport const FONT_FAMILY = 'system-ui, sans-serif';\n\nconst DEFAULT_RADIUS = 12;\n\n// Dash's own look: black, white and grays, so a dot feels at home in it.\nconst DEFAULT_COLORS: Record<ColorScheme, ResolvedColors> = {\n light: {\n primary: '#1c1c1e',\n background: '#f2f2f2',\n surface: '#ffffff',\n text: '#111111',\n subtle: '#8e8e93',\n muted: '#e9e9eb',\n border: '#e9e9eb',\n info: '#0a64d6',\n success: '#1a8a4a',\n warning: '#b25e00',\n danger: '#d0312d',\n },\n dark: {\n primary: '#f5f5f5',\n background: '#121212',\n surface: '#1e1e1e',\n text: '#f5f5f5',\n subtle: '#8e8e93',\n muted: '#2c2c2e',\n border: '#2a2a2c',\n info: '#4c9dff',\n success: '#3ecf72',\n warning: '#ffb340',\n danger: '#ff6961',\n },\n};\n\nexport function resolveTheme(theme: Theme, systemScheme: ColorScheme): ResolvedTheme {\n const scheme = !theme.scheme || theme.scheme === 'system' ? systemScheme : theme.scheme;\n const defaults = DEFAULT_COLORS[scheme];\n const colors = theme.colors ?? {};\n const pick = (color: SchemeColor | undefined, fallback: string) => color?.[scheme] ?? fallback;\n return {\n scheme,\n colors: {\n primary: pick(colors.primary, defaults.primary),\n background: pick(colors.background, defaults.background),\n surface: pick(colors.surface, defaults.surface),\n text: pick(colors.text, defaults.text),\n subtle: defaults.subtle,\n muted: defaults.muted,\n border: defaults.border,\n info: defaults.info,\n success: defaults.success,\n warning: defaults.warning,\n danger: defaults.danger,\n },\n radius: theme.radius ?? DEFAULT_RADIUS,\n };\n}\n\nexport const ThemeContext = createContext<ResolvedTheme>(resolveTheme({}, 'light'));\n\nexport function useTheme(): ResolvedTheme {\n return useContext(ThemeContext);\n}\n","export const SPACE = { none: 0, small: 4, medium: 8, large: 16 } as const;\n\nexport const FONT_SIZE = { caption: 13, body: 15, title: 20 } as const;\n\n// Cards round a little more than the controls inside them.\nexport const CARD_RADIUS_SCALE = 1.5;\n\nexport const DISABLED_OPACITY = 0.6;\n\nexport const ICON_SIZE = { small: 16, medium: 20, large: 28 } as const;\n\n// At least 16px, or iOS zooms into the page when a field is focused.\nexport const FIELD_FONT_SIZE = 16;\n","import type { Spinner as SpinnerManifest } from '@monimesl/dot-core';\n\nimport { useTheme } from '../theme';\nimport type { ReactComponent } from '../types';\nimport { ICON_SIZE } from './tokens';\n\n// A quarter arc turning over a faint full circle, in the current text color.\nexport function LoadingIcon({ size }: { size: number }) {\n return (\n <svg\n className=\"dot-spinner\"\n width={size}\n height={size}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth={3}\n role=\"progressbar\"\n aria-label=\"Loading\"\n style={{ flexShrink: 0 }}\n >\n <circle cx=\"12\" cy=\"12\" r=\"9\" strokeOpacity={0.25} />\n <path d=\"M21 12a9 9 0 0 0-9-9\" strokeLinecap=\"round\">\n <animateTransform\n attributeName=\"transform\"\n type=\"rotate\"\n from=\"0 12 12\"\n to=\"360 12 12\"\n dur=\"0.8s\"\n repeatCount=\"indefinite\"\n />\n </path>\n </svg>\n );\n}\n\nexport const Spinner: ReactComponent<typeof SpinnerManifest> = ({ size = 'medium' }) => {\n const { colors } = useTheme();\n return (\n <span style={{ display: 'inline-flex', alignSelf: 'center', color: colors.subtle }}>\n <LoadingIcon size={ICON_SIZE[size]} />\n </span>\n );\n};\n","import type { Button as ButtonManifest } from '@monimesl/dot-core';\nimport { createEvent } from '@monimesl/dot-core';\n\nimport type { ReactComponent } from '../types';\nimport { useTheme } from '../theme';\nimport { LoadingIcon } from './spinner';\nimport { DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, SPACE } from './tokens';\n\nexport const Button: ReactComponent<typeof ButtonManifest> = ({\n variant = 'primary',\n disabled,\n loading,\n onClick,\n children,\n}) => {\n const { colors, radius } = useTheme();\n const filled = variant === 'primary' && !disabled;\n let color = colors.text;\n if (filled) {\n color = colors.surface;\n } else if (disabled) {\n color = colors.subtle;\n }\n const handleClick = onClick && !loading ? () => onClick(createEvent('click')) : undefined;\n return (\n <button\n type=\"button\"\n className=\"dot-button\"\n data-variant={variant}\n disabled={disabled}\n aria-busy={loading}\n onClick={handleClick}\n style={{\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n gap: SPACE.medium,\n minHeight: 48,\n padding: '12px 20px',\n border: 'none',\n borderRadius: radius,\n background: filled ? colors.primary : colors.muted,\n color,\n font: 'inherit',\n fontSize: FONT_SIZE.body,\n fontWeight: 600,\n opacity: disabled ? DISABLED_OPACITY : 1,\n cursor: disabled || loading ? 'default' : 'pointer',\n }}\n >\n {loading ? <LoadingIcon size={ICON_SIZE.small} /> : null}\n {children}\n </button>\n );\n};\n","import type { Divider as DividerManifest } from '@monimesl/dot-core';\n\nimport { useTheme } from '../theme';\nimport type { ReactComponent } from '../types';\n\nexport const Divider: ReactComponent<typeof DividerManifest> = () => {\n const { colors } = useTheme();\n return (\n <div\n className=\"dot-divider\"\n role=\"separator\"\n style={{ height: 1, alignSelf: 'stretch', flexShrink: 0, background: colors.border }}\n />\n );\n};\n","import type { IconName, STATUS_TONES, TONES } from '@monimesl/dot-core';\n\nimport type { ResolvedColors } from '../theme';\n\nexport type Tone = (typeof TONES)[number];\n\nexport const STATUS_ICONS: Record<(typeof STATUS_TONES)[number], IconName> = {\n default: 'info',\n info: 'info',\n success: 'success',\n warning: 'warning',\n danger: 'error',\n};\n\nexport function toneColor(colors: ResolvedColors, tone: Tone): string {\n switch (tone) {\n case 'default':\n return colors.text;\n case 'muted':\n return colors.subtle;\n default:\n return colors[tone];\n }\n}\n\nexport function toneBackground(colors: ResolvedColors, tone: Tone): string {\n if (tone === 'default' || tone === 'muted') {\n return colors.muted;\n }\n return withOpacity(colors[tone], 0.14);\n}\n\n// Appends an alpha channel to a #rrggbb color.\nfunction withOpacity(color: string, opacity: number): string {\n const alpha = Math.round(opacity * 255)\n .toString(16)\n .padStart(2, '0');\n return `${color}${alpha}`;\n}\n","import type { IconName, Icon as IconManifest } from '@monimesl/dot-core';\nimport type { IconNode } from 'lucide';\nimport {\n ArrowDown,\n ArrowLeft,\n ArrowRight,\n ArrowUp,\n Banknote,\n Bell,\n Calendar,\n Check,\n ChevronDown,\n ChevronLeft,\n ChevronRight,\n ChevronUp,\n CircleAlert,\n CircleCheck,\n CircleHelp,\n Clock,\n Copy,\n CreditCard,\n Download,\n Droplet,\n Ellipsis,\n Eye,\n EyeOff,\n File,\n Gift,\n Heart,\n History,\n House,\n Image,\n Info,\n Landmark,\n LayoutGrid,\n List,\n Lock,\n LogOut,\n Mail,\n MapPin,\n Minus,\n Pencil,\n Phone,\n Plus,\n QrCode,\n Receipt,\n RefreshCw,\n Search,\n Send,\n Settings,\n Share2,\n ShoppingCart,\n Smartphone,\n Star,\n Trash2,\n TriangleAlert,\n Upload,\n User,\n Users,\n Wallet,\n Wifi,\n X,\n Zap,\n} from 'lucide';\nimport { createElement } from 'react';\n\nimport { useTheme } from '../theme';\nimport type { ReactComponent } from '../types';\nimport { ICON_SIZE } from './tokens';\nimport { toneColor } from './tones';\n\n// Drawn by Lucide (lucide.dev, ISC license).\nconst ICONS: Record<IconName, IconNode> = {\n 'arrow-down': ArrowDown,\n 'arrow-left': ArrowLeft,\n 'arrow-right': ArrowRight,\n 'arrow-up': ArrowUp,\n bank: Landmark,\n bell: Bell,\n bolt: Zap,\n calendar: Calendar,\n card: CreditCard,\n cart: ShoppingCart,\n cash: Banknote,\n check: Check,\n 'chevron-down': ChevronDown,\n 'chevron-left': ChevronLeft,\n 'chevron-right': ChevronRight,\n 'chevron-up': ChevronUp,\n clock: Clock,\n close: X,\n copy: Copy,\n download: Download,\n edit: Pencil,\n error: CircleAlert,\n eye: Eye,\n 'eye-off': EyeOff,\n file: File,\n gift: Gift,\n grid: LayoutGrid,\n heart: Heart,\n help: CircleHelp,\n history: History,\n home: House,\n image: Image,\n info: Info,\n list: List,\n location: MapPin,\n lock: Lock,\n logout: LogOut,\n mail: Mail,\n minus: Minus,\n mobile: Smartphone,\n more: Ellipsis,\n phone: Phone,\n plus: Plus,\n 'qr-code': QrCode,\n receipt: Receipt,\n refresh: RefreshCw,\n search: Search,\n send: Send,\n settings: Settings,\n share: Share2,\n star: Star,\n success: CircleCheck,\n trash: Trash2,\n upload: Upload,\n user: User,\n users: Users,\n wallet: Wallet,\n warning: TriangleAlert,\n water: Droplet,\n wifi: Wifi,\n};\n\ninterface IconGraphicProps {\n name: IconName;\n size: number;\n color: string;\n}\n\nexport function IconGraphic({ name, size, color }: IconGraphicProps) {\n return (\n <svg\n className=\"dot-icon\"\n width={size}\n height={size}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke={color}\n strokeWidth={2}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n style={{ display: 'inline-block', verticalAlign: 'middle', flexShrink: 0 }}\n >\n {ICONS[name].map(([tag, attributes], index) =>\n createElement(tag, { key: index, ...attributes }),\n )}\n </svg>\n );\n}\n\nexport const Icon: ReactComponent<typeof IconManifest> = ({\n name,\n size = 'medium',\n tone = 'default',\n}) => {\n const { colors } = useTheme();\n if (!name) {\n return null;\n }\n return <IconGraphic name={name} size={ICON_SIZE[size]} color={toneColor(colors, tone)} />;\n};\n","import type {\n Badge as BadgeManifest,\n Notice as NoticeManifest,\n ProgressBar as ProgressBarManifest,\n} from '@monimesl/dot-core';\n\nimport { useTheme } from '../theme';\nimport type { ReactComponent } from '../types';\nimport { IconGraphic } from './icon';\nimport { FONT_SIZE, ICON_SIZE, SPACE } from './tokens';\nimport { STATUS_ICONS, toneBackground, toneColor } from './tones';\n\nexport const ProgressBar: ReactComponent<typeof ProgressBarManifest> = ({ value = 0 }) => {\n const { colors } = useTheme();\n const percent = Math.min(100, Math.max(0, value));\n return (\n <div\n className=\"dot-progress-bar\"\n role=\"progressbar\"\n aria-valuemin={0}\n aria-valuemax={100}\n aria-valuenow={percent}\n style={{ height: 6, borderRadius: 3, background: colors.muted, overflow: 'hidden' }}\n >\n <div\n style={{\n width: `${percent}%`,\n height: '100%',\n background: colors.primary,\n transition: 'width 0.2s',\n }}\n />\n </div>\n );\n};\n\nexport const Notice: ReactComponent<typeof NoticeManifest> = ({\n tone = 'default',\n title,\n children,\n}) => {\n const { colors, radius } = useTheme();\n return (\n <div\n className=\"dot-notice\"\n role={tone === 'danger' ? 'alert' : 'status'}\n style={{\n display: 'flex',\n gap: SPACE.medium,\n padding: '12px 14px',\n borderRadius: radius,\n background: toneBackground(colors, tone),\n color: colors.text,\n fontSize: FONT_SIZE.body,\n }}\n >\n <IconGraphic\n name={STATUS_ICONS[tone]}\n size={ICON_SIZE.medium}\n color={toneColor(colors, tone)}\n />\n <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>\n {title ? <span style={{ fontWeight: 600 }}>{title}</span> : null}\n {children ? <span>{children}</span> : null}\n </div>\n </div>\n );\n};\n\nexport const Badge: ReactComponent<typeof BadgeManifest> = ({ tone = 'default', children }) => {\n const { colors } = useTheme();\n return (\n <span\n className=\"dot-badge\"\n style={{\n display: 'inline-flex',\n alignItems: 'center',\n // Keeps its own width in a column, which would otherwise stretch it.\n width: 'fit-content',\n padding: '2px 8px',\n borderRadius: 999,\n background: toneBackground(colors, tone),\n color: toneColor(colors, tone),\n fontSize: FONT_SIZE.caption,\n fontWeight: 600,\n whiteSpace: 'nowrap',\n }}\n >\n {children}\n </span>\n );\n};\n","import type { Footer as FooterManifest } from '@monimesl/dot-core';\n\nimport { useTheme } from '../theme';\nimport type { ReactComponent } from '../types';\nimport { SPACE } from './tokens';\n\nexport const Footer: ReactComponent<typeof FooterManifest> = ({ children }) => {\n const { colors } = useTheme();\n return (\n <div\n className=\"dot-footer\"\n style={{\n position: 'sticky',\n bottom: 0,\n // Sits at the bottom of a short page too.\n marginTop: 'auto',\n display: 'flex',\n flexDirection: 'column',\n gap: SPACE.medium,\n paddingTop: SPACE.medium,\n paddingBottom: SPACE.medium,\n background: colors.background,\n }}\n >\n {children}\n </div>\n );\n};\n","import type { Image as ImageManifest } from '@monimesl/dot-core';\nimport { createEvent } from '@monimesl/dot-core';\nimport type { SyntheticEvent } from 'react';\n\nimport type { ReactComponent } from '../types';\nimport { useTheme } from '../theme';\n\nexport const Image: ReactComponent<typeof ImageManifest> = ({\n src,\n alt,\n width,\n height,\n fit = 'cover',\n shape = 'rounded',\n onLoad,\n onError,\n}) => {\n const { radius } = useTheme();\n const corners = { rounded: radius, square: 0, circle: '50%' }[shape];\n const handleLoad = onLoad\n ? (event: SyntheticEvent<HTMLImageElement>) => {\n const { naturalWidth, naturalHeight } = event.currentTarget;\n onLoad(createEvent('load', { width: naturalWidth, height: naturalHeight }));\n }\n : undefined;\n const handleError = onError\n ? () => onError(createEvent('error', { message: `Failed to load ${src}` }))\n : undefined;\n return (\n <img\n className=\"dot-image\"\n src={src}\n alt={alt ?? ''}\n width={width}\n height={height}\n style={{ borderRadius: corners, objectFit: fit }}\n onLoad={handleLoad}\n onError={handleError}\n />\n );\n};\n","import type { ReactNode } from 'react';\n\nimport { useTheme } from '../theme';\nimport { FONT_SIZE, SPACE } from './tokens';\n\ninterface FieldProps {\n label: string | undefined;\n hint: string | undefined;\n error: string | undefined;\n children: ReactNode;\n}\n\nexport function Field({ label, hint, error, children }: FieldProps) {\n const { colors } = useTheme();\n const note = error || hint;\n return (\n <label\n className=\"dot-field\"\n style={{ display: 'flex', flexDirection: 'column', gap: SPACE.small }}\n >\n {label ? <FieldLabel>{label}</FieldLabel> : null}\n {children}\n {note ? (\n <span style={{ fontSize: FONT_SIZE.caption, color: error ? colors.danger : colors.subtle }}>\n {note}\n </span>\n ) : null}\n </label>\n );\n}\n\nexport function FieldLabel({ children }: { children: ReactNode }) {\n return <span style={{ fontSize: FONT_SIZE.caption, fontWeight: 500 }}>{children}</span>;\n}\n","import type { CSSProperties } from 'react';\nimport { useState } from 'react';\n\nimport { useTheme } from '../theme';\nimport { DISABLED_OPACITY, FIELD_FONT_SIZE } from './tokens';\n\nexport function useFieldBox(error: string | undefined, disabled: boolean | undefined) {\n const { colors, radius } = useTheme();\n const [focused, setFocused] = useState(false);\n let borderColor = colors.border;\n if (error) {\n borderColor = colors.danger;\n } else if (focused) {\n borderColor = colors.primary;\n }\n const style: CSSProperties = {\n border: `1px solid ${borderColor}`,\n borderRadius: radius,\n background: colors.surface,\n color: colors.text,\n fontSize: FIELD_FONT_SIZE,\n opacity: disabled ? DISABLED_OPACITY : 1,\n };\n return { style, onFocus: () => setFocused(true), onBlur: () => setFocused(false) };\n}\n","import { useState } from 'react';\n\n// `value` is page state, which the service updates a moment after each keystroke. By the time\n// it sends back \"a\", the user may have typed \"abc\"; showing \"a\" would erase \"bc\". So a value\n// the user already typed is a late echo and is ignored. A value the user never typed, such as\n// a reset, was set by the page and replaces the text.\nexport function useTypedText(\n value: string | undefined,\n sendsChanges: boolean,\n): [text: string, type: (next: string) => void] {\n const [text, setText] = useState(value ?? '');\n const [awaitingEcho, setAwaitingEcho] = useState<string[]>([]);\n const [previousValue, setPreviousValue] = useState(value);\n\n if (value !== previousValue) {\n setPreviousValue(value);\n const echo = awaitingEcho.indexOf(value ?? '');\n if (echo >= 0) {\n setAwaitingEcho(awaitingEcho.slice(echo + 1));\n } else {\n setAwaitingEcho([]);\n setText(value ?? '');\n }\n }\n\n const type = (next: string) => {\n setText(next);\n if (sendsChanges && value !== undefined) {\n setAwaitingEcho([...awaitingEcho, next]);\n }\n };\n return [text, type];\n}\n","import type { Input as InputManifest } from '@monimesl/dot-core';\nimport { createEvent } from '@monimesl/dot-core';\n\nimport { useTheme } from '../theme';\nimport type { ReactComponent } from '../types';\nimport { Field } from './field';\nimport { useFieldBox } from './field-box';\nimport { SPACE } from './tokens';\nimport { useTypedText } from './typed-text';\n\nconst HTML_TYPES = {\n text: { type: 'text', inputMode: 'text' },\n number: { type: 'text', inputMode: 'decimal' },\n email: { type: 'email', inputMode: 'email' },\n phone: { type: 'tel', inputMode: 'tel' },\n password: { type: 'password', inputMode: 'text' },\n} as const;\n\nexport const Input: ReactComponent<typeof InputManifest> = ({\n value,\n placeholder,\n label,\n hint,\n error,\n prefix,\n suffix,\n type = 'text',\n maxLength,\n disabled,\n onChange,\n onSubmit,\n}) => {\n const { colors } = useTheme();\n const [text, typeText] = useTypedText(value, onChange !== undefined);\n const box = useFieldBox(error, disabled);\n return (\n <Field label={label} hint={hint} error={error}>\n <span\n className=\"dot-input\"\n style={{\n ...box.style,\n display: 'flex',\n alignItems: 'center',\n gap: SPACE.medium,\n padding: '0 14px',\n }}\n >\n {prefix ? <span style={{ color: colors.subtle }}>{prefix}</span> : null}\n <input\n {...HTML_TYPES[type]}\n value={text}\n placeholder={placeholder}\n maxLength={maxLength}\n disabled={disabled}\n aria-invalid={error ? true : undefined}\n onFocus={box.onFocus}\n onBlur={box.onBlur}\n onChange={(event) => {\n const next = event.currentTarget.value;\n typeText(next);\n onChange?.(createEvent('change', { value: next }));\n }}\n onKeyDown={(event) => {\n if (event.key === 'Enter' && onSubmit) {\n onSubmit(createEvent('submit', { value: text }));\n }\n }}\n style={{\n flexGrow: 1,\n minWidth: 0,\n padding: '12px 0',\n border: 'none',\n outline: 'none',\n background: 'transparent',\n color: 'inherit',\n font: 'inherit',\n }}\n />\n {suffix ? <span style={{ color: colors.subtle }}>{suffix}</span> : null}\n </span>\n </Field>\n );\n};\n","import type { List as ListManifest, ListItem as ListItemManifest } from '@monimesl/dot-core';\nimport { createEvent } from '@monimesl/dot-core';\nimport type { ReactNode } from 'react';\n\nimport { useTheme } from '../theme';\nimport type { ReactComponent } from '../types';\nimport { IconGraphic } from './icon';\nimport { CARD_RADIUS_SCALE, FONT_SIZE, ICON_SIZE, SPACE } from './tokens';\n\nexport const List: ReactComponent<typeof ListManifest> = ({ children }) => {\n const { colors, radius } = useTheme();\n // Rows are drawn in the surface color, so the 1px gaps between them show as lines.\n return (\n <div\n className=\"dot-list\"\n style={{\n display: 'flex',\n flexDirection: 'column',\n gap: 1,\n overflow: 'hidden',\n borderRadius: radius * CARD_RADIUS_SCALE,\n border: `1px solid ${colors.border}`,\n background: colors.border,\n }}\n >\n {children}\n </div>\n );\n};\n\nexport const ListItem: ReactComponent<typeof ListItemManifest> = ({\n title,\n subtitle,\n value,\n icon,\n image,\n onTap,\n children,\n}) => {\n const { colors, radius } = useTheme();\n let leading: ReactNode = null;\n if (image) {\n leading = (\n <img\n src={image}\n alt=\"\"\n width={40}\n height={40}\n style={{ borderRadius: radius, objectFit: 'cover', flexShrink: 0 }}\n />\n );\n } else if (icon) {\n leading = (\n <span\n style={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: 36,\n height: 36,\n borderRadius: '50%',\n background: colors.muted,\n flexShrink: 0,\n }}\n >\n <IconGraphic name={icon} size={ICON_SIZE.medium} color={colors.text} />\n </span>\n );\n }\n let trailing: ReactNode = children;\n if (!trailing && value) {\n trailing = <span style={{ color: colors.subtle }}>{value}</span>;\n }\n const handleClick = onTap ? () => onTap(createEvent('tap')) : undefined;\n return (\n <div\n className=\"dot-list-item\"\n role={onTap ? 'button' : undefined}\n onClick={handleClick}\n style={{\n display: 'flex',\n alignItems: 'center',\n gap: 12,\n padding: '12px 16px',\n background: colors.surface,\n fontSize: FONT_SIZE.body,\n cursor: onTap ? 'pointer' : undefined,\n }}\n >\n {leading}\n <span style={{ display: 'flex', flexDirection: 'column', flexGrow: 1, minWidth: 0 }}>\n {title ? <span style={{ fontWeight: 500 }}>{title}</span> : null}\n {subtitle ? (\n <span style={{ fontSize: FONT_SIZE.caption, color: colors.subtle }}>{subtitle}</span>\n ) : null}\n </span>\n {trailing ? (\n <span style={{ display: 'flex', alignItems: 'center', gap: SPACE.small, flexShrink: 0 }}>\n {trailing}\n </span>\n ) : null}\n {onTap ? (\n <IconGraphic name=\"chevron-right\" size={ICON_SIZE.small} color={colors.subtle} />\n ) : null}\n </div>\n );\n};\n","// Runs a Web Animation where the browser has them; the DOM that tests run in doesn't.\nexport function animate(\n element: HTMLElement | null,\n keyframes: Keyframe[],\n options: KeyframeAnimationOptions,\n): Animation | undefined {\n if (!element || typeof element.animate !== 'function') {\n return undefined;\n }\n return element.animate(keyframes, options);\n}\n","import type { Sheet as SheetManifest } from '@monimesl/dot-core';\nimport { createEvent } from '@monimesl/dot-core';\nimport type { ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\n\nimport { useTheme } from '../theme';\nimport type { ReactComponent } from '../types';\nimport { animate } from './animate';\nimport { CARD_RADIUS_SCALE, FONT_SIZE, SPACE } from './tokens';\n\nconst SLIDE_UP: Keyframe[] = [{ transform: 'translateY(100%)' }, { transform: 'translateY(0)' }];\n\ninterface SheetPanelProps {\n open: boolean;\n title: string | undefined;\n onClose: () => void;\n children: ReactNode;\n}\n\n// The panel and the dimmed page behind it, which Sheet and Select share.\nexport function SheetPanel({ open, title, onClose, children }: SheetPanelProps) {\n const { colors, radius } = useTheme();\n const panel = useRef<HTMLDivElement>(null);\n useEffect(() => {\n if (open) {\n animate(panel.current, SLIDE_UP, { duration: 200, easing: 'ease-out' });\n }\n }, [open]);\n if (!open) {\n return null;\n }\n const corner = radius * CARD_RADIUS_SCALE;\n return (\n <div\n className=\"dot-sheet\"\n onClick={onClose}\n style={{\n position: 'fixed',\n inset: 0,\n zIndex: 100,\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'flex-end',\n background: 'rgba(0, 0, 0, 0.4)',\n }}\n >\n <div\n ref={panel}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label={title}\n // Taps inside the panel don't close it.\n onClick={(event) => event.stopPropagation()}\n style={{\n display: 'flex',\n flexDirection: 'column',\n gap: SPACE.medium,\n maxHeight: '85vh',\n overflowY: 'auto',\n padding: `${SPACE.large}px ${SPACE.large}px 24px`,\n borderTopLeftRadius: corner,\n borderTopRightRadius: corner,\n background: colors.surface,\n color: colors.text,\n }}\n >\n {title ? (\n <span style={{ fontSize: FONT_SIZE.body, fontWeight: 600, textAlign: 'center' }}>\n {title}\n </span>\n ) : null}\n {children}\n </div>\n </div>\n );\n}\n\nexport const Sheet: ReactComponent<typeof SheetManifest> = ({\n open = false,\n title,\n onClose,\n children,\n}) => (\n <SheetPanel open={open} title={title} onClose={() => onClose?.(createEvent('close'))}>\n {children}\n </SheetPanel>\n);\n","import type { Option as OptionManifest, Select as SelectManifest } from '@monimesl/dot-core';\nimport { createEvent } from '@monimesl/dot-core';\nimport { createContext, useContext, useState } from 'react';\n\nimport { useTheme } from '../theme';\nimport type { ReactComponent } from '../types';\nimport { Field } from './field';\nimport { useFieldBox } from './field-box';\nimport { IconGraphic } from './icon';\nimport { SheetPanel } from './sheet';\nimport { FONT_SIZE, ICON_SIZE, SPACE } from './tokens';\n\n// Select shows its options twice: in the field, where only the chosen one shows its label, and in\n// the sheet, where each is a row to choose.\ninterface OptionPlace {\n inField: boolean;\n value: string | undefined;\n choose: ((value: string) => void) | undefined;\n}\n\nconst OptionPlaceContext = createContext<OptionPlace>({\n inField: false,\n value: undefined,\n choose: undefined,\n});\n\nexport const Select: ReactComponent<typeof SelectManifest> = ({\n value,\n label,\n placeholder,\n hint,\n error,\n disabled,\n onChange,\n children,\n}) => {\n const { colors } = useTheme();\n const [open, setOpen] = useState(false);\n const box = useFieldBox(error, disabled);\n const choose = (next: string) => {\n setOpen(false);\n onChange?.(createEvent('change', { value: next }));\n };\n return (\n <>\n <Field label={label} hint={hint} error={error}>\n <button\n type=\"button\"\n className=\"dot-select\"\n disabled={disabled}\n onClick={() => setOpen(true)}\n onFocus={box.onFocus}\n onBlur={box.onBlur}\n style={{\n font: 'inherit',\n ...box.style,\n display: 'flex',\n alignItems: 'center',\n gap: SPACE.medium,\n width: '100%',\n padding: '12px 14px',\n textAlign: 'start',\n cursor: disabled ? 'default' : 'pointer',\n }}\n >\n <span style={{ flexGrow: 1 }}>\n {value ? (\n <OptionPlaceContext.Provider value={{ inField: true, value, choose: undefined }}>\n {children}\n </OptionPlaceContext.Provider>\n ) : (\n <span style={{ color: colors.subtle }}>{placeholder}</span>\n )}\n </span>\n <IconGraphic name=\"chevron-down\" size={ICON_SIZE.small} color={colors.subtle} />\n </button>\n </Field>\n <SheetPanel open={open} title={label} onClose={() => setOpen(false)}>\n <div role=\"listbox\" style={{ display: 'flex', flexDirection: 'column' }}>\n <OptionPlaceContext.Provider value={{ inField: false, value, choose }}>\n {children}\n </OptionPlaceContext.Provider>\n </div>\n </SheetPanel>\n </>\n );\n};\n\nexport const Option: ReactComponent<typeof OptionManifest> = ({ value, label }) => {\n const { colors } = useTheme();\n const place = useContext(OptionPlaceContext);\n const chosen = value !== undefined && value === place.value;\n if (place.inField) {\n return chosen ? <>{label}</> : null;\n }\n const { choose } = place;\n const select = choose && value !== undefined ? () => choose(value) : undefined;\n return (\n <button\n type=\"button\"\n className=\"dot-option\"\n role=\"option\"\n aria-selected={chosen}\n onClick={select}\n style={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n padding: '14px 4px',\n border: 'none',\n borderBottom: `1px solid ${colors.border}`,\n background: 'transparent',\n color: colors.text,\n font: 'inherit',\n fontSize: FONT_SIZE.body,\n fontWeight: chosen ? 600 : 400,\n textAlign: 'start',\n cursor: 'pointer',\n }}\n >\n <span>{label}</span>\n {chosen ? <IconGraphic name=\"check\" size={ICON_SIZE.medium} color={colors.primary} /> : null}\n </button>\n );\n};\n","import type { Skeleton as SkeletonManifest } from '@monimesl/dot-core';\nimport type { ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\n\nimport { useTheme } from '../theme';\nimport type { ReactComponent } from '../types';\nimport { animate } from './animate';\nimport { SPACE } from './tokens';\n\nconst PULSE: Keyframe[] = [{ opacity: 1 }, { opacity: 0.4 }, { opacity: 1 }];\n\nconst LINE_HEIGHT = 12;\n\nexport const Skeleton: ReactComponent<typeof SkeletonManifest> = ({\n shape = 'text',\n lines = 1,\n height,\n}) => {\n const { colors, radius } = useTheme();\n const placeholder = useRef<HTMLDivElement>(null);\n useEffect(() => {\n const pulse = animate(placeholder.current, PULSE, { duration: 1200, iterations: Infinity });\n return () => pulse?.cancel();\n }, []);\n\n let content: ReactNode;\n if (shape === 'circle') {\n const size = height ?? 40;\n content = (\n <div style={{ width: size, height: size, borderRadius: '50%', background: colors.muted }} />\n );\n } else if (shape === 'box') {\n content = (\n <div style={{ height: height ?? 80, borderRadius: radius, background: colors.muted }} />\n );\n } else {\n const count = Math.max(1, lines);\n content = Array.from({ length: count }, (_, index) => {\n // A paragraph's last line is shorter than the others.\n const last = count > 1 && index === count - 1;\n return (\n <div\n key={index}\n style={{\n width: last ? '60%' : '100%',\n height: LINE_HEIGHT,\n borderRadius: LINE_HEIGHT / 2,\n background: colors.muted,\n }}\n />\n );\n });\n }\n return (\n <div\n ref={placeholder}\n className=\"dot-skeleton\"\n aria-busy=\"true\"\n style={{\n display: 'flex',\n flexDirection: 'column',\n gap: SPACE.medium,\n // Text and boxes take the width they're given; a circle keeps its size.\n width: shape === 'circle' ? undefined : '100%',\n flexShrink: shape === 'circle' ? 0 : 1,\n }}\n >\n {content}\n </div>\n );\n};\n","import type { Text as TextManifest } from '@monimesl/dot-core';\nimport type { CSSProperties } from 'react';\n\nimport { useTheme } from '../theme';\nimport type { ReactComponent } from '../types';\nimport { FONT_SIZE } from './tokens';\nimport { toneColor } from './tones';\n\nconst VARIANTS = {\n body: { fontSize: FONT_SIZE.body },\n caption: { fontSize: FONT_SIZE.caption },\n title: { fontSize: FONT_SIZE.title, fontWeight: 600 },\n} as const;\n\nconst WEIGHTS = { regular: 400, medium: 500, bold: 600 } as const;\n\nexport const Text: ReactComponent<typeof TextManifest> = ({\n variant = 'body',\n tone,\n weight,\n align,\n maxLines,\n children,\n}) => {\n const { colors } = useTheme();\n const style: CSSProperties = { ...VARIANTS[variant], textAlign: align };\n if (tone) {\n style.color = toneColor(colors, tone);\n }\n if (weight) {\n style.fontWeight = WEIGHTS[weight];\n }\n if (maxLines) {\n Object.assign(style, {\n display: '-webkit-box',\n WebkitLineClamp: maxLines,\n WebkitBoxOrient: 'vertical',\n overflow: 'hidden',\n });\n }\n return (\n <span className=\"dot-text\" style={style}>\n {children}\n </span>\n );\n};\n","import type { TextArea as TextAreaManifest } from '@monimesl/dot-core';\nimport { createEvent } from '@monimesl/dot-core';\n\nimport type { ReactComponent } from '../types';\nimport { Field } from './field';\nimport { useFieldBox } from './field-box';\nimport { useTypedText } from './typed-text';\n\nexport const TextArea: ReactComponent<typeof TextAreaManifest> = ({\n value,\n placeholder,\n label,\n hint,\n error,\n rows = 3,\n maxLength,\n disabled,\n onChange,\n}) => {\n const [text, typeText] = useTypedText(value, onChange !== undefined);\n const box = useFieldBox(error, disabled);\n return (\n <Field label={label} hint={hint} error={error}>\n <textarea\n className=\"dot-text-area\"\n value={text}\n placeholder={placeholder}\n rows={rows}\n maxLength={maxLength}\n disabled={disabled}\n aria-invalid={error ? true : undefined}\n onFocus={box.onFocus}\n onBlur={box.onBlur}\n onChange={(event) => {\n const next = event.currentTarget.value;\n typeText(next);\n onChange?.(createEvent('change', { value: next }));\n }}\n style={{\n font: 'inherit',\n ...box.style,\n boxSizing: 'border-box',\n width: '100%',\n padding: '12px 14px',\n outline: 'none',\n resize: 'none',\n }}\n />\n </Field>\n );\n};\n","import type { Toast as ToastManifest } from '@monimesl/dot-core';\nimport { createEvent } from '@monimesl/dot-core';\nimport { useEffect, useEffectEvent, useState } from 'react';\n\nimport { useTheme } from '../theme';\nimport type { ReactComponent } from '../types';\nimport { IconGraphic } from './icon';\nimport { FONT_SIZE, ICON_SIZE, SPACE } from './tokens';\nimport { STATUS_ICONS, toneColor } from './tones';\n\nexport const Toast: ReactComponent<typeof ToastManifest> = ({\n message,\n tone = 'default',\n duration = 2500,\n onHide,\n}) => {\n const { colors, radius } = useTheme();\n const [hidden, setHidden] = useState(false);\n const [previousMessage, setPreviousMessage] = useState(message);\n // A new message shows, even after the one before it hid.\n if (message !== previousMessage) {\n setPreviousMessage(message);\n setHidden(false);\n }\n const hide = useEffectEvent(() => {\n setHidden(true);\n onHide?.(createEvent('hide'));\n });\n useEffect(() => {\n if (!message) {\n return undefined;\n }\n const timer = setTimeout(hide, duration);\n return () => clearTimeout(timer);\n }, [message, duration]);\n\n if (!message || hidden) {\n return null;\n }\n return (\n <div\n className=\"dot-toast\"\n role=\"status\"\n style={{\n position: 'fixed',\n top: SPACE.large,\n left: '50%',\n transform: 'translateX(-50%)',\n zIndex: 110,\n display: 'flex',\n alignItems: 'center',\n gap: SPACE.medium,\n maxWidth: 'calc(100% - 32px)',\n width: 'max-content',\n padding: '10px 16px',\n borderRadius: radius,\n background: colors.primary,\n color: colors.surface,\n fontSize: FONT_SIZE.body,\n boxShadow: '0 4px 16px rgba(0, 0, 0, 0.2)',\n }}\n >\n {tone === 'default' ? null : (\n <IconGraphic\n name={STATUS_ICONS[tone]}\n size={ICON_SIZE.medium}\n color={toneColor(colors, tone)}\n />\n )}\n <span>{message}</span>\n </div>\n );\n};\n","import type {\n Checkbox as CheckboxManifest,\n Radio as RadioManifest,\n RadioGroup as RadioGroupManifest,\n Switch as SwitchManifest,\n} from '@monimesl/dot-core';\nimport type { DotEvent } from '@monimesl/dot-core';\nimport { createEvent } from '@monimesl/dot-core';\nimport type { CSSProperties, ReactNode } from 'react';\nimport { createContext, useContext } from 'react';\n\nimport type { ResolvedColors } from '../theme';\nimport { useTheme } from '../theme';\nimport type { ReactComponent } from '../types';\nimport { FieldLabel } from './field';\nimport { IconGraphic } from './icon';\nimport { DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, SPACE } from './tokens';\n\n// The whole row, label included, is one button, so a tap anywhere on it toggles.\nfunction rowStyle(colors: ResolvedColors, disabled: boolean | undefined): CSSProperties {\n return {\n display: 'flex',\n alignItems: 'center',\n gap: 12,\n width: '100%',\n padding: '6px 0',\n border: 'none',\n background: 'transparent',\n color: colors.text,\n font: 'inherit',\n fontSize: FONT_SIZE.body,\n textAlign: 'start',\n opacity: disabled ? DISABLED_OPACITY : 1,\n cursor: disabled ? 'default' : 'pointer',\n };\n}\n\nfunction changeTo(checked: boolean, onChange: ((event: DotEvent) => void) | undefined) {\n return onChange ? () => onChange(createEvent('change', { checked })) : undefined;\n}\n\n// The box of a Checkbox, or the circle of a Radio.\nfunction ChoiceMark({\n round,\n checked,\n children,\n}: {\n round: boolean;\n checked: boolean;\n children: ReactNode;\n}) {\n const { colors } = useTheme();\n // A checked box fills in; a chosen circle shows a dot inside instead.\n const filled = checked && !round;\n return (\n <span\n style={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n width: 22,\n height: 22,\n boxSizing: 'border-box',\n borderRadius: round ? '50%' : 6,\n border: `2px solid ${checked ? colors.primary : colors.subtle}`,\n background: filled ? colors.primary : 'transparent',\n }}\n >\n {children}\n </span>\n );\n}\n\nexport const Switch: ReactComponent<typeof SwitchManifest> = ({\n checked = false,\n label,\n disabled,\n onChange,\n}) => {\n const { colors } = useTheme();\n return (\n <button\n type=\"button\"\n className=\"dot-switch\"\n role=\"switch\"\n aria-checked={checked}\n disabled={disabled}\n onClick={changeTo(!checked, onChange)}\n style={{ ...rowStyle(colors, disabled), justifyContent: 'space-between' }}\n >\n {label ? <span>{label}</span> : null}\n <span\n style={{\n position: 'relative',\n flexShrink: 0,\n width: 44,\n height: 26,\n borderRadius: 13,\n background: checked ? colors.primary : colors.subtle,\n transition: 'background 0.2s',\n }}\n >\n <span\n style={{\n position: 'absolute',\n top: 2,\n left: checked ? 20 : 2,\n width: 22,\n height: 22,\n borderRadius: '50%',\n background: colors.surface,\n transition: 'left 0.2s',\n }}\n />\n </span>\n </button>\n );\n};\n\nexport const Checkbox: ReactComponent<typeof CheckboxManifest> = ({\n checked = false,\n label,\n disabled,\n onChange,\n}) => {\n const { colors } = useTheme();\n return (\n <button\n type=\"button\"\n className=\"dot-checkbox\"\n role=\"checkbox\"\n aria-checked={checked}\n disabled={disabled}\n onClick={changeTo(!checked, onChange)}\n style={rowStyle(colors, disabled)}\n >\n <ChoiceMark round={false} checked={checked}>\n {checked ? (\n <IconGraphic name=\"check\" size={ICON_SIZE.small} color={colors.surface} />\n ) : null}\n </ChoiceMark>\n {label ? <span>{label}</span> : null}\n </button>\n );\n};\n\ninterface RadioChoice {\n value: string | undefined;\n disabled: boolean;\n choose: ((value: string) => void) | undefined;\n}\n\nconst RadioGroupContext = createContext<RadioChoice>({\n value: undefined,\n disabled: true,\n choose: undefined,\n});\n\nexport const RadioGroup: ReactComponent<typeof RadioGroupManifest> = ({\n value,\n label,\n disabled = false,\n onChange,\n children,\n}) => {\n const choose = onChange\n ? (next: string) => onChange(createEvent('change', { value: next }))\n : undefined;\n return (\n <div\n className=\"dot-radio-group\"\n role=\"radiogroup\"\n aria-label={label}\n style={{ display: 'flex', flexDirection: 'column', gap: SPACE.small }}\n >\n {label ? <FieldLabel>{label}</FieldLabel> : null}\n <RadioGroupContext.Provider value={{ value, disabled, choose }}>\n {children}\n </RadioGroupContext.Provider>\n </div>\n );\n};\n\nexport const Radio: ReactComponent<typeof RadioManifest> = ({ value, label, disabled }) => {\n const { colors } = useTheme();\n const group = useContext(RadioGroupContext);\n const selected = value !== undefined && value === group.value;\n const inactive = disabled || group.disabled;\n const { choose } = group;\n const select = choose && value !== undefined ? () => choose(value) : undefined;\n return (\n <button\n type=\"button\"\n className=\"dot-radio\"\n role=\"radio\"\n aria-checked={selected}\n disabled={inactive}\n onClick={select}\n style={rowStyle(colors, inactive)}\n >\n <ChoiceMark round checked={selected}>\n {selected ? (\n <span\n style={{ width: 10, height: 10, borderRadius: '50%', background: colors.primary }}\n />\n ) : null}\n </ChoiceMark>\n {label ? <span>{label}</span> : null}\n </button>\n );\n};\n","import { createEvent } from '@monimesl/dot-core';\nimport type { View as ViewManifest } from '@monimesl/dot-core';\n\nimport { useTheme } from '../theme';\nimport type { ReactComponent } from '../types';\nimport { CARD_RADIUS_SCALE, SPACE } from './tokens';\n\nconst ALIGN = {\n stretch: 'stretch',\n start: 'flex-start',\n center: 'center',\n end: 'flex-end',\n} as const;\n\nconst JUSTIFY = {\n start: 'flex-start',\n center: 'center',\n end: 'flex-end',\n between: 'space-between',\n} as const;\n\nexport const View: ReactComponent<typeof ViewManifest> = ({\n direction = 'column',\n gap = 'medium',\n align = 'stretch',\n justify = 'start',\n wrap = false,\n grow = false,\n padding,\n paddingTop,\n paddingStart,\n paddingEnd,\n paddingBottom,\n variant = 'plain',\n onTap,\n children,\n}) => {\n const { colors, radius } = useTheme();\n const card = variant === 'card';\n const allSides = padding ?? (card ? 'large' : 'none');\n const handleClick = onTap ? () => onTap(createEvent('tap')) : undefined;\n return (\n <div\n className=\"dot-view\"\n onClick={handleClick}\n style={{\n display: 'flex',\n flexDirection: direction,\n gap: SPACE[gap],\n alignItems: ALIGN[align],\n justifyContent: JUSTIFY[justify],\n flexWrap: wrap ? 'wrap' : undefined,\n flexGrow: grow ? 1 : undefined,\n // Lets a growing view shrink below its content's width, so long text wraps.\n minWidth: grow ? 0 : undefined,\n paddingTop: SPACE[paddingTop ?? allSides],\n paddingInlineStart: SPACE[paddingStart ?? allSides],\n paddingInlineEnd: SPACE[paddingEnd ?? allSides],\n paddingBottom: SPACE[paddingBottom ?? allSides],\n borderRadius: card ? radius * CARD_RADIUS_SCALE : undefined,\n background: card ? colors.surface : undefined,\n border: card ? `1px solid ${colors.border}` : undefined,\n cursor: onTap ? 'pointer' : undefined,\n }}\n >\n {children}\n </div>\n );\n};\n","import type { BuiltinReactComponents } from '../types';\nimport { Button } from './button';\nimport { Divider } from './divider';\nimport { Badge, Notice, ProgressBar } from './feedback';\nimport { Footer } from './footer';\nimport { Icon } from './icon';\nimport { Image } from './image';\nimport { Input } from './input';\nimport { List, ListItem } from './list';\nimport { Option, Select } from './select';\nimport { Sheet } from './sheet';\nimport { Skeleton } from './skeleton';\nimport { Spinner } from './spinner';\nimport { Text } from './text';\nimport { TextArea } from './text-area';\nimport { Toast } from './toast';\nimport { Checkbox, Radio, RadioGroup, Switch } from './toggles';\nimport { View } from './view';\n\nexport const builtins: BuiltinReactComponents = {\n Badge,\n Button,\n Checkbox,\n Divider,\n Footer,\n Icon,\n Image,\n Input,\n List,\n ListItem,\n Notice,\n Option,\n ProgressBar,\n Radio,\n RadioGroup,\n Select,\n Sheet,\n Skeleton,\n Spinner,\n Switch,\n Text,\n TextArea,\n Toast,\n View,\n};\n","import type { ComponentType, ReactNode } from 'react';\nimport { toList, toText } from '@monimesl/dot-core';\nimport type { RenderContext } from '@monimesl/dot-core';\nimport type { PageController } from '@monimesl/dot-webview';\nimport { createElement, Fragment, useMemo, useSyncExternalStore } from 'react';\n\nexport type ComponentMap = Readonly<Record<string, ComponentType<Record<string, unknown>>>>;\n\ninterface PageRootProps {\n page: PageController;\n components: ComponentMap;\n}\n\nexport function PageRoot({ page, components }: PageRootProps) {\n const state = useSyncExternalStore(page.subscribe, page.getState);\n const context = useMemo<RenderContext<ReactNode>>(\n () => ({\n h(type, props, ...children) {\n const component = components[type];\n if (!component) {\n throw new Error(`The renderer has no component registered for tag '<${type}>'`);\n }\n return createElement(component, props, ...children);\n },\n text: toText,\n on: (handler, data) => page.on(handler, data),\n each: (items, render, key) =>\n createElement(\n Fragment,\n null,\n toList(items).map((item, index) =>\n createElement(\n Fragment,\n { key: key ? String(key(item, index)) : index },\n ...render(item, index),\n ),\n ),\n ),\n }),\n [page, components],\n );\n if (!state) {\n return null;\n }\n return page.viewRenderer(state, context);\n}\n","import type { Theme } from '@monimesl/dot-core';\nimport type { ComponentType, ReactNode } from 'react';\nimport { useMemo, useSyncExternalStore } from 'react';\nimport type { DotContext, PageController } from '@monimesl/dot-webview';\n\nimport { PageRoot } from './page-root';\nimport type { ComponentMap } from './page-root';\nimport { FONT_FAMILY, resolveTheme, ThemeContext, useTheme } from './theme';\n\nexport type Wrapper = ComponentType<{ theme: Theme; children: ReactNode }>;\n\ninterface RootProps {\n page: PageController;\n dotContext: DotContext;\n components: ComponentMap;\n wrapper: Wrapper | undefined;\n}\n\nexport function Root({ page, dotContext, components, wrapper: Wrapper }: RootProps) {\n const theme = useSyncExternalStore(dotContext.theme.subscribe, dotContext.theme.get);\n const systemContext = useSyncExternalStore(\n dotContext.systemContext.subscribe,\n dotContext.systemContext.get,\n );\n const resolved = useMemo(\n () => resolveTheme(theme, systemContext.scheme),\n [theme, systemContext.scheme],\n );\n const content = <PageRoot page={page} components={components} />;\n\n return (\n <ThemeContext.Provider value={resolved}>\n {Wrapper ? (\n <Wrapper theme={{ ...theme, scheme: resolved.scheme }}>{content}</Wrapper>\n ) : (\n <DefaultSurface>{content}</DefaultSurface>\n )}\n </ThemeContext.Provider>\n );\n}\n\nfunction DefaultSurface({ children }: { children: ReactNode }) {\n const { colors } = useTheme();\n return (\n <div\n className=\"dot-surface\"\n style={{\n minHeight: '100vh',\n display: 'flex',\n flexDirection: 'column',\n background: colors.background,\n color: colors.text,\n fontFamily: FONT_FAMILY,\n }}\n >\n {children}\n </div>\n );\n}\n","import type { Renderer } from '@monimesl/dot-webview';\nimport type { JSXElementConstructor } from 'react';\nimport { createRoot } from 'react-dom/client';\n\nimport { builtins } from './components';\nimport type { ComponentMap } from './page-root';\nimport type { Wrapper } from './root';\nimport { Root } from './root';\nimport type { BuiltinReactComponents } from './types';\n\nexport interface ReactRendererOptions {\n components?: Partial<BuiltinReactComponents> &\n Readonly<Record<string, JSXElementConstructor<never>>>;\n wrapper?: Wrapper;\n}\n\nexport function reactRenderer({ components = {}, wrapper }: ReactRendererOptions = {}): Renderer {\n const registry = { ...builtins, ...components } as unknown as ComponentMap;\n\n return {\n name: 'react',\n mount(container, page, dotContext) {\n const root = createRoot(container);\n root.render(\n <Root page={page} dotContext={dotContext} components={registry} wrapper={wrapper} />,\n );\n return () => root.unmount();\n },\n };\n}\n","export type { Wrapper } from './root';\nexport { builtins } from './components';\nimport { reactRenderer } from './renderer';\n\nexport type { ReactRendererOptions } from './renderer';\n\nexport { resolveTheme, useTheme } from './theme';\nexport type { ResolvedColors, ResolvedTheme } from './theme';\n\nexport type { BuiltinReactComponents, ReactComponent, ReactComponents } from './types';\n\nexport default reactRenderer;\n"],"mappings":"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"}