@itwin/itwinui-react 5.0.0-alpha.5 → 5.0.0-alpha.6

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.
@@ -1,5 +1,5 @@
1
1
  // inline-css:/home/runner/work/kiwi/kiwi/packages/kiwi-react/src/foundations/styles.css
2
- var styles_default = String.raw`@layer reset{*,:before,:after{box-sizing:border-box;margin:0;padding:0}:where([hidden]:not([hidden=until-found])){display:none!important}:where(html){-webkit-text-size-adjust:auto}:where(html:has(dialog:modal[open])){overflow:clip}:where(input,button,textarea,select){font:inherit;color:inherit}:where(img,picture,svg,video){block-size:auto;max-inline-size:100%;display:block}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(dialog,[popover]){color:inherit;inset:unset;max-width:unset;max-height:unset;overflow:unset;background:0 0;border:none}:where(dialog:not([open],[popover]),[popover]:not(:popover-open)){display:none!important}}@layer kiwi.foundations{html:where([data-color-scheme=light]),:host([data-color-scheme=light]),.🥝-root:where([data-kiwi-theme=light]){--kiwi-color-border-shadow-base:var(--kiwi-color-border-neutral-base);--kiwi-color-border-shadow-strong:#0000001f}@supports (color:lab(0% 0 0)){html:where([data-color-scheme=light]),:host([data-color-scheme=light]),.🥝-root:where([data-kiwi-theme=light]){--kiwi-color-border-shadow-strong:lab(0% 0 0/.12)}}:is(html:where([data-color-scheme=light]),:host([data-color-scheme=light]),.🥝-root:where([data-kiwi-theme=light])){--kiwi-color-bg-mono-base:#6b737d;--kiwi-color-bg-mono-muted:#fbfcfd;--kiwi-color-bg-mono-faded:#36393f;--kiwi-color-bg-accent-base:#188166;--kiwi-color-bg-accent-muted:#cae2dc;--kiwi-color-bg-accent-faded:#0d4133;--kiwi-color-bg-info-base:#0470dd;--kiwi-color-bg-info-muted:#c8dff8;--kiwi-color-bg-info-faded:#033970;--kiwi-color-bg-positive-base:#228404;--kiwi-color-bg-positive-muted:#cde3c6;--kiwi-color-bg-positive-faded:#114302;--kiwi-color-bg-attention-base:#9a6804;--kiwi-color-bg-attention-muted:#ecdbb9;--kiwi-color-bg-attention-faded:#4e3402;--kiwi-color-bg-critical-base:#df1c41;--kiwi-color-bg-critical-muted:#f9d4db;--kiwi-color-bg-critical-faded:#730e22;--kiwi-color-bg-surface-secondary:#edeeef;--kiwi-color-bg-surface-primary:#f7f8f9;--kiwi-color-bg-surface-tertiary:#e1e3e6;--kiwi-color-bg-surface-emphasis:#090a0b;--kiwi-color-bg-surface-base:#fbfcfd;--kiwi-color-bg-surface-quaternary:#111213;--kiwi-color-bg-neutral-base:#fbfcfd;--kiwi-color-bg-neutral-muted:#25282c;--kiwi-color-bg-neutral-faded:#edeeef;--kiwi-color-bg-neutral-inverse:#fbfcfd;--kiwi-color-bg-glow-base-hover-\%:4.0%;--kiwi-color-bg-glow-base-pressed-\%:8.0%;--kiwi-color-bg-glow-on-surface-accent-hover:#1881661f;--kiwi-color-bg-glow-on-surface-accent-pressed:#18816629;--kiwi-color-bg-glow-on-surface-neutral-hover:#0000000a;--kiwi-color-bg-glow-on-surface-neutral-pressed:#00000014;--kiwi-color-bg-glow-on-surface-critical-pressed:#df1c4129;--kiwi-color-bg-glow-on-surface-critical-hover:#df1c411f;--kiwi-color-bg-glow-on-surface-disabled:#0000000a;--kiwi-color-bg-glow-on-surface-overlay:#0000003d;--kiwi-color-bg-glow-on-surface-neutral-hover-\%:4.0%;--kiwi-color-bg-glow-on-surface-neutral-pressed-\%:8.0%;--kiwi-color-bg-glow-strong-pressed-\%:16.0%;--kiwi-color-bg-glow-strong-hover-\%:8.0%;--kiwi-color-icon-neutral-hover:#25282c;--kiwi-color-icon-neutral-base:#6b737d;--kiwi-color-icon-neutral-secondary:#969ca4;--kiwi-color-icon-neutral-tertiary:#acb1b7;--kiwi-color-icon-neutral-disabled:#acb1b7;--kiwi-color-icon-neutral-emphasis:#fff;--kiwi-color-icon-neutral-muted:#b8bdc1;--kiwi-color-icon-accent-base:#188166;--kiwi-color-icon-accent-strong:#188166;--kiwi-color-icon-accent-faded:#146b54;--kiwi-color-icon-info-base:#0470dd;--kiwi-color-icon-info-faded:#035db8;--kiwi-color-icon-positive-base:#228404;--kiwi-color-icon-positive-faded:#1c6d01;--kiwi-color-icon-attention-base:#9a6804;--kiwi-color-icon-attention-faded:#805604;--kiwi-color-icon-critical-base:#df1c41;--kiwi-color-icon-critical-faded:#ba1536;--kiwi-color-icon-mono-base:#6b737d;--kiwi-color-icon-mono-faded:#585f68;--kiwi-color-icon-glow-base-hover-\%:8.0%;--kiwi-color-icon-glow-base-pressed-\%:12.0%;--kiwi-color-icon-glow-strong-hover-\%:8.0%;--kiwi-color-icon-glow-strong-pressed-\%:16.0%;--kiwi-color-border-mono-base:#6b737d;--kiwi-color-border-mono-faded:#474c53;--kiwi-color-border-mono-muted:#808791;--kiwi-color-border-accent-base:#188166;--kiwi-color-border-accent-faded:#125544;--kiwi-color-border-accent-muted:#a7cfc4;--kiwi-color-border-accent-strong:#188166;--kiwi-color-border-info-base:#0470dd;--kiwi-color-border-info-faded:#024a93;--kiwi-color-border-info-muted:#a3caf3;--kiwi-color-border-positive-base:#228404;--kiwi-color-border-positive-muted:#acd1a0;--kiwi-color-border-positive-faded:#175801;--kiwi-color-border-attention-base:#9a6804;--kiwi-color-border-attention-muted:#dfc38a;--kiwi-color-border-attention-faded:#664502;--kiwi-color-border-critical-base:#df1c41;--kiwi-color-border-critical-muted:#f5b6c2;--kiwi-color-border-critical-faded:#96122c;--kiwi-color-border-glow-base-hover-\%:8.0%;--kiwi-color-border-glow-base-pressed-\%:12.0%;--kiwi-color-border-glow-on-surface-faded:#0000000a;--kiwi-color-border-glow-on-surface-disabled:#00000014;--kiwi-color-border-glow-strong-hover-\%:8.0%;--kiwi-color-border-glow-strong-pressed-\%:16.0%;--kiwi-color-border-neutral-base:#d4d7da;--kiwi-color-border-neutral-muted:#edeeef;--kiwi-color-border-neutral-faded:#c3c7cb;--kiwi-color-border-neutral-inverse:#090a0b;--kiwi-color-border-neutral-disabled:#acb1b7;--kiwi-color-border-surface-primary:#000000a3;--kiwi-color-text-mono-base:#6b737d;--kiwi-color-text-mono-faded:#585f68;--kiwi-color-text-accent-base:#188166;--kiwi-color-text-accent-faded:#146b54;--kiwi-color-text-accent-strong:#188166;--kiwi-color-text-info-base:#0470dd;--kiwi-color-text-info-faded:#035db8;--kiwi-color-text-positive-base:#228404;--kiwi-color-text-positive-faded:#1c6d01;--kiwi-color-text-attention-base:#9a6804;--kiwi-color-text-attention-faded:#805604;--kiwi-color-text-critical-base:#df1c41;--kiwi-color-text-critical-faded:#ba1536;--kiwi-color-text-neutral-emphasis:#fff;--kiwi-color-text-neutral-primary:#25282c;--kiwi-color-text-neutral-secondary:#474c53;--kiwi-color-text-neutral-tertiary:#585f68;--kiwi-color-text-neutral-disabled:#acb1b7;--kiwi-color-text-glow-base-hover-\%:8.0%;--kiwi-color-text-glow-base-pressed-\%:12.0%;--kiwi-color-text-glow-strong-hover-\%:8.0%;--kiwi-color-text-glow-strong-pressed-\%:16.0%;--kiwi-color-static-black:#000;--kiwi-color-static-white:#fff;--kiwi-color-static-accent:#188166;--kiwi-color-glow-hue:#000;--kiwi-shadow-surface-xs:0px 1px 0px 0px #0000000a,0px 0px 0px 1px #0000000a,inset 0px 0px 0px 1px #ffffff14,0px 1px 1px -.5px #0000000a;--kiwi-shadow-surface-sm:0px 1px 0px 0px #0000000a,0px 0px 0px 1px #0000000a,inset 0px 0px 0px 1px #ffffff14,0px 1px 1px -.5px #0000000a,0px 3px 3px -1.5px #0000000a;--kiwi-shadow-surface-md:0px 1px 0px 0px #0000000a,0px 0px 0px 1px #0000000a,0px 1px 1px -.5px #0000000a,inset 0px 0px 0px 1px #ffffff14,0px 3px 3px -1.5px #0000000a,0px 6px 6px -3px #0000000a;--kiwi-shadow-surface-lg:0px 1px 0px 0px #0000000a,0px 0px 0px 1px #0000000a,inset 0px 0px 0px 1px #ffffff14,0px 1px 1px -.5px #0000000a,0px 3px 3px -1.5px #0000000a,0px 6px 6px -3px #0000000a,0px 12px 12px -6px #0000000a;--kiwi-shadow-surface-xl:0px 1px 0px 0px #0000000a,0px 0px 0px 1px #0000000a,inset 0px 0px 0px 1px #ffffff14,0px 1px 1px -.5px #0000000a,0px 3px 3px -1.5px #0000000a,0px 6px 6px -3px #0000000a,0px 12px 12px -6px #0000000a,0px 24px 24px -12px #0000000a;--kiwi-shadow-button-base-drop:0px 1px 1px -.5px #0000000a,0px 3px 3px -1.5px #0000000a;--kiwi-shadow-button-base-inset:inset 0px -1px 0px 0px #00000014;--kiwi-shadow-input-base:inset 0px 1px 1px 0px #0000000a,inset 0px 2px 4px 0px #0000000a;--kiwi-shadow-tooltip-base:0px 1px 1px -.5px #0000000a,0px 3px 3px -1.5px #0000000a,0px 6px 6px -3px #0000000a,0px 12px 12px -6px #0000000a;--kiwi-shadow-toolbar-base:0px 1px 0px 0px #0000000a,0px 0px 0px 1px #000c,inset 0px 0px 0px 1px #ffffff14,0px 1px 1px -.5px #0000000a,0px 3px 3px -1.5px #0000000a,0px 6px 6px -3px #0000000a,0px 12px 12px -6px #0000000a,0px 24px 24px -12px #0000000a}@supports (color:lab(0% 0 0)){:is(html:where([data-color-scheme=light]),:host([data-color-scheme=light]),.🥝-root:where([data-kiwi-theme=light])){--kiwi-color-bg-mono-base:lab(48.0166% -1.43915 -6.5074);--kiwi-color-bg-mono-muted:lab(98.9092% -.247031 -.706732);--kiwi-color-bg-mono-faded:lab(23.8534% -.214189 -4.11189);--kiwi-color-bg-accent-base:lab(47.9563% -34.9245 6.19844);--kiwi-color-bg-accent-muted:lab(87.9759% -9.19014 .0959873);--kiwi-color-bg-accent-faded:lab(23.9375% -20.5725 3.46543);--kiwi-color-bg-info-base:lab(47.0129% 6.89358 -64.3085);--kiwi-color-bg-info-muted:lab(87.698% -4.01369 -14.8192);--kiwi-color-bg-info-faded:lab(23.4622% 1.99829 -36.9401);--kiwi-color-bg-positive-base:lab(48.1335% -44.6409 49.5307);--kiwi-color-bg-positive-muted:lab(88.0118% -11.6213 11.7514);--kiwi-color-bg-positive-faded:lab(24.1751% -26.9395 30.542);--kiwi-color-bg-attention-base:lab(48.4136% 15.4963 54.4339);--kiwi-color-bg-attention-muted:lab(88.1498% 2.15477 19.165);--kiwi-color-bg-attention-faded:lab(24.1971% 8.78102 32.5961);--kiwi-color-bg-critical-base:lab(48.9224% 71.0533 33.7629);--kiwi-color-bg-critical-muted:lab(88.2422% 14.0584 1.58488);--kiwi-color-bg-critical-faded:lab(24.3988% 42.8858 18.0549);--kiwi-color-bg-surface-secondary:lab(94.0372% -.246972 -.706685);--kiwi-color-bg-surface-primary:lab(97.5288% -.247031 -.706697);--kiwi-color-bg-surface-tertiary:lab(90.1495% -.315368 -1.86194);--kiwi-color-bg-surface-emphasis:lab(2.6968% -.176921 -.525138);--kiwi-color-bg-surface-base:lab(98.9092% -.247031 -.706732);--kiwi-color-bg-surface-quaternary:lab(5.39981% -.273019 -.834915);--kiwi-color-bg-neutral-base:lab(98.9092% -.247031 -.706732);--kiwi-color-bg-neutral-muted:lab(15.9236% -.636965 -3.2773);--kiwi-color-bg-neutral-faded:lab(94.0372% -.246972 -.706685);--kiwi-color-bg-neutral-inverse:lab(98.9092% -.247031 -.706732);--kiwi-color-bg-glow-on-surface-accent-hover:lab(47.9563% -34.9245 6.19844/.12);--kiwi-color-bg-glow-on-surface-accent-pressed:lab(47.9563% -34.9245 6.19844/.16);--kiwi-color-bg-glow-on-surface-neutral-hover:lab(0% 0 0/.04);--kiwi-color-bg-glow-on-surface-neutral-pressed:lab(0% 0 0/.08);--kiwi-color-bg-glow-on-surface-critical-pressed:lab(48.9224% 71.0533 33.7629/.16);--kiwi-color-bg-glow-on-surface-critical-hover:lab(48.9224% 71.0533 33.7629/.12);--kiwi-color-bg-glow-on-surface-disabled:lab(0% 0 0/.04);--kiwi-color-bg-glow-on-surface-overlay:lab(0% 0 0/.24);--kiwi-color-icon-neutral-hover:lab(15.9236% -.636965 -3.2773);--kiwi-color-icon-neutral-base:lab(48.0166% -1.43915 -6.5074);--kiwi-color-icon-neutral-secondary:lab(64.054% -1.04737 -5.12308);--kiwi-color-icon-neutral-tertiary:lab(71.9356% -.923872 -3.62363);--kiwi-color-icon-neutral-disabled:lab(71.9356% -.923872 -3.62363);--kiwi-color-icon-neutral-emphasis:lab(100% 0 0);--kiwi-color-icon-neutral-muted:lab(76.2989% -1.2362 -2.68073);--kiwi-color-icon-accent-base:lab(47.9563% -34.9245 6.19844);--kiwi-color-icon-accent-strong:lab(47.9563% -34.9245 6.19844);--kiwi-color-icon-accent-faded:lab(39.9909% -30.3487 5.56632);--kiwi-color-icon-info-base:lab(47.0129% 6.89358 -64.3085);--kiwi-color-icon-info-faded:lab(39.1976% 5.53149 -55.6635);--kiwi-color-icon-positive-base:lab(48.1335% -44.6409 49.5307);--kiwi-color-icon-positive-faded:lab(39.9631% -38.7919 43.5088);--kiwi-color-icon-attention-base:lab(48.4136% 15.4963 54.4339);--kiwi-color-icon-attention-faded:lab(40.3825% 13.3977 47.2814);--kiwi-color-icon-critical-base:lab(48.9224% 71.0533 33.7629);--kiwi-color-icon-critical-faded:lab(40.7732% 62.087 28.9054);--kiwi-color-icon-mono-base:lab(48.0166% -1.43915 -6.5074);--kiwi-color-icon-mono-faded:lab(39.9415% -1.2762 -6.16004);--kiwi-color-border-mono-base:lab(48.0166% -1.43915 -6.5074);--kiwi-color-border-mono-faded:lab(32.0457% -.837266 -4.75932);--kiwi-color-border-mono-muted:lab(55.9762% -1.06928 -6.24512);--kiwi-color-border-accent-base:lab(47.9563% -34.9245 6.19844);--kiwi-color-border-accent-faded:lab(31.7715% -24.8213 3.70236);--kiwi-color-border-accent-muted:lab(79.9997% -15.3805 .888169);--kiwi-color-border-accent-strong:lab(47.9563% -34.9245 6.19844);--kiwi-color-border-info-base:lab(47.0129% 6.89358 -64.3085);--kiwi-color-border-info-faded:lab(31.1021% 4.10384 -46.6708);--kiwi-color-border-info-muted:lab(79.5683% -6.13773 -24.6515);--kiwi-color-border-positive-base:lab(48.1335% -44.6409 49.5307);--kiwi-color-border-positive-muted:lab(80.1967% -19.5707 20.2529);--kiwi-color-border-positive-faded:lab(32.2353% -32.9313 37.368);--kiwi-color-border-attention-base:lab(48.4136% 15.4963 54.4339);--kiwi-color-border-attention-muted:lab(80.2272% 4.41358 32.3333);--kiwi-color-border-attention-faded:lab(32.3185% 10.6467 40.4656);--kiwi-color-border-critical-base:lab(48.9224% 71.0533 33.7629);--kiwi-color-border-critical-muted:lab(80.2428% 24.9421 3.36735);--kiwi-color-border-critical-faded:lab(32.6435% 52.4911 23.3912);--kiwi-color-border-glow-on-surface-faded:lab(0% 0 0/.04);--kiwi-color-border-glow-on-surface-disabled:lab(0% 0 0/.08);--kiwi-color-border-neutral-base:lab(85.8119% -.611454 -1.76426);--kiwi-color-border-neutral-muted:lab(94.0372% -.246972 -.706685);--kiwi-color-border-neutral-faded:lab(80.0111% -.849456 -2.46736);--kiwi-color-border-neutral-inverse:lab(2.6968% -.176921 -.525138);--kiwi-color-border-neutral-disabled:lab(71.9356% -.923872 -3.62363);--kiwi-color-border-surface-primary:lab(0% 0 0/.64);--kiwi-color-text-mono-base:lab(48.0166% -1.43915 -6.5074);--kiwi-color-text-mono-faded:lab(39.9415% -1.2762 -6.16004);--kiwi-color-text-accent-base:lab(47.9563% -34.9245 6.19844);--kiwi-color-text-accent-faded:lab(39.9909% -30.3487 5.56632);--kiwi-color-text-accent-strong:lab(47.9563% -34.9245 6.19844);--kiwi-color-text-info-base:lab(47.0129% 6.89358 -64.3085);--kiwi-color-text-info-faded:lab(39.1976% 5.53149 -55.6635);--kiwi-color-text-positive-base:lab(48.1335% -44.6409 49.5307);--kiwi-color-text-positive-faded:lab(39.9631% -38.7919 43.5088);--kiwi-color-text-attention-base:lab(48.4136% 15.4963 54.4339);--kiwi-color-text-attention-faded:lab(40.3825% 13.3977 47.2814);--kiwi-color-text-critical-base:lab(48.9224% 71.0533 33.7629);--kiwi-color-text-critical-faded:lab(40.7732% 62.087 28.9054);--kiwi-color-text-neutral-emphasis:lab(100% 0 0);--kiwi-color-text-neutral-primary:lab(15.9236% -.636965 -3.2773);--kiwi-color-text-neutral-secondary:lab(32.0457% -.837266 -4.75932);--kiwi-color-text-neutral-tertiary:lab(39.9415% -1.2762 -6.16004);--kiwi-color-text-neutral-disabled:lab(71.9356% -.923872 -3.62363);--kiwi-color-static-black:lab(0% 0 0);--kiwi-color-static-white:lab(100% 0 0);--kiwi-color-static-accent:lab(47.9563% -34.9245 6.19844);--kiwi-color-glow-hue:lab(0% 0 0);--kiwi-shadow-surface-xs:0px 1px 0px 0px lab(0% 0 0/.04),0px 0px 0px 1px lab(0% 0 0/.04),inset 0px 0px 0px 1px lab(100% 0 0/.08),0px 1px 1px -.5px lab(0% 0 0/.04);--kiwi-shadow-surface-sm:0px 1px 0px 0px lab(0% 0 0/.04),0px 0px 0px 1px lab(0% 0 0/.04),inset 0px 0px 0px 1px lab(100% 0 0/.08),0px 1px 1px -.5px lab(0% 0 0/.04),0px 3px 3px -1.5px lab(0% 0 0/.04);--kiwi-shadow-surface-md:0px 1px 0px 0px lab(0% 0 0/.04),0px 0px 0px 1px lab(0% 0 0/.04),0px 1px 1px -.5px lab(0% 0 0/.04),inset 0px 0px 0px 1px lab(100% 0 0/.08),0px 3px 3px -1.5px lab(0% 0 0/.04),0px 6px 6px -3px lab(0% 0 0/.04);--kiwi-shadow-surface-lg:0px 1px 0px 0px lab(0% 0 0/.04),0px 0px 0px 1px lab(0% 0 0/.04),inset 0px 0px 0px 1px lab(100% 0 0/.08),0px 1px 1px -.5px lab(0% 0 0/.04),0px 3px 3px -1.5px lab(0% 0 0/.04),0px 6px 6px -3px lab(0% 0 0/.04),0px 12px 12px -6px lab(0% 0 0/.04);--kiwi-shadow-surface-xl:0px 1px 0px 0px lab(0% 0 0/.04),0px 0px 0px 1px lab(0% 0 0/.04),inset 0px 0px 0px 1px lab(100% 0 0/.08),0px 1px 1px -.5px lab(0% 0 0/.04),0px 3px 3px -1.5px lab(0% 0 0/.04),0px 6px 6px -3px lab(0% 0 0/.04),0px 12px 12px -6px lab(0% 0 0/.04),0px 24px 24px -12px lab(0% 0 0/.04);--kiwi-shadow-button-base-drop:0px 1px 1px -.5px lab(0% 0 0/.04),0px 3px 3px -1.5px lab(0% 0 0/.04);--kiwi-shadow-button-base-inset:inset 0px -1px 0px 0px lab(0% 0 0/.08);--kiwi-shadow-input-base:inset 0px 1px 1px 0px lab(0% 0 0/.04),inset 0px 2px 4px 0px lab(0% 0 0/.04);--kiwi-shadow-tooltip-base:0px 1px 1px -.5px lab(0% 0 0/.04),0px 3px 3px -1.5px lab(0% 0 0/.04),0px 6px 6px -3px lab(0% 0 0/.04),0px 12px 12px -6px lab(0% 0 0/.04);--kiwi-shadow-toolbar-base:0px 1px 0px 0px lab(0% 0 0/.04),0px 0px 0px 1px lab(0% 0 0/.8),inset 0px 0px 0px 1px lab(100% 0 0/.08),0px 1px 1px -.5px lab(0% 0 0/.04),0px 3px 3px -1.5px lab(0% 0 0/.04),0px 6px 6px -3px lab(0% 0 0/.04),0px 12px 12px -6px lab(0% 0 0/.04),0px 24px 24px -12px lab(0% 0 0/.04)}}html:where([data-color-scheme=dark]),:host([data-color-scheme=dark]),.🥝-root:where([data-kiwi-theme=dark]){--kiwi-color-border-shadow-base:#ffffff14;--kiwi-color-border-shadow-strong:#ffffff29}@supports (color:lab(0% 0 0)){html:where([data-color-scheme=dark]),:host([data-color-scheme=dark]),.🥝-root:where([data-kiwi-theme=dark]){--kiwi-color-border-shadow-base:lab(100% 0 0/.08);--kiwi-color-border-shadow-strong:lab(100% 0 0/.16)}}:is(html:where([data-color-scheme=dark]),:host([data-color-scheme=dark]),.🥝-root:where([data-kiwi-theme=dark])){--kiwi-color-bg-mono-base:#6b737d;--kiwi-color-bg-mono-muted:#36393f;--kiwi-color-bg-mono-faded:#969ca4;--kiwi-color-bg-accent-base:#188166;--kiwi-color-bg-accent-muted:#0d4133;--kiwi-color-bg-accent-faded:#61a896;--kiwi-color-bg-info-base:#0470dd;--kiwi-color-bg-info-muted:#033970;--kiwi-color-bg-info-faded:#589fe9;--kiwi-color-bg-positive-base:#228404;--kiwi-color-bg-positive-muted:#114302;--kiwi-color-bg-positive-faded:#68ab53;--kiwi-color-bg-attention-base:#9a6804;--kiwi-color-bg-attention-muted:#4e3402;--kiwi-color-bg-attention-faded:#c6922c;--kiwi-color-bg-critical-base:#df1c41;--kiwi-color-bg-critical-muted:#730e22;--kiwi-color-bg-critical-faded:#ec768d;--kiwi-color-bg-surface-secondary:#212327;--kiwi-color-bg-surface-primary:#25282c;--kiwi-color-bg-surface-tertiary:#1a1c1e;--kiwi-color-bg-surface-emphasis:#090a0b;--kiwi-color-bg-surface-base:#25282c;--kiwi-color-bg-surface-quaternary:#111213;--kiwi-color-bg-neutral-base:#36393f;--kiwi-color-bg-neutral-muted:#25282c;--kiwi-color-bg-neutral-faded:#585f68;--kiwi-color-bg-neutral-inverse:#fbfcfd;--kiwi-color-bg-glow-base-hover-\%:4.0%;--kiwi-color-bg-glow-base-pressed-\%:8.0%;--kiwi-color-bg-glow-on-surface-accent-hover:#1881661f;--kiwi-color-bg-glow-on-surface-accent-pressed:#18816629;--kiwi-color-bg-glow-on-surface-critical-pressed:#df1c4129;--kiwi-color-bg-glow-on-surface-critical-hover:#df1c411f;--kiwi-color-bg-glow-on-surface-disabled:#ffffff0a;--kiwi-color-bg-glow-on-surface-overlay:#ffffff52;--kiwi-color-bg-glow-on-surface-neutral-hover-\%:4.0%;--kiwi-color-bg-glow-on-surface-neutral-pressed-\%:8.0%;--kiwi-color-bg-glow-strong-pressed-\%:16.0%;--kiwi-color-bg-glow-strong-hover-\%:8.0%;--kiwi-color-icon-neutral-hover:#fbfcfd;--kiwi-color-icon-neutral-base:#acb1b7;--kiwi-color-icon-neutral-secondary:#808791;--kiwi-color-icon-neutral-tertiary:#6b737d;--kiwi-color-icon-neutral-disabled:#585f68;--kiwi-color-icon-neutral-emphasis:#fff;--kiwi-color-icon-neutral-muted:#585f68;--kiwi-color-icon-accent-base:#61a896;--kiwi-color-icon-accent-strong:#06fac2;--kiwi-color-icon-accent-faded:#84bcad;--kiwi-color-icon-info-base:#589fe9;--kiwi-color-icon-info-faded:#7eb5ee;--kiwi-color-icon-positive-base:#68ab53;--kiwi-color-icon-positive-faded:#8abe7a;--kiwi-color-icon-attention-base:#c6922c;--kiwi-color-icon-attention-faded:#d3ab5b;--kiwi-color-icon-critical-base:#ec768d;--kiwi-color-icon-critical-faded:#f097a9;--kiwi-color-icon-mono-base:#969ca4;--kiwi-color-icon-mono-faded:#acb1b7;--kiwi-color-icon-glow-base-hover-\%:8.0%;--kiwi-color-icon-glow-base-pressed-\%:12.0%;--kiwi-color-icon-glow-strong-hover-\%:16.0%;--kiwi-color-icon-glow-strong-pressed-\%:24.0%;--kiwi-color-border-mono-base:#808791;--kiwi-color-border-mono-faded:#b8bdc1;--kiwi-color-border-mono-muted:#474c53;--kiwi-color-border-accent-base:#3d957e;--kiwi-color-border-accent-faded:#a7cfc4;--kiwi-color-border-accent-muted:#125544;--kiwi-color-border-accent-strong:#06fac2;--kiwi-color-border-info-base:#3088e4;--kiwi-color-border-info-faded:#a3caf3;--kiwi-color-border-info-muted:#024a93;--kiwi-color-border-positive-base:#46982c;--kiwi-color-border-positive-muted:#175801;--kiwi-color-border-positive-faded:#acd1a0;--kiwi-color-border-attention-base:#b67a02;--kiwi-color-border-attention-muted:#664502;--kiwi-color-border-attention-faded:#dfc38a;--kiwi-color-border-critical-base:#e7516e;--kiwi-color-border-critical-muted:#96122c;--kiwi-color-border-critical-faded:#f5b6c2;--kiwi-color-border-glow-base-hover-\%:8.0%;--kiwi-color-border-glow-base-pressed-\%:12.0%;--kiwi-color-border-glow-on-surface-faded:#ffffff0a;--kiwi-color-border-glow-on-surface-disabled:#ffffff14;--kiwi-color-border-glow-strong-hover-\%:16.0%;--kiwi-color-border-glow-strong-pressed-\%:24.0%;--kiwi-color-border-neutral-base:#474c53;--kiwi-color-border-neutral-muted:#36393f;--kiwi-color-border-neutral-faded:#808791;--kiwi-color-border-neutral-inverse:#fbfcfd;--kiwi-color-border-neutral-disabled:#585f68;--kiwi-color-border-surface-primary:#000000a3;--kiwi-color-text-mono-base:#969ca4;--kiwi-color-text-mono-faded:#acb1b7;--kiwi-color-text-accent-base:#61a896;--kiwi-color-text-accent-faded:#84bcad;--kiwi-color-text-accent-strong:#06fac2;--kiwi-color-text-info-base:#589fe9;--kiwi-color-text-info-faded:#7eb5ee;--kiwi-color-text-positive-base:#68ab53;--kiwi-color-text-positive-faded:#8abe7a;--kiwi-color-text-attention-base:#c6922c;--kiwi-color-text-attention-faded:#d3ab5b;--kiwi-color-text-critical-base:#ec768d;--kiwi-color-text-critical-faded:#f097a9;--kiwi-color-text-neutral-emphasis:#fff;--kiwi-color-text-neutral-primary:#fbfcfd;--kiwi-color-text-neutral-secondary:#b8bdc1;--kiwi-color-text-neutral-tertiary:#969ca4;--kiwi-color-text-neutral-disabled:#585f68;--kiwi-color-text-glow-base-hover-\%:8.0%;--kiwi-color-text-glow-base-pressed-\%:12.0%;--kiwi-color-text-glow-strong-hover-\%:16.0%;--kiwi-color-text-glow-strong-pressed-\%:24.0%;--kiwi-color-static-black:#000;--kiwi-color-static-white:#fff;--kiwi-color-static-accent:#188166;--kiwi-color-glow-hue:#fff;--kiwi-shadow-surface-xs:0px 1px 0px 0px #00000014,0px 0px 0px 1px #00000029,inset 0px 0px 0px 1px #ffffff14,0px 1px 1px -.5px #00000029;--kiwi-shadow-surface-sm:0px 1px 0px 0px #00000014,0px 0px 0px 1px #00000029,inset 0px 0px 0px 1px #ffffff14,0px 1px 1px -.5px #00000029,0px 3px 3px -1.5px #00000029;--kiwi-shadow-surface-md:0px 1px 0px 0px #00000014,0px 0px 0px 1px #00000029,0px 1px 1px -.5px #00000029,inset 0px 0px 0px 1px #ffffff14,0px 3px 3px -1.5px #00000029,0px 6px 6px -3px #00000029;--kiwi-shadow-surface-lg:0px 1px 0px 0px #00000014,0px 0px 0px 1px #00000029,inset 0px 0px 0px 1px #ffffff14,0px 1px 1px -.5px #00000029,0px 3px 3px -1.5px #00000029,0px 6px 6px -3px #00000029,0px 12px 12px -6px #00000029;--kiwi-shadow-surface-xl:0px 1px 0px 0px #00000014,0px 0px 0px 1px #00000029,inset 0px 0px 0px 1px #ffffff14,0px 1px 1px -.5px #00000029,0px 3px 3px -1.5px #00000029,0px 6px 6px -3px #00000029,0px 12px 12px -6px #00000029,0px 24px 24px -12px #00000029;--kiwi-shadow-button-base-drop:0px 1px 1px -.5px #00000029,0px 3px 3px -1.5px #00000029;--kiwi-shadow-button-base-inset:inset 0px -1px 0px 0px #00000014;--kiwi-shadow-input-base:inset 0px 1px 2px 0px #00000029,inset 0px 2px 4px 0px #00000029;--kiwi-shadow-tooltip-base:0px 1px 1px -.5px #00000029,0px 3px 3px -1.5px #00000029,0px 6px 6px -3px #00000029,0px 12px 12px -6px #00000029;--kiwi-shadow-toolbar-base:0px 1px 0px 0px #00000014,0px 0px 0px 1px #000c,inset 0px 0px 0px 1px #ffffff14,0px 1px 1px -.5px #00000029,0px 3px 3px -1.5px #00000029,0px 6px 6px -3px #00000029,0px 12px 12px -6px #00000029,0px 24px 24px -12px #00000029}@supports (color:lab(0% 0 0)){:is(html:where([data-color-scheme=dark]),:host([data-color-scheme=dark]),.🥝-root:where([data-kiwi-theme=dark])){--kiwi-color-bg-mono-base:lab(48.0166% -1.43915 -6.5074);--kiwi-color-bg-mono-muted:lab(23.8534% -.214189 -4.11189);--kiwi-color-bg-mono-faded:lab(64.054% -1.04737 -5.12308);--kiwi-color-bg-accent-base:lab(47.9563% -34.9245 6.19844);--kiwi-color-bg-accent-muted:lab(23.9375% -20.5725 3.46543);--kiwi-color-bg-accent-faded:lab(63.8151% -26.6434 1.96097);--kiwi-color-bg-info-base:lab(47.0129% 6.89358 -64.3085);--kiwi-color-bg-info-muted:lab(23.4622% 1.99829 -36.9401);--kiwi-color-bg-info-faded:lab(63.3151% -5.85896 -44.7124);--kiwi-color-bg-positive-base:lab(48.1335% -44.6409 49.5307);--kiwi-color-bg-positive-muted:lab(24.1751% -26.9395 30.542);--kiwi-color-bg-positive-faded:lab(63.9985% -35.01 38.0049);--kiwi-color-bg-attention-base:lab(48.4136% 15.4963 54.4339);--kiwi-color-bg-attention-muted:lab(24.1971% 8.78102 32.5961);--kiwi-color-bg-attention-faded:lab(64.4222% 13.6025 58.3401);--kiwi-color-bg-critical-base:lab(48.9224% 71.0533 33.7629);--kiwi-color-bg-critical-muted:lab(24.3988% 42.8858 18.0549);--kiwi-color-bg-critical-faded:lab(64.3708% 48.1797 9.98121);--kiwi-color-bg-surface-secondary:lab(13.6245% -.157475 -2.99128);--kiwi-color-bg-surface-primary:lab(15.9236% -.636965 -3.2773);--kiwi-color-bg-surface-tertiary:lab(10.1205% -.583336 -1.75366);--kiwi-color-bg-surface-emphasis:lab(2.6968% -.176921 -.525138);--kiwi-color-bg-surface-base:lab(15.9236% -.636965 -3.2773);--kiwi-color-bg-surface-quaternary:lab(5.39981% -.273019 -.834915);--kiwi-color-bg-neutral-base:lab(23.8534% -.214189 -4.11189);--kiwi-color-bg-neutral-muted:lab(15.9236% -.636965 -3.2773);--kiwi-color-bg-neutral-faded:lab(39.9415% -1.2762 -6.16004);--kiwi-color-bg-neutral-inverse:lab(98.9092% -.247031 -.706732);--kiwi-color-bg-glow-on-surface-accent-hover:lab(47.9563% -34.9245 6.19844/.12);--kiwi-color-bg-glow-on-surface-accent-pressed:lab(47.9563% -34.9245 6.19844/.16);--kiwi-color-bg-glow-on-surface-critical-pressed:lab(48.9224% 71.0533 33.7629/.16);--kiwi-color-bg-glow-on-surface-critical-hover:lab(48.9224% 71.0533 33.7629/.12);--kiwi-color-bg-glow-on-surface-disabled:lab(100% 0 0/.04);--kiwi-color-bg-glow-on-surface-overlay:lab(100% 0 0/.32);--kiwi-color-icon-neutral-hover:lab(98.9092% -.247031 -.706732);--kiwi-color-icon-neutral-base:lab(71.9356% -.923872 -3.62363);--kiwi-color-icon-neutral-secondary:lab(55.9762% -1.06928 -6.24512);--kiwi-color-icon-neutral-tertiary:lab(48.0166% -1.43915 -6.5074);--kiwi-color-icon-neutral-disabled:lab(39.9415% -1.2762 -6.16004);--kiwi-color-icon-neutral-emphasis:lab(100% 0 0);--kiwi-color-icon-neutral-muted:lab(39.9415% -1.2762 -6.16004);--kiwi-color-icon-accent-base:lab(63.8151% -26.6434 1.96097);--kiwi-color-icon-accent-strong:lab(87.9135% -61.1161 12.4515);--kiwi-color-icon-accent-faded:lab(72.0306% -21.3089 1.44627);--kiwi-color-icon-info-base:lab(63.3151% -5.85896 -44.7124);--kiwi-color-icon-info-faded:lab(71.5249% -7.08985 -34.6622);--kiwi-color-icon-positive-base:lab(63.9985% -35.01 38.0049);--kiwi-color-icon-positive-faded:lab(72.0603% -27.3667 28.6884);--kiwi-color-icon-attention-base:lab(64.4222% 13.6025 58.3401);--kiwi-color-icon-attention-faded:lab(72.4404% 8.26526 46.2542);--kiwi-color-icon-critical-base:lab(64.3708% 48.1797 9.98121);--kiwi-color-icon-critical-faded:lab(72.2102% 36.0258 5.42828);--kiwi-color-icon-mono-base:lab(64.054% -1.04737 -5.12308);--kiwi-color-icon-mono-faded:lab(71.9356% -.923872 -3.62363);--kiwi-color-border-mono-base:lab(55.9762% -1.06928 -6.24512);--kiwi-color-border-mono-faded:lab(76.2989% -1.2362 -2.68073);--kiwi-color-border-mono-muted:lab(32.0457% -.837266 -4.75932);--kiwi-color-border-accent-base:lab(55.9371% -32.0364 3.90248);--kiwi-color-border-accent-faded:lab(79.9997% -15.3805 .888169);--kiwi-color-border-accent-muted:lab(31.7715% -24.8213 3.70236);--kiwi-color-border-accent-strong:lab(87.9135% -61.1161 12.4515);--kiwi-color-border-info-base:lab(55.0934% -1.51214 -54.9444);--kiwi-color-border-info-faded:lab(79.5683% -6.13773 -24.6515);--kiwi-color-border-info-muted:lab(31.1021% 4.10384 -46.6708);--kiwi-color-border-positive-base:lab(56.1124% -41.2107 46.1777);--kiwi-color-border-positive-muted:lab(32.2353% -32.9313 37.368);--kiwi-color-border-positive-faded:lab(80.1967% -19.5707 20.2529);--kiwi-color-border-attention-base:lab(56.4461% 18.5372 61.9135);--kiwi-color-border-attention-muted:lab(32.3185% 10.6467 40.4656);--kiwi-color-border-attention-faded:lab(80.2272% 4.41358 32.3333);--kiwi-color-border-critical-base:lab(56.7098% 60.1448 17.1741);--kiwi-color-border-critical-muted:lab(32.6435% 52.4911 23.3912);--kiwi-color-border-critical-faded:lab(80.2428% 24.9421 3.36735);--kiwi-color-border-glow-on-surface-faded:lab(100% 0 0/.04);--kiwi-color-border-glow-on-surface-disabled:lab(100% 0 0/.08);--kiwi-color-border-neutral-base:lab(32.0457% -.837266 -4.75932);--kiwi-color-border-neutral-muted:lab(23.8534% -.214189 -4.11189);--kiwi-color-border-neutral-faded:lab(55.9762% -1.06928 -6.24512);--kiwi-color-border-neutral-inverse:lab(98.9092% -.247031 -.706732);--kiwi-color-border-neutral-disabled:lab(39.9415% -1.2762 -6.16004);--kiwi-color-border-surface-primary:lab(0% 0 0/.64);--kiwi-color-text-mono-base:lab(64.054% -1.04737 -5.12308);--kiwi-color-text-mono-faded:lab(71.9356% -.923872 -3.62363);--kiwi-color-text-accent-base:lab(63.8151% -26.6434 1.96097);--kiwi-color-text-accent-faded:lab(72.0306% -21.3089 1.44627);--kiwi-color-text-accent-strong:lab(87.9135% -61.1161 12.4515);--kiwi-color-text-info-base:lab(63.3151% -5.85896 -44.7124);--kiwi-color-text-info-faded:lab(71.5249% -7.08985 -34.6622);--kiwi-color-text-positive-base:lab(63.9985% -35.01 38.0049);--kiwi-color-text-positive-faded:lab(72.0603% -27.3667 28.6884);--kiwi-color-text-attention-base:lab(64.4222% 13.6025 58.3401);--kiwi-color-text-attention-faded:lab(72.4404% 8.26526 46.2542);--kiwi-color-text-critical-base:lab(64.3708% 48.1797 9.98121);--kiwi-color-text-critical-faded:lab(72.2102% 36.0258 5.42828);--kiwi-color-text-neutral-emphasis:lab(100% 0 0);--kiwi-color-text-neutral-primary:lab(98.9092% -.247031 -.706732);--kiwi-color-text-neutral-secondary:lab(76.2989% -1.2362 -2.68073);--kiwi-color-text-neutral-tertiary:lab(64.054% -1.04737 -5.12308);--kiwi-color-text-neutral-disabled:lab(39.9415% -1.2762 -6.16004);--kiwi-color-static-black:lab(0% 0 0);--kiwi-color-static-white:lab(100% 0 0);--kiwi-color-static-accent:lab(47.9563% -34.9245 6.19844);--kiwi-color-glow-hue:lab(100% 0 0);--kiwi-shadow-surface-xs:0px 1px 0px 0px lab(0% 0 0/.08),0px 0px 0px 1px lab(0% 0 0/.16),inset 0px 0px 0px 1px lab(100% 0 0/.08),0px 1px 1px -.5px lab(0% 0 0/.16);--kiwi-shadow-surface-sm:0px 1px 0px 0px lab(0% 0 0/.08),0px 0px 0px 1px lab(0% 0 0/.16),inset 0px 0px 0px 1px lab(100% 0 0/.08),0px 1px 1px -.5px lab(0% 0 0/.16),0px 3px 3px -1.5px lab(0% 0 0/.16);--kiwi-shadow-surface-md:0px 1px 0px 0px lab(0% 0 0/.08),0px 0px 0px 1px lab(0% 0 0/.16),0px 1px 1px -.5px lab(0% 0 0/.16),inset 0px 0px 0px 1px lab(100% 0 0/.08),0px 3px 3px -1.5px lab(0% 0 0/.16),0px 6px 6px -3px lab(0% 0 0/.16);--kiwi-shadow-surface-lg:0px 1px 0px 0px lab(0% 0 0/.08),0px 0px 0px 1px lab(0% 0 0/.16),inset 0px 0px 0px 1px lab(100% 0 0/.08),0px 1px 1px -.5px lab(0% 0 0/.16),0px 3px 3px -1.5px lab(0% 0 0/.16),0px 6px 6px -3px lab(0% 0 0/.16),0px 12px 12px -6px lab(0% 0 0/.16);--kiwi-shadow-surface-xl:0px 1px 0px 0px lab(0% 0 0/.08),0px 0px 0px 1px lab(0% 0 0/.16),inset 0px 0px 0px 1px lab(100% 0 0/.08),0px 1px 1px -.5px lab(0% 0 0/.16),0px 3px 3px -1.5px lab(0% 0 0/.16),0px 6px 6px -3px lab(0% 0 0/.16),0px 12px 12px -6px lab(0% 0 0/.16),0px 24px 24px -12px lab(0% 0 0/.16);--kiwi-shadow-button-base-drop:0px 1px 1px -.5px lab(0% 0 0/.16),0px 3px 3px -1.5px lab(0% 0 0/.16);--kiwi-shadow-button-base-inset:inset 0px -1px 0px 0px lab(0% 0 0/.08);--kiwi-shadow-input-base:inset 0px 1px 2px 0px lab(0% 0 0/.16),inset 0px 2px 4px 0px lab(0% 0 0/.16);--kiwi-shadow-tooltip-base:0px 1px 1px -.5px lab(0% 0 0/.16),0px 3px 3px -1.5px lab(0% 0 0/.16),0px 6px 6px -3px lab(0% 0 0/.16),0px 12px 12px -6px lab(0% 0 0/.16);--kiwi-shadow-toolbar-base:0px 1px 0px 0px lab(0% 0 0/.08),0px 0px 0px 1px lab(0% 0 0/.8),inset 0px 0px 0px 1px lab(100% 0 0/.08),0px 1px 1px -.5px lab(0% 0 0/.16),0px 3px 3px -1.5px lab(0% 0 0/.16),0px 6px 6px -3px lab(0% 0 0/.16),0px 12px 12px -6px lab(0% 0 0/.16),0px 24px 24px -12px lab(0% 0 0/.16)}}:root,:host{--kiwi-font-family-sans:"InterVariable","Noto Sans","Open Sans",sans-serif;--kiwi-font-family-mono:"Geist Mono","Noto Sans Mono",ui-monospace,"Segoe UI Mono",Consolas,monospace}:is(:root,:host){--kiwi-font-size-8:.5rem;--kiwi-font-size-10:.625rem;--kiwi-font-size-11:.6875rem;--kiwi-font-size-12:.75rem;--kiwi-font-size-14:.875rem;--kiwi-font-size-16:1rem;--kiwi-font-size-20:1.25rem;--kiwi-font-size-24:1.5rem;--kiwi-font-size-28:1.75rem;--kiwi-font-size-32:2rem;--kiwi-font-size-40:2.5rem;--kiwi-font-size-48:3rem}.🥝-root:where([data-kiwi-density=dense]){font-size:var(--kiwi-font-size-12);letter-spacing:0;line-height:1.3333}html{background-color:var(--kiwi-color-bg-surface-primary)}body{font-size:var(--kiwi-font-size-14);letter-spacing:0;line-height:1.4286}:is(body,.🥝-root){font-family:var(--kiwi-font-family-sans);color:var(--kiwi-color-text-neutral-primary)}:focus-visible{outline:2px solid var(--kiwi-color-border-accent-strong);outline-offset:1px}}`;
2
+ var styles_default = String.raw`@layer reset{*,:before,:after{box-sizing:border-box;margin:0;padding:0}:where([hidden]:not([hidden=until-found])){display:none!important}:where(html){-webkit-text-size-adjust:auto}:where(html:has(dialog:modal[open])){overflow:clip}:where(input,button,textarea,select){font:inherit;color:inherit}:where(img,picture,svg,video){block-size:auto;max-inline-size:100%;display:block}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(dialog,[popover]){color:inherit;inset:unset;max-width:unset;max-height:unset;overflow:unset;background:0 0;border:none}:where(dialog:not([open],[popover]),[popover]:not(:popover-open)){display:none!important}}@layer itwinui.foundations{html:where([data-color-scheme=light]),:host([data-color-scheme=light]),.🥝-root:where([data-kiwi-theme=light]){--ids-color-border-shadow-base:var(--ids-color-border-neutral-base);--ids-color-border-shadow-strong:#0000001f}@supports (color:lab(0% 0 0)){html:where([data-color-scheme=light]),:host([data-color-scheme=light]),.🥝-root:where([data-kiwi-theme=light]){--ids-color-border-shadow-strong:lab(0% 0 0/.12)}}:is(html:where([data-color-scheme=light]),:host([data-color-scheme=light]),.🥝-root:where([data-kiwi-theme=light])){--ids-color-bg-mono-base:#6b737d;--ids-color-bg-mono-muted:#d4d7da;--ids-color-bg-mono-faded:#36393f;--ids-color-bg-accent-base:#188166;--ids-color-bg-accent-muted:#cae2dc;--ids-color-bg-accent-faded:#0d4133;--ids-color-bg-info-base:#0470dd;--ids-color-bg-info-muted:#c8dff8;--ids-color-bg-info-faded:#033970;--ids-color-bg-positive-base:#228404;--ids-color-bg-positive-muted:#cde3c6;--ids-color-bg-positive-faded:#114302;--ids-color-bg-attention-base:#9a6804;--ids-color-bg-attention-muted:#ecdbb9;--ids-color-bg-attention-faded:#4e3402;--ids-color-bg-critical-base:#df1c41;--ids-color-bg-critical-muted:#f9d4db;--ids-color-bg-critical-faded:#730e22;--ids-color-bg-page-depth:#edeeef;--ids-color-bg-page-base:#fbfcfd;--ids-color-bg-page-zebra:#00000005;--ids-color-bg-elevation-base:#fff;--ids-color-bg-elevation-emphasis:#111213;--ids-color-bg-elevation-control:#fff;--ids-color-bg-elevation-level-1:#fff;--ids-color-bg-elevation-overlay:#fbfcfd;--ids-color-bg-elevation-level-2:#fff;--ids-color-bg-elevation-scrollbar-surface:#00000052;--ids-color-bg-elevation-scrollbar-canvas:#0000007a;--ids-color-bg-neutral-base:#fff;--ids-color-bg-neutral-muted:#f7f8f9;--ids-color-bg-neutral-faded:#edeeef;--ids-color-bg-neutral-inverse:#fff;--ids-color-bg-glow-base-hover-\%:4.0%;--ids-color-bg-glow-base-pressed-\%:8.0%;--ids-color-bg-glow-on-surface-accent-hover:#1881661f;--ids-color-bg-glow-on-surface-accent-pressed:#18816629;--ids-color-bg-glow-on-surface-neutral-hover:#0000000a;--ids-color-bg-glow-on-surface-neutral-pressed:#00000014;--ids-color-bg-glow-on-surface-critical-pressed:#df1c4129;--ids-color-bg-glow-on-surface-critical-hover:#df1c411f;--ids-color-bg-glow-on-surface-disabled:#0000000a;--ids-color-bg-glow-strong-pressed-\%:16.0%;--ids-color-bg-glow-strong-hover-\%:8.0%;--ids-color-icon-neutral-hover:#24262a;--ids-color-icon-neutral-base:#6b737d;--ids-color-icon-neutral-secondary:#969ca4;--ids-color-icon-neutral-tertiary:#acb1b7;--ids-color-icon-neutral-disabled:#acb1b7;--ids-color-icon-neutral-emphasis:#fff;--ids-color-icon-neutral-muted:#b8bdc1;--ids-color-icon-accent-base:#188166;--ids-color-icon-accent-strong:#188166;--ids-color-icon-accent-faded:#146b54;--ids-color-icon-info-base:#0470dd;--ids-color-icon-info-faded:#035db8;--ids-color-icon-positive-base:#228404;--ids-color-icon-positive-faded:#1c6d01;--ids-color-icon-attention-base:#9a6804;--ids-color-icon-attention-faded:#805604;--ids-color-icon-critical-base:#df1c41;--ids-color-icon-critical-faded:#ba1536;--ids-color-icon-mono-base:#6b737d;--ids-color-icon-mono-faded:#585f68;--ids-color-icon-glow-base-hover-\%:8.0%;--ids-color-icon-glow-base-pressed-\%:12.0%;--ids-color-icon-glow-strong-hover-\%:8.0%;--ids-color-icon-glow-strong-pressed-\%:16.0%;--ids-color-border-mono-base:#6b737d;--ids-color-border-mono-faded:#474c53;--ids-color-border-mono-muted:#808791;--ids-color-border-accent-base:#188166;--ids-color-border-accent-faded:#125544;--ids-color-border-accent-muted:#a7cfc4;--ids-color-border-accent-strong:#188166;--ids-color-border-info-base:#0470dd;--ids-color-border-info-faded:#024a93;--ids-color-border-info-muted:#a3caf3;--ids-color-border-positive-base:#228404;--ids-color-border-positive-muted:#acd1a0;--ids-color-border-positive-faded:#175801;--ids-color-border-attention-base:#9a6804;--ids-color-border-attention-muted:#dfc38a;--ids-color-border-attention-faded:#664502;--ids-color-border-critical-base:#df1c41;--ids-color-border-critical-muted:#f5b6c2;--ids-color-border-critical-faded:#96122c;--ids-color-border-glow-base-hover-\%:8.0%;--ids-color-border-glow-base-pressed-\%:12.0%;--ids-color-border-glow-base-default:#00000014;--ids-color-border-glow-on-surface-faded:#0000000a;--ids-color-border-glow-on-surface-disabled:#00000014;--ids-color-border-glow-strong-hover-\%:8.0%;--ids-color-border-glow-strong-pressed-\%:16.0%;--ids-color-border-glow-strong-default:#0000001f;--ids-color-border-neutral-base:#d4d7da;--ids-color-border-neutral-muted:#e1e3e6;--ids-color-border-neutral-faded:#c3c7cb;--ids-color-border-neutral-inverse:#090a0b;--ids-color-border-neutral-disabled:#acb1b7;--ids-color-border-elevation-base:#000000a3;--ids-color-border-elevation-scrollbar-canvas:#ffffff3d;--ids-color-border-page-base:#00000014;--ids-color-border-page-depth:#00000014;--ids-color-text-mono-base:#6b737d;--ids-color-text-mono-faded:#585f68;--ids-color-text-accent-base:#188166;--ids-color-text-accent-faded:#146b54;--ids-color-text-accent-strong:#188166;--ids-color-text-info-base:#0470dd;--ids-color-text-info-faded:#035db8;--ids-color-text-positive-base:#228404;--ids-color-text-positive-faded:#1c6d01;--ids-color-text-attention-base:#9a6804;--ids-color-text-attention-faded:#805604;--ids-color-text-critical-base:#df1c41;--ids-color-text-critical-faded:#ba1536;--ids-color-text-neutral-emphasis:#fff;--ids-color-text-neutral-primary:#1f2023;--ids-color-text-neutral-secondary:#474c53;--ids-color-text-neutral-tertiary:#585f68;--ids-color-text-neutral-disabled:#acb1b7;--ids-color-text-glow-base-hover-\%:8.0%;--ids-color-text-glow-base-pressed-\%:12.0%;--ids-color-text-glow-strong-hover-\%:8.0%;--ids-color-text-glow-strong-pressed-\%:16.0%;--ids-color-static-black:#000;--ids-color-static-white:#fff;--ids-color-static-accent:#188166;--ids-color-glow-hue:#000;--ids-shadow-surface-xs:0px 1px 0px 0px #0000000a,0px 0px 0px 1px #00000014,inset 0px 0px 0px 1px #ffffff0a,0px 1px 1px -.5px #0000000a;--ids-shadow-surface-sm:0px 1px 0px 0px #0000000a,0px 0px 0px 1px #00000014,inset 0px 0px 0px 1px #ffffff0a,0px 1px 1px -.5px #0000000a,0px 3px 3px -1.5px #0000000a;--ids-shadow-surface-md:0px 1px 0px 0px #0000000a,0px 0px 0px 1px #00000014,0px 1px 1px -.5px #0000000a,inset 0px 0px 0px 1px #ffffff0a,0px 3px 3px -1.5px #0000000a,0px 6px 6px -3px #0000000a;--ids-shadow-surface-lg:0px 1px 0px 0px #0000000a,0px 0px 0px 1px #00000014,inset 0px 0px 0px 1px #ffffff0a,0px 1px 1px -.5px #0000000a,0px 3px 3px -1.5px #0000000a,0px 6px 6px -3px #0000000a,0px 12px 12px -6px #0000000a;--ids-shadow-surface-xl:0px 1px 0px 0px #0000000a,0px 0px 0px 1px #00000014,inset 0px 0px 0px 1px #ffffff0a,0px 1px 1px -.5px #0000000a,0px 3px 3px -1.5px #0000000a,0px 6px 6px -3px #0000000a,0px 12px 12px -6px #0000000a,0px 24px 24px -12px #0000000a;--ids-shadow-button-base-drop:0px 1px 1px -.5px #0000000a,0px 3px 3px -1.5px #0000000a;--ids-shadow-button-base-inset:inset 0px -1px 0px 0px #00000014;--ids-shadow-input-base:inset 0px 1px 1px 0px #0000000a,inset 0px 2px 4px 0px #0000000a;--ids-shadow-tooltip-base:0px 1px 1px -.5px #0000000a,0px 3px 3px -1.5px #0000000a,0px 6px 6px -3px #0000000a,0px 12px 12px -6px #0000000a;--ids-shadow-toolbar-base:0px 1px 0px 0px #0000000a,0px 0px 0px 1px #000c,inset 0px 0px 0px 1px #ffffff14,0px 1px 1px -.5px #0000000a,0px 3px 3px -1.5px #0000000a,0px 6px 6px -3px #0000000a,0px 12px 12px -6px #0000000a,0px 24px 24px -12px #0000000a}@supports (color:lab(0% 0 0)){:is(html:where([data-color-scheme=light]),:host([data-color-scheme=light]),.🥝-root:where([data-kiwi-theme=light])){--ids-color-bg-mono-base:lab(48.0166% -1.43915 -6.5074);--ids-color-bg-mono-muted:lab(85.8119% -.611454 -1.76426);--ids-color-bg-mono-faded:lab(23.8534% -.214189 -4.11189);--ids-color-bg-accent-base:lab(47.9563% -34.9245 6.19844);--ids-color-bg-accent-muted:lab(87.9759% -9.19014 .0959873);--ids-color-bg-accent-faded:lab(23.9375% -20.5725 3.46543);--ids-color-bg-info-base:lab(47.0129% 6.89358 -64.3085);--ids-color-bg-info-muted:lab(87.698% -4.01369 -14.8192);--ids-color-bg-info-faded:lab(23.4622% 1.99829 -36.9401);--ids-color-bg-positive-base:lab(48.1335% -44.6409 49.5307);--ids-color-bg-positive-muted:lab(88.0118% -11.6213 11.7514);--ids-color-bg-positive-faded:lab(24.1751% -26.9395 30.542);--ids-color-bg-attention-base:lab(48.4136% 15.4963 54.4339);--ids-color-bg-attention-muted:lab(88.1498% 2.15477 19.165);--ids-color-bg-attention-faded:lab(24.1971% 8.78102 32.5961);--ids-color-bg-critical-base:lab(48.9224% 71.0533 33.7629);--ids-color-bg-critical-muted:lab(88.2422% 14.0584 1.58488);--ids-color-bg-critical-faded:lab(24.3988% 42.8858 18.0549);--ids-color-bg-page-depth:lab(94.0372% -.246972 -.706685);--ids-color-bg-page-base:lab(98.9092% -.247031 -.706732);--ids-color-bg-page-zebra:lab(0% 0 0/.02);--ids-color-bg-elevation-base:lab(100% 0 0);--ids-color-bg-elevation-emphasis:lab(5.39981% -.273019 -.834915);--ids-color-bg-elevation-control:lab(100% 0 0);--ids-color-bg-elevation-level-1:lab(100% 0 0);--ids-color-bg-elevation-overlay:lab(98.9092% -.247031 -.706732);--ids-color-bg-elevation-level-2:lab(100% 0 0);--ids-color-bg-elevation-scrollbar-surface:lab(0% 0 0/.32);--ids-color-bg-elevation-scrollbar-canvas:lab(0% 0 0/.48);--ids-color-bg-neutral-base:lab(100% 0 0);--ids-color-bg-neutral-muted:lab(97.5288% -.247031 -.706697);--ids-color-bg-neutral-faded:lab(94.0372% -.246972 -.706685);--ids-color-bg-neutral-inverse:lab(100% 0 0);--ids-color-bg-glow-on-surface-accent-hover:lab(47.9563% -34.9245 6.19844/.12);--ids-color-bg-glow-on-surface-accent-pressed:lab(47.9563% -34.9245 6.19844/.16);--ids-color-bg-glow-on-surface-neutral-hover:lab(0% 0 0/.04);--ids-color-bg-glow-on-surface-neutral-pressed:lab(0% 0 0/.08);--ids-color-bg-glow-on-surface-critical-pressed:lab(48.9224% 71.0533 33.7629/.16);--ids-color-bg-glow-on-surface-critical-hover:lab(48.9224% 71.0533 33.7629/.12);--ids-color-bg-glow-on-surface-disabled:lab(0% 0 0/.04);--ids-color-icon-neutral-hover:lab(15.1837% .021562 -3.00464);--ids-color-icon-neutral-base:lab(48.0166% -1.43915 -6.5074);--ids-color-icon-neutral-secondary:lab(64.054% -1.04737 -5.12308);--ids-color-icon-neutral-tertiary:lab(71.9356% -.923872 -3.62363);--ids-color-icon-neutral-disabled:lab(71.9356% -.923872 -3.62363);--ids-color-icon-neutral-emphasis:lab(100% 0 0);--ids-color-icon-neutral-muted:lab(76.2989% -1.2362 -2.68073);--ids-color-icon-accent-base:lab(47.9563% -34.9245 6.19844);--ids-color-icon-accent-strong:lab(47.9563% -34.9245 6.19844);--ids-color-icon-accent-faded:lab(39.9909% -30.3487 5.56632);--ids-color-icon-info-base:lab(47.0129% 6.89358 -64.3085);--ids-color-icon-info-faded:lab(39.1976% 5.53149 -55.6635);--ids-color-icon-positive-base:lab(48.1335% -44.6409 49.5307);--ids-color-icon-positive-faded:lab(39.9631% -38.7919 43.5088);--ids-color-icon-attention-base:lab(48.4136% 15.4963 54.4339);--ids-color-icon-attention-faded:lab(40.3825% 13.3977 47.2814);--ids-color-icon-critical-base:lab(48.9224% 71.0533 33.7629);--ids-color-icon-critical-faded:lab(40.7732% 62.087 28.9054);--ids-color-icon-mono-base:lab(48.0166% -1.43915 -6.5074);--ids-color-icon-mono-faded:lab(39.9415% -1.2762 -6.16004);--ids-color-border-mono-base:lab(48.0166% -1.43915 -6.5074);--ids-color-border-mono-faded:lab(32.0457% -.837266 -4.75932);--ids-color-border-mono-muted:lab(55.9762% -1.06928 -6.24512);--ids-color-border-accent-base:lab(47.9563% -34.9245 6.19844);--ids-color-border-accent-faded:lab(31.7715% -24.8213 3.70236);--ids-color-border-accent-muted:lab(79.9997% -15.3805 .888169);--ids-color-border-accent-strong:lab(47.9563% -34.9245 6.19844);--ids-color-border-info-base:lab(47.0129% 6.89358 -64.3085);--ids-color-border-info-faded:lab(31.1021% 4.10384 -46.6708);--ids-color-border-info-muted:lab(79.5683% -6.13773 -24.6515);--ids-color-border-positive-base:lab(48.1335% -44.6409 49.5307);--ids-color-border-positive-muted:lab(80.1967% -19.5707 20.2529);--ids-color-border-positive-faded:lab(32.2353% -32.9313 37.368);--ids-color-border-attention-base:lab(48.4136% 15.4963 54.4339);--ids-color-border-attention-muted:lab(80.2272% 4.41358 32.3333);--ids-color-border-attention-faded:lab(32.3185% 10.6467 40.4656);--ids-color-border-critical-base:lab(48.9224% 71.0533 33.7629);--ids-color-border-critical-muted:lab(80.2428% 24.9421 3.36735);--ids-color-border-critical-faded:lab(32.6435% 52.4911 23.3912);--ids-color-border-glow-base-default:lab(0% 0 0/.08);--ids-color-border-glow-on-surface-faded:lab(0% 0 0/.04);--ids-color-border-glow-on-surface-disabled:lab(0% 0 0/.08);--ids-color-border-glow-strong-default:lab(0% 0 0/.12);--ids-color-border-neutral-base:lab(85.8119% -.611454 -1.76426);--ids-color-border-neutral-muted:lab(90.1495% -.315368 -1.86194);--ids-color-border-neutral-faded:lab(80.0111% -.849456 -2.46736);--ids-color-border-neutral-inverse:lab(2.6968% -.176921 -.525138);--ids-color-border-neutral-disabled:lab(71.9356% -.923872 -3.62363);--ids-color-border-elevation-base:lab(0% 0 0/.64);--ids-color-border-elevation-scrollbar-canvas:lab(100% 0 0/.24);--ids-color-border-page-base:lab(0% 0 0/.08);--ids-color-border-page-depth:lab(0% 0 0/.08);--ids-color-text-mono-base:lab(48.0166% -1.43915 -6.5074);--ids-color-text-mono-faded:lab(39.9415% -1.2762 -6.16004);--ids-color-text-accent-base:lab(47.9563% -34.9245 6.19844);--ids-color-text-accent-faded:lab(39.9909% -30.3487 5.56632);--ids-color-text-accent-strong:lab(47.9563% -34.9245 6.19844);--ids-color-text-info-base:lab(47.0129% 6.89358 -64.3085);--ids-color-text-info-faded:lab(39.1976% 5.53149 -55.6635);--ids-color-text-positive-base:lab(48.1335% -44.6409 49.5307);--ids-color-text-positive-faded:lab(39.9631% -38.7919 43.5088);--ids-color-text-attention-base:lab(48.4136% 15.4963 54.4339);--ids-color-text-attention-faded:lab(40.3825% 13.3977 47.2814);--ids-color-text-critical-base:lab(48.9224% 71.0533 33.7629);--ids-color-text-critical-faded:lab(40.7732% 62.087 28.9054);--ids-color-text-neutral-emphasis:lab(100% 0 0);--ids-color-text-neutral-primary:lab(12.2371% .0070408 -2.25816);--ids-color-text-neutral-secondary:lab(32.0457% -.837266 -4.75932);--ids-color-text-neutral-tertiary:lab(39.9415% -1.2762 -6.16004);--ids-color-text-neutral-disabled:lab(71.9356% -.923872 -3.62363);--ids-color-static-black:lab(0% 0 0);--ids-color-static-white:lab(100% 0 0);--ids-color-static-accent:lab(47.9563% -34.9245 6.19844);--ids-color-glow-hue:lab(0% 0 0);--ids-shadow-surface-xs:0px 1px 0px 0px lab(0% 0 0/.04),0px 0px 0px 1px lab(0% 0 0/.08),inset 0px 0px 0px 1px lab(100% 0 0/.04),0px 1px 1px -.5px lab(0% 0 0/.04);--ids-shadow-surface-sm:0px 1px 0px 0px lab(0% 0 0/.04),0px 0px 0px 1px lab(0% 0 0/.08),inset 0px 0px 0px 1px lab(100% 0 0/.04),0px 1px 1px -.5px lab(0% 0 0/.04),0px 3px 3px -1.5px lab(0% 0 0/.04);--ids-shadow-surface-md:0px 1px 0px 0px lab(0% 0 0/.04),0px 0px 0px 1px lab(0% 0 0/.08),0px 1px 1px -.5px lab(0% 0 0/.04),inset 0px 0px 0px 1px lab(100% 0 0/.04),0px 3px 3px -1.5px lab(0% 0 0/.04),0px 6px 6px -3px lab(0% 0 0/.04);--ids-shadow-surface-lg:0px 1px 0px 0px lab(0% 0 0/.04),0px 0px 0px 1px lab(0% 0 0/.08),inset 0px 0px 0px 1px lab(100% 0 0/.04),0px 1px 1px -.5px lab(0% 0 0/.04),0px 3px 3px -1.5px lab(0% 0 0/.04),0px 6px 6px -3px lab(0% 0 0/.04),0px 12px 12px -6px lab(0% 0 0/.04);--ids-shadow-surface-xl:0px 1px 0px 0px lab(0% 0 0/.04),0px 0px 0px 1px lab(0% 0 0/.08),inset 0px 0px 0px 1px lab(100% 0 0/.04),0px 1px 1px -.5px lab(0% 0 0/.04),0px 3px 3px -1.5px lab(0% 0 0/.04),0px 6px 6px -3px lab(0% 0 0/.04),0px 12px 12px -6px lab(0% 0 0/.04),0px 24px 24px -12px lab(0% 0 0/.04);--ids-shadow-button-base-drop:0px 1px 1px -.5px lab(0% 0 0/.04),0px 3px 3px -1.5px lab(0% 0 0/.04);--ids-shadow-button-base-inset:inset 0px -1px 0px 0px lab(0% 0 0/.08);--ids-shadow-input-base:inset 0px 1px 1px 0px lab(0% 0 0/.04),inset 0px 2px 4px 0px lab(0% 0 0/.04);--ids-shadow-tooltip-base:0px 1px 1px -.5px lab(0% 0 0/.04),0px 3px 3px -1.5px lab(0% 0 0/.04),0px 6px 6px -3px lab(0% 0 0/.04),0px 12px 12px -6px lab(0% 0 0/.04);--ids-shadow-toolbar-base:0px 1px 0px 0px lab(0% 0 0/.04),0px 0px 0px 1px lab(0% 0 0/.8),inset 0px 0px 0px 1px lab(100% 0 0/.08),0px 1px 1px -.5px lab(0% 0 0/.04),0px 3px 3px -1.5px lab(0% 0 0/.04),0px 6px 6px -3px lab(0% 0 0/.04),0px 12px 12px -6px lab(0% 0 0/.04),0px 24px 24px -12px lab(0% 0 0/.04)}}html:where([data-color-scheme=dark]),:host([data-color-scheme=dark]),.🥝-root:where([data-kiwi-theme=dark]){--ids-color-border-shadow-base:#ffffff14;--ids-color-border-shadow-strong:#ffffff29}@supports (color:lab(0% 0 0)){html:where([data-color-scheme=dark]),:host([data-color-scheme=dark]),.🥝-root:where([data-kiwi-theme=dark]){--ids-color-border-shadow-base:lab(100% 0 0/.08);--ids-color-border-shadow-strong:lab(100% 0 0/.16)}}:is(html:where([data-color-scheme=dark]),:host([data-color-scheme=dark]),.🥝-root:where([data-kiwi-theme=dark])){--ids-color-bg-mono-base:#6b737d;--ids-color-bg-mono-muted:#36393f;--ids-color-bg-mono-faded:#969ca4;--ids-color-bg-accent-base:#188166;--ids-color-bg-accent-muted:#0d4133;--ids-color-bg-accent-faded:#61a896;--ids-color-bg-info-base:#0470dd;--ids-color-bg-info-muted:#033970;--ids-color-bg-info-faded:#589fe9;--ids-color-bg-positive-base:#228404;--ids-color-bg-positive-muted:#114302;--ids-color-bg-positive-faded:#68ab53;--ids-color-bg-attention-base:#9a6804;--ids-color-bg-attention-muted:#4e3402;--ids-color-bg-attention-faded:#c6922c;--ids-color-bg-critical-base:#df1c41;--ids-color-bg-critical-muted:#730e22;--ids-color-bg-critical-faded:#ec768d;--ids-color-bg-page-depth:#1b1c1e;--ids-color-bg-page-base:#1f2023;--ids-color-bg-page-zebra:#0000000a;--ids-color-bg-elevation-base:#24262a;--ids-color-bg-elevation-emphasis:#090a0b;--ids-color-bg-elevation-control:#1f2023;--ids-color-bg-elevation-level-1:#2b2d33;--ids-color-bg-elevation-overlay:#111213;--ids-color-bg-elevation-level-2:#31343c;--ids-color-bg-elevation-scrollbar-surface:#ffffff52;--ids-color-bg-elevation-scrollbar-canvas:#0000007a;--ids-color-bg-neutral-base:#36393f;--ids-color-bg-neutral-muted:#31343c;--ids-color-bg-neutral-faded:#585f68;--ids-color-bg-neutral-inverse:#fbfcfd;--ids-color-bg-glow-base-hover-\%:4.0%;--ids-color-bg-glow-base-pressed-\%:8.0%;--ids-color-bg-glow-on-surface-accent-hover:#1881661f;--ids-color-bg-glow-on-surface-accent-pressed:#18816629;--ids-color-bg-glow-on-surface-neutral-hover:#ffffff0a;--ids-color-bg-glow-on-surface-neutral-pressed:#ffffff14;--ids-color-bg-glow-on-surface-critical-pressed:#df1c4129;--ids-color-bg-glow-on-surface-critical-hover:#df1c411f;--ids-color-bg-glow-on-surface-disabled:#ffffff0a;--ids-color-bg-glow-strong-pressed-\%:16.0%;--ids-color-bg-glow-strong-hover-\%:8.0%;--ids-color-icon-neutral-hover:#fbfcfd;--ids-color-icon-neutral-base:#acb1b7;--ids-color-icon-neutral-secondary:#808791;--ids-color-icon-neutral-tertiary:#6b737d;--ids-color-icon-neutral-disabled:#585f68;--ids-color-icon-neutral-emphasis:#fff;--ids-color-icon-neutral-muted:#585f68;--ids-color-icon-accent-base:#61a896;--ids-color-icon-accent-strong:#06fac2;--ids-color-icon-accent-faded:#84bcad;--ids-color-icon-info-base:#589fe9;--ids-color-icon-info-faded:#7eb5ee;--ids-color-icon-positive-base:#68ab53;--ids-color-icon-positive-faded:#8abe7a;--ids-color-icon-attention-base:#c6922c;--ids-color-icon-attention-faded:#d3ab5b;--ids-color-icon-critical-base:#ec768d;--ids-color-icon-critical-faded:#f097a9;--ids-color-icon-mono-base:#969ca4;--ids-color-icon-mono-faded:#acb1b7;--ids-color-icon-glow-base-hover-\%:8.0%;--ids-color-icon-glow-base-pressed-\%:12.0%;--ids-color-icon-glow-strong-hover-\%:16.0%;--ids-color-icon-glow-strong-pressed-\%:24.0%;--ids-color-border-mono-base:#808791;--ids-color-border-mono-faded:#b8bdc1;--ids-color-border-mono-muted:#474c53;--ids-color-border-accent-base:#3d957e;--ids-color-border-accent-faded:#a7cfc4;--ids-color-border-accent-muted:#125544;--ids-color-border-accent-strong:#06fac2;--ids-color-border-info-base:#3088e4;--ids-color-border-info-faded:#a3caf3;--ids-color-border-info-muted:#024a93;--ids-color-border-positive-base:#46982c;--ids-color-border-positive-muted:#175801;--ids-color-border-positive-faded:#acd1a0;--ids-color-border-attention-base:#b67a02;--ids-color-border-attention-muted:#664502;--ids-color-border-attention-faded:#dfc38a;--ids-color-border-critical-base:#e7516e;--ids-color-border-critical-muted:#96122c;--ids-color-border-critical-faded:#f5b6c2;--ids-color-border-glow-base-hover-\%:8.0%;--ids-color-border-glow-base-pressed-\%:12.0%;--ids-color-border-glow-base-default:#ffffff14;--ids-color-border-glow-on-surface-faded:#ffffff0a;--ids-color-border-glow-on-surface-disabled:#ffffff14;--ids-color-border-glow-strong-hover-\%:16.0%;--ids-color-border-glow-strong-pressed-\%:24.0%;--ids-color-border-glow-strong-default:#ffffff29;--ids-color-border-neutral-base:#474c53;--ids-color-border-neutral-muted:#31343c;--ids-color-border-neutral-faded:#808791;--ids-color-border-neutral-inverse:#fbfcfd;--ids-color-border-neutral-disabled:#585f68;--ids-color-border-elevation-base:#000000a3;--ids-color-border-elevation-scrollbar-canvas:#ffffff3d;--ids-color-border-page-base:#ffffff14;--ids-color-border-page-depth:#ffffff14;--ids-color-text-mono-base:#969ca4;--ids-color-text-mono-faded:#acb1b7;--ids-color-text-accent-base:#61a896;--ids-color-text-accent-faded:#84bcad;--ids-color-text-accent-strong:#06fac2;--ids-color-text-info-base:#589fe9;--ids-color-text-info-faded:#7eb5ee;--ids-color-text-positive-base:#68ab53;--ids-color-text-positive-faded:#8abe7a;--ids-color-text-attention-base:#c6922c;--ids-color-text-attention-faded:#d3ab5b;--ids-color-text-critical-base:#ec768d;--ids-color-text-critical-faded:#f097a9;--ids-color-text-neutral-emphasis:#fff;--ids-color-text-neutral-primary:#fbfcfd;--ids-color-text-neutral-secondary:#b8bdc1;--ids-color-text-neutral-tertiary:#969ca4;--ids-color-text-neutral-disabled:#585f68;--ids-color-text-glow-base-hover-\%:8.0%;--ids-color-text-glow-base-pressed-\%:12.0%;--ids-color-text-glow-strong-hover-\%:16.0%;--ids-color-text-glow-strong-pressed-\%:24.0%;--ids-color-static-black:#000;--ids-color-static-white:#fff;--ids-color-static-accent:#188166;--ids-color-glow-hue:#fff;--ids-shadow-surface-xs:0px 1px 0px 0px #00000014,0px 0px 0px 1px #00000029,inset 0px 0px 0px 1px #ffffff14,0px 1px 1px -.5px #00000029;--ids-shadow-surface-sm:0px 1px 0px 0px #00000014,0px 0px 0px 1px #00000029,inset 0px 0px 0px 1px #ffffff14,0px 1px 1px -.5px #00000029,0px 3px 3px -1.5px #00000029;--ids-shadow-surface-md:0px 1px 0px 0px #00000014,0px 0px 0px 1px #00000029,0px 1px 1px -.5px #00000029,inset 0px 0px 0px 1px #ffffff14,0px 3px 3px -1.5px #00000029,0px 6px 6px -3px #00000029;--ids-shadow-surface-lg:0px 1px 0px 0px #00000014,0px 0px 0px 1px #00000029,inset 0px 0px 0px 1px #ffffff14,0px 1px 1px -.5px #00000029,0px 3px 3px -1.5px #00000029,0px 6px 6px -3px #00000029,0px 12px 12px -6px #00000029;--ids-shadow-surface-xl:0px 1px 0px 0px #00000014,0px 0px 0px 1px #00000029,inset 0px 0px 0px 1px #ffffff14,0px 1px 1px -.5px #00000029,0px 3px 3px -1.5px #00000029,0px 6px 6px -3px #00000029,0px 12px 12px -6px #00000029,0px 24px 24px -12px #00000029;--ids-shadow-button-base-drop:0px 1px 1px -.5px #00000029,0px 3px 3px -1.5px #00000029;--ids-shadow-button-base-inset:inset 0px -1px 0px 0px #00000014;--ids-shadow-input-base:inset 0px 1px 2px 0px #00000029,inset 0px 2px 4px 0px #00000029;--ids-shadow-tooltip-base:0px 1px 1px -.5px #00000029,0px 3px 3px -1.5px #00000029,0px 6px 6px -3px #00000029,0px 12px 12px -6px #00000029;--ids-shadow-toolbar-base:0px 1px 0px 0px #00000014,0px 0px 0px 1px #000c,inset 0px 0px 0px 1px #ffffff14,0px 1px 1px -.5px #00000029,0px 3px 3px -1.5px #00000029,0px 6px 6px -3px #00000029,0px 12px 12px -6px #00000029,0px 24px 24px -12px #00000029}@supports (color:lab(0% 0 0)){:is(html:where([data-color-scheme=dark]),:host([data-color-scheme=dark]),.🥝-root:where([data-kiwi-theme=dark])){--ids-color-bg-mono-base:lab(48.0166% -1.43915 -6.5074);--ids-color-bg-mono-muted:lab(23.8534% -.214189 -4.11189);--ids-color-bg-mono-faded:lab(64.054% -1.04737 -5.12308);--ids-color-bg-accent-base:lab(47.9563% -34.9245 6.19844);--ids-color-bg-accent-muted:lab(23.9375% -20.5725 3.46543);--ids-color-bg-accent-faded:lab(63.8151% -26.6434 1.96097);--ids-color-bg-info-base:lab(47.0129% 6.89358 -64.3085);--ids-color-bg-info-muted:lab(23.4622% 1.99829 -36.9401);--ids-color-bg-info-faded:lab(63.3151% -5.85896 -44.7124);--ids-color-bg-positive-base:lab(48.1335% -44.6409 49.5307);--ids-color-bg-positive-muted:lab(24.1751% -26.9395 30.542);--ids-color-bg-positive-faded:lab(63.9985% -35.01 38.0049);--ids-color-bg-attention-base:lab(48.4136% 15.4963 54.4339);--ids-color-bg-attention-muted:lab(24.1971% 8.78102 32.5961);--ids-color-bg-attention-faded:lab(64.4222% 13.6025 58.3401);--ids-color-bg-critical-base:lab(48.9224% 71.0533 33.7629);--ids-color-bg-critical-muted:lab(24.3988% 42.8858 18.0549);--ids-color-bg-critical-faded:lab(64.3708% 48.1797 9.98121);--ids-color-bg-page-depth:lab(10.0967% .00226498 -1.88369);--ids-color-bg-page-base:lab(12.2371% .0070408 -2.25816);--ids-color-bg-page-zebra:lab(0% 0 0/.04);--ids-color-bg-elevation-base:lab(15.1837% .021562 -3.00464);--ids-color-bg-elevation-emphasis:lab(2.6968% -.176921 -.525138);--ids-color-bg-elevation-control:lab(12.2371% .0070408 -2.25816);--ids-color-bg-elevation-level-1:lab(18.4603% .0535101 -4.11964);--ids-color-bg-elevation-overlay:lab(5.39981% -.273019 -.834915);--ids-color-bg-elevation-level-2:lab(21.7713% .0931919 -5.2314);--ids-color-bg-elevation-scrollbar-surface:lab(100% 0 0/.32);--ids-color-bg-elevation-scrollbar-canvas:lab(0% 0 0/.48);--ids-color-bg-neutral-base:lab(23.8534% -.214189 -4.11189);--ids-color-bg-neutral-muted:lab(21.7713% .0931919 -5.2314);--ids-color-bg-neutral-faded:lab(39.9415% -1.2762 -6.16004);--ids-color-bg-neutral-inverse:lab(98.9092% -.247031 -.706732);--ids-color-bg-glow-on-surface-accent-hover:lab(47.9563% -34.9245 6.19844/.12);--ids-color-bg-glow-on-surface-accent-pressed:lab(47.9563% -34.9245 6.19844/.16);--ids-color-bg-glow-on-surface-neutral-hover:lab(100% 0 0/.04);--ids-color-bg-glow-on-surface-neutral-pressed:lab(100% 0 0/.08);--ids-color-bg-glow-on-surface-critical-pressed:lab(48.9224% 71.0533 33.7629/.16);--ids-color-bg-glow-on-surface-critical-hover:lab(48.9224% 71.0533 33.7629/.12);--ids-color-bg-glow-on-surface-disabled:lab(100% 0 0/.04);--ids-color-icon-neutral-hover:lab(98.9092% -.247031 -.706732);--ids-color-icon-neutral-base:lab(71.9356% -.923872 -3.62363);--ids-color-icon-neutral-secondary:lab(55.9762% -1.06928 -6.24512);--ids-color-icon-neutral-tertiary:lab(48.0166% -1.43915 -6.5074);--ids-color-icon-neutral-disabled:lab(39.9415% -1.2762 -6.16004);--ids-color-icon-neutral-emphasis:lab(100% 0 0);--ids-color-icon-neutral-muted:lab(39.9415% -1.2762 -6.16004);--ids-color-icon-accent-base:lab(63.8151% -26.6434 1.96097);--ids-color-icon-accent-strong:lab(87.9135% -61.1161 12.4515);--ids-color-icon-accent-faded:lab(72.0306% -21.3089 1.44627);--ids-color-icon-info-base:lab(63.3151% -5.85896 -44.7124);--ids-color-icon-info-faded:lab(71.5249% -7.08985 -34.6622);--ids-color-icon-positive-base:lab(63.9985% -35.01 38.0049);--ids-color-icon-positive-faded:lab(72.0603% -27.3667 28.6884);--ids-color-icon-attention-base:lab(64.4222% 13.6025 58.3401);--ids-color-icon-attention-faded:lab(72.4404% 8.26526 46.2542);--ids-color-icon-critical-base:lab(64.3708% 48.1797 9.98121);--ids-color-icon-critical-faded:lab(72.2102% 36.0258 5.42828);--ids-color-icon-mono-base:lab(64.054% -1.04737 -5.12308);--ids-color-icon-mono-faded:lab(71.9356% -.923872 -3.62363);--ids-color-border-mono-base:lab(55.9762% -1.06928 -6.24512);--ids-color-border-mono-faded:lab(76.2989% -1.2362 -2.68073);--ids-color-border-mono-muted:lab(32.0457% -.837266 -4.75932);--ids-color-border-accent-base:lab(55.9371% -32.0364 3.90248);--ids-color-border-accent-faded:lab(79.9997% -15.3805 .888169);--ids-color-border-accent-muted:lab(31.7715% -24.8213 3.70236);--ids-color-border-accent-strong:lab(87.9135% -61.1161 12.4515);--ids-color-border-info-base:lab(55.0934% -1.51214 -54.9444);--ids-color-border-info-faded:lab(79.5683% -6.13773 -24.6515);--ids-color-border-info-muted:lab(31.1021% 4.10384 -46.6708);--ids-color-border-positive-base:lab(56.1124% -41.2107 46.1777);--ids-color-border-positive-muted:lab(32.2353% -32.9313 37.368);--ids-color-border-positive-faded:lab(80.1967% -19.5707 20.2529);--ids-color-border-attention-base:lab(56.4461% 18.5372 61.9135);--ids-color-border-attention-muted:lab(32.3185% 10.6467 40.4656);--ids-color-border-attention-faded:lab(80.2272% 4.41358 32.3333);--ids-color-border-critical-base:lab(56.7098% 60.1448 17.1741);--ids-color-border-critical-muted:lab(32.6435% 52.4911 23.3912);--ids-color-border-critical-faded:lab(80.2428% 24.9421 3.36735);--ids-color-border-glow-base-default:lab(100% 0 0/.08);--ids-color-border-glow-on-surface-faded:lab(100% 0 0/.04);--ids-color-border-glow-on-surface-disabled:lab(100% 0 0/.08);--ids-color-border-glow-strong-default:lab(100% 0 0/.16);--ids-color-border-neutral-base:lab(32.0457% -.837266 -4.75932);--ids-color-border-neutral-muted:lab(21.7713% .0931919 -5.2314);--ids-color-border-neutral-faded:lab(55.9762% -1.06928 -6.24512);--ids-color-border-neutral-inverse:lab(98.9092% -.247031 -.706732);--ids-color-border-neutral-disabled:lab(39.9415% -1.2762 -6.16004);--ids-color-border-elevation-base:lab(0% 0 0/.64);--ids-color-border-elevation-scrollbar-canvas:lab(100% 0 0/.24);--ids-color-border-page-base:lab(100% 0 0/.08);--ids-color-border-page-depth:lab(100% 0 0/.08);--ids-color-text-mono-base:lab(64.054% -1.04737 -5.12308);--ids-color-text-mono-faded:lab(71.9356% -.923872 -3.62363);--ids-color-text-accent-base:lab(63.8151% -26.6434 1.96097);--ids-color-text-accent-faded:lab(72.0306% -21.3089 1.44627);--ids-color-text-accent-strong:lab(87.9135% -61.1161 12.4515);--ids-color-text-info-base:lab(63.3151% -5.85896 -44.7124);--ids-color-text-info-faded:lab(71.5249% -7.08985 -34.6622);--ids-color-text-positive-base:lab(63.9985% -35.01 38.0049);--ids-color-text-positive-faded:lab(72.0603% -27.3667 28.6884);--ids-color-text-attention-base:lab(64.4222% 13.6025 58.3401);--ids-color-text-attention-faded:lab(72.4404% 8.26526 46.2542);--ids-color-text-critical-base:lab(64.3708% 48.1797 9.98121);--ids-color-text-critical-faded:lab(72.2102% 36.0258 5.42828);--ids-color-text-neutral-emphasis:lab(100% 0 0);--ids-color-text-neutral-primary:lab(98.9092% -.247031 -.706732);--ids-color-text-neutral-secondary:lab(76.2989% -1.2362 -2.68073);--ids-color-text-neutral-tertiary:lab(64.054% -1.04737 -5.12308);--ids-color-text-neutral-disabled:lab(39.9415% -1.2762 -6.16004);--ids-color-static-black:lab(0% 0 0);--ids-color-static-white:lab(100% 0 0);--ids-color-static-accent:lab(47.9563% -34.9245 6.19844);--ids-color-glow-hue:lab(100% 0 0);--ids-shadow-surface-xs:0px 1px 0px 0px lab(0% 0 0/.08),0px 0px 0px 1px lab(0% 0 0/.16),inset 0px 0px 0px 1px lab(100% 0 0/.08),0px 1px 1px -.5px lab(0% 0 0/.16);--ids-shadow-surface-sm:0px 1px 0px 0px lab(0% 0 0/.08),0px 0px 0px 1px lab(0% 0 0/.16),inset 0px 0px 0px 1px lab(100% 0 0/.08),0px 1px 1px -.5px lab(0% 0 0/.16),0px 3px 3px -1.5px lab(0% 0 0/.16);--ids-shadow-surface-md:0px 1px 0px 0px lab(0% 0 0/.08),0px 0px 0px 1px lab(0% 0 0/.16),0px 1px 1px -.5px lab(0% 0 0/.16),inset 0px 0px 0px 1px lab(100% 0 0/.08),0px 3px 3px -1.5px lab(0% 0 0/.16),0px 6px 6px -3px lab(0% 0 0/.16);--ids-shadow-surface-lg:0px 1px 0px 0px lab(0% 0 0/.08),0px 0px 0px 1px lab(0% 0 0/.16),inset 0px 0px 0px 1px lab(100% 0 0/.08),0px 1px 1px -.5px lab(0% 0 0/.16),0px 3px 3px -1.5px lab(0% 0 0/.16),0px 6px 6px -3px lab(0% 0 0/.16),0px 12px 12px -6px lab(0% 0 0/.16);--ids-shadow-surface-xl:0px 1px 0px 0px lab(0% 0 0/.08),0px 0px 0px 1px lab(0% 0 0/.16),inset 0px 0px 0px 1px lab(100% 0 0/.08),0px 1px 1px -.5px lab(0% 0 0/.16),0px 3px 3px -1.5px lab(0% 0 0/.16),0px 6px 6px -3px lab(0% 0 0/.16),0px 12px 12px -6px lab(0% 0 0/.16),0px 24px 24px -12px lab(0% 0 0/.16);--ids-shadow-button-base-drop:0px 1px 1px -.5px lab(0% 0 0/.16),0px 3px 3px -1.5px lab(0% 0 0/.16);--ids-shadow-button-base-inset:inset 0px -1px 0px 0px lab(0% 0 0/.08);--ids-shadow-input-base:inset 0px 1px 2px 0px lab(0% 0 0/.16),inset 0px 2px 4px 0px lab(0% 0 0/.16);--ids-shadow-tooltip-base:0px 1px 1px -.5px lab(0% 0 0/.16),0px 3px 3px -1.5px lab(0% 0 0/.16),0px 6px 6px -3px lab(0% 0 0/.16),0px 12px 12px -6px lab(0% 0 0/.16);--ids-shadow-toolbar-base:0px 1px 0px 0px lab(0% 0 0/.08),0px 0px 0px 1px lab(0% 0 0/.8),inset 0px 0px 0px 1px lab(100% 0 0/.08),0px 1px 1px -.5px lab(0% 0 0/.16),0px 3px 3px -1.5px lab(0% 0 0/.16),0px 6px 6px -3px lab(0% 0 0/.16),0px 12px 12px -6px lab(0% 0 0/.16),0px 24px 24px -12px lab(0% 0 0/.16)}}:root,:host{--ids-font-family-sans:"InterVariable","Noto Sans","Open Sans",sans-serif;--ids-font-family-mono:"Geist Mono","Noto Sans Mono",ui-monospace,"Segoe UI Mono",Consolas,monospace}:is(:root,:host){--ids-font-size-8:.5rem;--ids-font-size-10:.625rem;--ids-font-size-11:.6875rem;--ids-font-size-12:.75rem;--ids-font-size-14:.875rem;--ids-font-size-16:1rem;--ids-font-size-20:1.25rem;--ids-font-size-24:1.5rem;--ids-font-size-28:1.75rem;--ids-font-size-32:2rem;--ids-font-size-40:2.5rem;--ids-font-size-48:3rem}.🥝-root:where([data-kiwi-density=dense]){font-size:var(--ids-font-size-12);letter-spacing:0;line-height:1.3333}html{background-color:var(--ids-color-bg-page-base)}body{font-size:var(--ids-font-size-14);letter-spacing:0;line-height:1.4286}:is(body,.🥝-root){font-family:var(--ids-font-family-sans);color:var(--ids-color-text-neutral-primary)}:focus-visible{outline:2px solid var(--ids-color-border-accent-strong);outline-offset:1px}}`;
3
3
 
4
4
  // src/foundations/styles.css.ts
5
5
  var styles_css_default = styles_default;
@@ -1,12 +1,11 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import cx from "classnames";
3
3
  import * as Ariakit from "@ariakit/react";
4
- import { FieldControl, useFieldDescribedBy } from "./Field.js";
4
+ import { FieldControl } from "./Field.js";
5
5
  import { forwardRef } from "./~utils.js";
6
6
  const Checkbox = forwardRef(
7
7
  (props, forwardedRef) => {
8
8
  const { id, ...rest } = props;
9
- const describedBy = useFieldDescribedBy(props["aria-describedby"]);
10
9
  return /* @__PURE__ */ jsx(
11
10
  FieldControl,
12
11
  {
@@ -18,7 +17,6 @@ const Checkbox = forwardRef(
18
17
  accessibleWhenDisabled: true,
19
18
  ...rest,
20
19
  className: cx("\u{1F95D}-checkbox", props.className),
21
- "aria-describedby": describedBy,
22
20
  ref: forwardedRef
23
21
  }
24
22
  )
@@ -1,4 +1,3 @@
1
- import * as React from "react";
2
1
  import { type BaseProps } from "./~utils.js";
3
2
  interface DescriptionProps extends BaseProps {
4
3
  /**
@@ -16,5 +15,5 @@ interface DescriptionProps extends BaseProps {
16
15
  * using `aria-describedby` on said control or use the `<Field>` component
17
16
  * (WIP).
18
17
  */
19
- export declare const Description: React.ForwardRefExoticComponent<DescriptionProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
18
+ export declare const Description: import("react").ForwardRefExoticComponent<DescriptionProps & import("react").RefAttributes<HTMLElement | HTMLDivElement>>;
20
19
  export {};
@@ -1,23 +1,25 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import * as React from "react";
3
2
  import { forwardRef } from "./~utils.js";
4
3
  import cx from "classnames";
5
4
  import { Text } from "./Text.js";
6
- import { useFieldRegisterDescribedBy } from "./Field.js";
5
+ import { FieldDescription } from "./Field.js";
7
6
  const Description = forwardRef(
8
7
  (props, forwardedRef) => {
9
- const generatedId = React.useId();
10
- const { id = generatedId, tone, ...rest } = props;
11
- useFieldRegisterDescribedBy(id);
8
+ const { id, tone, ...rest } = props;
12
9
  return /* @__PURE__ */ jsx(
13
- Text,
10
+ FieldDescription,
14
11
  {
15
- ...rest,
16
12
  id,
17
- variant: "caption-md",
18
- "data-kiwi-tone": tone ?? "neutral",
19
- className: cx("\u{1F95D}-description", props.className),
20
- ref: forwardedRef
13
+ render: /* @__PURE__ */ jsx(
14
+ Text,
15
+ {
16
+ ...rest,
17
+ variant: "caption-md",
18
+ "data-kiwi-tone": tone ?? "neutral",
19
+ className: cx("\u{1F95D}-description", props.className),
20
+ ref: forwardedRef
21
+ }
22
+ )
21
23
  }
22
24
  );
23
25
  }
@@ -28,14 +28,6 @@ interface FieldProps extends BaseProps {
28
28
  * - `Switch`
29
29
  */
30
30
  export declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
31
- /**
32
- * Use the description IDs for a field.
33
- */
34
- export declare function useFieldDescribedBy(ariaDescribedByProp?: string): string | undefined;
35
- /**
36
- * Registers a description for an associated control.
37
- */
38
- export declare function useFieldRegisterDescribedBy(id: string): void;
39
31
  type CollectionStoreItem = NonNullable<ReturnType<ReturnType<typeof Ariakit.useCollectionStore>["item"]>>;
40
32
  interface FieldCollectionStoreItem extends CollectionStoreItem {
41
33
  /** The type of field element being tracked */
@@ -54,4 +46,8 @@ export declare function FieldControl(props: FieldCollectionItemControlProps): im
54
46
  * An element tracked as a label in the `Field`’s collection.
55
47
  */
56
48
  export declare function FieldLabel(props: Pick<Ariakit.CollectionItemProps, "render">): import("react/jsx-runtime").JSX.Element;
49
+ /**
50
+ * An element tracked as a description in the `Field`’s collection.
51
+ */
52
+ export declare function FieldDescription(props: Pick<Ariakit.CollectionItemProps, "render" | "id">): import("react/jsx-runtime").JSX.Element;
57
53
  export {};
@@ -5,7 +5,7 @@ import cx from "classnames";
5
5
  import { forwardRef } from "./~utils.js";
6
6
  const Field = forwardRef((props, forwardedRef) => {
7
7
  const { layout, ...rest } = props;
8
- return /* @__PURE__ */ jsx(FieldDescribedByProvider, { children: /* @__PURE__ */ jsx(
8
+ return /* @__PURE__ */ jsx(
9
9
  FieldCollection,
10
10
  {
11
11
  render: /* @__PURE__ */ jsx(
@@ -18,57 +18,8 @@ const Field = forwardRef((props, forwardedRef) => {
18
18
  }
19
19
  )
20
20
  }
21
- ) });
22
- });
23
- const FieldDescribedByContext = React.createContext(void 0);
24
- function FieldDescribedByProvider(props) {
25
- const [describedBy, setDescribedBy] = React.useState(/* @__PURE__ */ new Set());
26
- const register = React.useCallback((id) => {
27
- setDescribedBy((describedBy2) => {
28
- const updated = new Set(describedBy2);
29
- updated.add(id);
30
- return updated;
31
- });
32
- }, []);
33
- const unregister = React.useCallback((id) => {
34
- setDescribedBy((describedBy2) => {
35
- const updated = new Set(describedBy2);
36
- updated.delete(id);
37
- return updated;
38
- });
39
- }, []);
40
- return /* @__PURE__ */ jsx(
41
- FieldDescribedByContext.Provider,
42
- {
43
- value: React.useMemo(
44
- () => ({
45
- describedBy,
46
- register,
47
- unregister
48
- }),
49
- [describedBy, register, unregister]
50
- ),
51
- children: props.children
52
- }
53
- );
54
- }
55
- function useFieldDescribedBy(ariaDescribedByProp) {
56
- const describedBySet = React.useContext(FieldDescribedByContext)?.describedBy;
57
- return React.useMemo(
58
- () => !describedBySet || describedBySet.size === 0 ? ariaDescribedByProp : [...describedBySet, ariaDescribedByProp].filter(Boolean).join(" "),
59
- [describedBySet, ariaDescribedByProp]
60
21
  );
61
- }
62
- function useFieldRegisterDescribedBy(id) {
63
- const context = React.useContext(FieldDescribedByContext);
64
- const register = context?.register;
65
- const unregister = context?.unregister;
66
- React.useEffect(() => {
67
- if (!register || !unregister) return;
68
- register(id);
69
- return () => unregister(id);
70
- }, [id, register, unregister]);
71
- }
22
+ });
72
23
  function FieldCollection(props) {
73
24
  const fieldElementCollection = Ariakit.useCollectionStore({
74
25
  defaultItems: []
@@ -101,8 +52,16 @@ function FieldCollection(props) {
101
52
  );
102
53
  }
103
54
  function FieldControl(props) {
55
+ const store = Ariakit.useCollectionContext();
104
56
  const generatedId = React.useId();
105
- const { id = generatedId, type, ...rest } = props;
57
+ const { id = store ? generatedId : void 0, type, ...rest } = props;
58
+ const renderedItems = Ariakit.useStoreState(store, "renderedItems");
59
+ const describedBy = React.useMemo(() => {
60
+ const idRefList = renderedItems?.filter(
61
+ (item) => item.elementType === "description"
62
+ )?.map((item) => item.id).join(" ");
63
+ return idRefList || void 0;
64
+ }, [renderedItems]);
106
65
  const getData = React.useCallback(
107
66
  (data) => ({
108
67
  ...data,
@@ -111,7 +70,14 @@ function FieldControl(props) {
111
70
  }),
112
71
  [type]
113
72
  );
114
- return /* @__PURE__ */ jsx(Ariakit.CollectionItem, { ...rest, id, getItem: getData });
73
+ return /* @__PURE__ */ jsx(
74
+ Ariakit.CollectionItem,
75
+ {
76
+ id,
77
+ getItem: getData,
78
+ render: /* @__PURE__ */ jsx(Ariakit.Role, { ...rest, "aria-describedby": describedBy })
79
+ }
80
+ );
115
81
  }
116
82
  function FieldLabel(props) {
117
83
  const store = Ariakit.useCollectionContext();
@@ -137,10 +103,21 @@ function FieldLabel(props) {
137
103
  }
138
104
  );
139
105
  }
106
+ function FieldDescription(props) {
107
+ const generatedId = React.useId();
108
+ const { id = generatedId, ...rest } = props;
109
+ const getData = React.useCallback(
110
+ (data) => ({
111
+ ...data,
112
+ elementType: "description"
113
+ }),
114
+ []
115
+ );
116
+ return /* @__PURE__ */ jsx(Ariakit.CollectionItem, { ...rest, id, getItem: getData });
117
+ }
140
118
  export {
141
119
  Field,
142
120
  FieldControl,
143
- FieldLabel,
144
- useFieldDescribedBy,
145
- useFieldRegisterDescribedBy
121
+ FieldDescription,
122
+ FieldLabel
146
123
  };
@@ -1,11 +1,10 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import cx from "classnames";
3
3
  import * as Ariakit from "@ariakit/react";
4
- import { FieldControl, useFieldDescribedBy } from "./Field.js";
4
+ import { FieldControl } from "./Field.js";
5
5
  import { forwardRef } from "./~utils.js";
6
6
  const Radio = forwardRef((props, forwardedRef) => {
7
7
  const { id, ...rest } = props;
8
- const describedBy = useFieldDescribedBy(props["aria-describedby"]);
9
8
  return /* @__PURE__ */ jsx(
10
9
  FieldControl,
11
10
  {
@@ -17,7 +16,6 @@ const Radio = forwardRef((props, forwardedRef) => {
17
16
  accessibleWhenDisabled: true,
18
17
  ...rest,
19
18
  className: cx("\u{1F95D}-checkbox", "\u{1F95D}-radio", props.className),
20
- "aria-describedby": describedBy,
21
19
  ref: forwardedRef
22
20
  }
23
21
  )
@@ -7,7 +7,7 @@ import {
7
7
  isBrowser
8
8
  } from "./~utils.js";
9
9
  import { DisclosureArrow } from "./Icon.js";
10
- import { FieldControl, useFieldDescribedBy } from "./Field.js";
10
+ import { FieldControl } from "./Field.js";
11
11
  const supportsHas = isBrowser && CSS?.supports?.("selector(:has(+ *))");
12
12
  const HtmlSelectContext = React.createContext(() => {
13
13
  });
@@ -27,7 +27,6 @@ const HtmlSelect = forwardRef(
27
27
  (props, forwardedRef) => {
28
28
  const { id, variant = "solid", ...rest } = props;
29
29
  const setIsHtmlSelect = React.useContext(HtmlSelectContext);
30
- const describedBy = useFieldDescribedBy(props["aria-describedby"]);
31
30
  React.useEffect(
32
31
  function updateContext() {
33
32
  setIsHtmlSelect(true);
@@ -45,7 +44,6 @@ const HtmlSelect = forwardRef(
45
44
  {
46
45
  ...rest,
47
46
  className: cx("\u{1F95D}-button", "\u{1F95D}-select", props.className),
48
- "aria-describedby": describedBy,
49
47
  "data-kiwi-tone": "neutral",
50
48
  "data-kiwi-variant": variant,
51
49
  ref: forwardedRef
@@ -1,12 +1,11 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import cx from "classnames";
3
3
  import * as Ariakit from "@ariakit/react";
4
- import { FieldControl, useFieldDescribedBy } from "./Field.js";
4
+ import { FieldControl } from "./Field.js";
5
5
  import { forwardRef } from "./~utils.js";
6
6
  const Switch = forwardRef(
7
7
  (props, forwardedRef) => {
8
8
  const { id, ...rest } = props;
9
- const describedBy = useFieldDescribedBy(props["aria-describedby"]);
10
9
  return /* @__PURE__ */ jsx(
11
10
  FieldControl,
12
11
  {
@@ -18,7 +17,6 @@ const Switch = forwardRef(
18
17
  accessibleWhenDisabled: true,
19
18
  ...rest,
20
19
  className: cx("\u{1F95D}-switch", props.className),
21
- "aria-describedby": describedBy,
22
20
  role: "switch",
23
21
  ref: forwardedRef
24
22
  }
@@ -0,0 +1,115 @@
1
+ import * as React from "react";
2
+ import { type BaseProps } from "./~utils.js";
3
+ interface TableProps extends BaseProps {
4
+ }
5
+ /**
6
+ * A table is a grid of rows and columns that displays data in a structured format.
7
+ *
8
+ * `Table.Root` is the root component for a table.
9
+ * `Table.Header`, `Table.Body`, and `Table.Cell` can be nested inside a `Table.Root` to create a table structure.
10
+ *
11
+ * Example:
12
+ * ```tsx
13
+ * <Table.Root>
14
+ * <Table.Caption>Table Caption</Table.Caption>
15
+ * <Table.Header>
16
+ * <Table.Row>
17
+ * <Table.Cell>Header 1</Table.Cell>
18
+ * <Table.Cell>Header 2</Table.Cell>
19
+ * </Table.Row>
20
+ * </Table.Header>
21
+ *
22
+ * <Table.Body>
23
+ * <Table.Row>
24
+ * <Table.Cell>Cell 1.1</Table.Cell>
25
+ * <Table.Cell>Cell 1.2</Table.Cell>
26
+ * </Table.Row>
27
+ * <Table.Row>
28
+ * <Table.Cell>Cell 2.1</Table.Cell>
29
+ * <Table.Cell>Cell 2.2</Table.Cell>
30
+ * </Table.Row>
31
+ * </Table.Body>
32
+ * </Table.Root>
33
+ * ```
34
+ */
35
+ declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
36
+ interface TableHeaderProps extends BaseProps {
37
+ }
38
+ /**
39
+ * `Table.Header` is a column component of cells that labels the columns of a table.
40
+ * `Table.Row` and `Table.Cell` can be nested inside a `Table.Header` to create a header row.
41
+ *
42
+ * Example:
43
+ * ```tsx
44
+ * <Table.Header>
45
+ * <Table.Row>
46
+ * <Table.Cell>Header 1</Table.Cell>
47
+ * <Table.Cell>Header 2</Table.Cell>
48
+ * </Table.Row>
49
+ * </Table.Header>
50
+ * ```
51
+ */
52
+ declare const TableHeader: React.ForwardRefExoticComponent<TableHeaderProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
53
+ interface TableBodyProps extends BaseProps {
54
+ }
55
+ /**
56
+ * `Table.Body` is a component that contains the rows of table data.
57
+ * Multiple `Table.Row`s and `Table.Cell`s can be nested inside a `Table.Body` to create a table body.
58
+ *
59
+ * This component intentionally does not set `role=rowgroup` because it is not properly supported.
60
+ *
61
+ * Example:
62
+ * ```tsx
63
+ * <Table.Body>
64
+ * <Table.Row>
65
+ * <Table.Cell>Cell 1.1</Table.Cell>
66
+ * <Table.Cell>Cell 1.2</Table.Cell>
67
+ * </Table.Row>
68
+ * <Table.Row>
69
+ * <Table.Cell>Cell 2.1</Table.Cell>
70
+ * <Table.Cell>Cell 2.2</Table.Cell>
71
+ * </Table.Row>
72
+ * </Table.Body>
73
+ * ```
74
+ */
75
+ declare const TableBody: React.ForwardRefExoticComponent<TableBodyProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
76
+ interface TableRowProps extends BaseProps {
77
+ }
78
+ /**
79
+ * `Table.Row` is a component that contains the cells of a table row.
80
+ *
81
+ * Example:
82
+ * ```tsx
83
+ * <Table.Row>
84
+ * <Table.Cell>Cell 1.1</Table.Cell>
85
+ * <Table.Cell>Cell 1.2</Table.Cell>
86
+ * </Table.Row>
87
+ * ```
88
+ */
89
+ declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
90
+ interface TableCaptionProps extends BaseProps<"caption"> {
91
+ }
92
+ /**
93
+ * `Table.Caption` is a component that contains the caption of a table.
94
+ *
95
+ * Example:
96
+ * ```tsx
97
+ * <Table.Root>
98
+ * <Table.Caption>Table Caption</Table.Caption>
99
+ * …
100
+ * </Table.Root>
101
+ * ```
102
+ */
103
+ declare const TableCaption: React.ForwardRefExoticComponent<TableCaptionProps & React.RefAttributes<HTMLElement>>;
104
+ interface TableCellProps extends BaseProps<"span"> {
105
+ }
106
+ /**
107
+ * `Table.Cell` is a component that contains the data of a table cell.
108
+ *
109
+ * Example:
110
+ * ```tsx
111
+ * <Table.Cell>Cell 1.1</Table.Cell>
112
+ * ```
113
+ */
114
+ declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLElement | HTMLSpanElement>>;
115
+ export { Table as Root, TableHeader as Header, TableBody as Body, TableRow as Row, TableCaption as Caption, TableCell as Cell, };