@itwin/itwinui-react 5.0.0-alpha.2 → 5.0.0-alpha.4

package/dist/DEV/bricks/~hooks.js

@@ -17,9 +17,9 @@ function useControlledState(initialValue, controlledState, setControlledState) {
 }
 function useLatestRef(value) {
   const valueRef = React.useRef(value);
-  React.useEffect(() => {
+  React.useInsertionEffect(() => {
     valueRef.current = value;
-  }, [value]);
+  });
   return valueRef;
 }
 function useMergedRefs(...refs) {
@@ -36,16 +36,16 @@ function useMergedRefs(...refs) {
     [...refs]
   );
 }
-function useEventHandlers(first, ...rest) {
-  const latestFirst = useLatestRef(first);
+function useEventHandlers(...handlers) {
+  const latestHandlers = useLatestRef(handlers);
   return React.useCallback(
     (event) => {
-      for (const handler of [latestFirst.current, ...rest]) {
+      for (const handler of latestHandlers.current) {
         handler?.(event);
         if (event.defaultPrevented) return;
       }
     },
-    [latestFirst, ...rest]
+    [latestHandlers]
   );
 }
 export {

package/dist/DEV/foundations/styles.css.js

@@ -1,5 +1,5 @@
 // inline-css:/home/runner/work/kiwi/kiwi/packages/kiwi-react/src/foundations/styles.css
-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-family:var(--kiwi-font-family-sans);color:var(--kiwi-color-text-neutral-primary)}body{font-size:var(--kiwi-font-size-14);letter-spacing:0;line-height:1.4286}:focus-visible{outline:2px solid var(--kiwi-color-border-accent-strong);outline-offset:1px}}`;
+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}}`;
 
 // src/foundations/styles.css.ts
 var styles_css_default = styles_default;

package/dist/bricks/Chip.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { type BaseProps } from "./~utils.js";
 interface ChipProps extends BaseProps<"div"> {
     /**
@@ -7,6 +8,10 @@ interface ChipProps extends BaseProps<"div"> {
      * @default "solid"
      */
     variant?: "solid" | "outline";
+    /**
+     * Callback invoked when the dismiss ("❌") button is clicked.
+     */
+    onDismiss?: () => void;
 }
 /**
  * Chip is a UI component used to represent an item, attribute, or action in a compact visual style.
@@ -18,5 +23,5 @@ interface ChipProps extends BaseProps<"div"> {
  * <Chip variant="outline">Outline Chip</Chip>
  * ```
  */
-export declare const Chip: import("react").ForwardRefExoticComponent<ChipProps & import("react").RefAttributes<HTMLElement | HTMLDivElement>>;
+export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
 export {};

package/dist/bricks/Chip.js

@@ -1,17 +1,38 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import cx from "classnames";
+import * as React from "react";
 import * as Ariakit from "@ariakit/react";
 import { forwardRef } from "./~utils.js";
+import { IconButton } from "./IconButton.js";
+import { Dismiss } from "./Icon.js";
 const Chip = forwardRef((props, forwardedRef) => {
-  const { variant = "solid", children, ...rest } = props;
-  return /* @__PURE__ */ jsx(
+  const { variant = "solid", onDismiss, children, ...rest } = props;
+  const baseId = React.useId();
+  const labelId = `${baseId}-label`;
+  const dismissIconId = `${baseId}-dismiss`;
+  return /* @__PURE__ */ jsxs(
     Ariakit.Role.div,
     {
       "data-kiwi-variant": variant,
       ...rest,
       className: cx("\u{1F95D}-chip", props.className),
       ref: forwardedRef,
-      children
+      children: [
+        /* @__PURE__ */ jsx("span", { id: labelId, children }),
+        onDismiss && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            id: dismissIconId,
+            className: "\u{1F95D}-chip-dismiss-button",
+            variant: "ghost",
+            "aria-labelledby": `${dismissIconId} ${labelId}`,
+            label: "Dismiss",
+            labelVariant: "visually-hidden",
+            icon: /* @__PURE__ */ jsx(Dismiss, {}),
+            onClick: onDismiss
+          }
+        )
+      ]
     }
   );
 });

package/dist/bricks/DropdownMenu.d.ts

@@ -81,4 +81,16 @@ interface DropdownMenuItemProps extends FocusableProps {
  * ```
  */
 declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
-export { DropdownMenu as Root, DropdownMenuButton as Button, DropdownMenuContent as Content, DropdownMenuItem as Item, };
+interface DropdownMenuCheckboxItemProps extends Omit<FocusableProps, "onChange">, Pick<Ariakit.MenuItemCheckboxProps, "checked" | "onChange" | "name" | "value"> {
+}
+/**
+ * A single menu item within the dropdown menu. Should be used as a child of `DropdownMenu.Content`.
+ *
+ * Example:
+ * ```tsx
+ * <DropdownMenu.CheckboxItem name="add">Add</DropdownMenu.Item>
+ * <DropdownMenu.CheckboxItem name="edit">Edit</DropdownMenu.Item>
+ * ```
+ */
+declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+export { DropdownMenu as Root, DropdownMenuButton as Button, DropdownMenuContent as Content, DropdownMenuItem as Item, DropdownMenuCheckboxItem as CheckboxItem, };

package/dist/bricks/DropdownMenu.js

@@ -5,7 +5,7 @@ import * as Ariakit from "@ariakit/react";
 import * as ListItem from "./ListItem.js";
 import { Button } from "./Button.js";
 import { Kbd } from "./Kbd.js";
-import { DisclosureArrow } from "./Icon.js";
+import { Checkmark, DisclosureArrow } from "./Icon.js";
 import { forwardRef, supportsPopover } from "./~utils.js";
 function DropdownMenu(props) {
   const {
@@ -46,6 +46,7 @@ const DropdownMenuContent = forwardRef(
         portal: !supportsPopover,
         unmountOnHide: true,
         ...props,
+        gutter: 4,
         style: { zIndex: supportsPopover ? void 0 : 9999, ...props.style },
         wrapperProps: { popover: "manual" },
         className: cx("\u{1F95D}-dropdown-menu", props.className),
@@ -85,6 +86,7 @@ const DropdownMenuItem = forwardRef(
         accessibleWhenDisabled: true,
         ...rest,
         render: /* @__PURE__ */ jsx(ListItem.Root, { render: props.render }),
+        className: cx("\u{1F95D}-dropdown-menu-item", props.className),
         ref: forwardedRef,
         children: [
           /* @__PURE__ */ jsx(ListItem.Content, { children: props.children }),
@@ -94,8 +96,26 @@ const DropdownMenuItem = forwardRef(
     );
   }
 );
+const DropdownMenuCheckboxItem = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsxs(
+    Ariakit.MenuItemCheckbox,
+    {
+      accessibleWhenDisabled: true,
+      value: props.defaultChecked ? "on" : void 0,
+      ...props,
+      render: /* @__PURE__ */ jsx(ListItem.Root, { render: props.render }),
+      className: cx("\u{1F95D}-dropdown-menu-item", props.className),
+      ref: forwardedRef,
+      children: [
+        /* @__PURE__ */ jsx(ListItem.Content, { children: props.children }),
+        /* @__PURE__ */ jsx(Checkmark, { className: "\u{1F95D}-dropdown-menu-checkmark" })
+      ]
+    }
+  );
+});
 export {
   DropdownMenuButton as Button,
+  DropdownMenuCheckboxItem as CheckboxItem,
   DropdownMenuContent as Content,
   DropdownMenuItem as Item,
   DropdownMenu as Root

package/dist/bricks/Icon.d.ts

@@ -32,4 +32,10 @@ interface DisclosureArrowProps extends Omit<BaseProps<"svg">, "children"> {
     direction?: "down" | "right";
 }
 export declare const DisclosureArrow: React.ForwardRefExoticComponent<DisclosureArrowProps & React.RefAttributes<HTMLElement | SVGSVGElement>>;
+interface CheckmarkProps extends Omit<BaseProps<"svg">, "children"> {
+}
+export declare const Checkmark: React.ForwardRefExoticComponent<CheckmarkProps & React.RefAttributes<HTMLElement | SVGSVGElement>>;
+interface DismissProps extends Omit<BaseProps<"svg">, "children"> {
+}
+export declare const Dismiss: React.ForwardRefExoticComponent<DismissProps & React.RefAttributes<HTMLElement | SVGSVGElement>>;
 export {};

package/dist/bricks/Icon.js

@@ -54,7 +54,60 @@ const DisclosureArrow = forwardRef(
     );
   }
 );
+const Checkmark = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Icon,
+      {
+        ...props,
+        render: /* @__PURE__ */ jsx(
+          Ariakit.Role.svg,
+          {
+            width: "16",
+            height: "16",
+            fill: "currentColor",
+            viewBox: "0 0 16 16",
+            render: props.render,
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                fillRule: "evenodd",
+                d: "M13.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L6.5 10.793l6.646-6.647a.5.5 0 0 1 .708 0Z",
+                clipRule: "evenodd"
+              }
+            )
+          }
+        ),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+const Dismiss = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Icon,
+      {
+        ...props,
+        render: /* @__PURE__ */ jsx(
+          Ariakit.Role.svg,
+          {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 16 16",
+            fill: "currentColor",
+            render: props.render,
+            children: /* @__PURE__ */ jsx("path", { d: "M4.853 4.146a.5.5 0 1 0-.707.708L7.293 8l-3.147 3.146a.5.5 0 0 0 .707.708L8 8.707l3.146 3.147a.5.5 0 0 0 .707-.708L8.707 8l3.146-3.146a.5.5 0 1 0-.707-.708L8 7.293 4.853 4.146Z" })
+          }
+        ),
+        ref: forwardedRef
+      }
+    );
+  }
+);
 export {
+  Checkmark,
   DisclosureArrow,
+  Dismiss,
   Icon
 };

package/dist/bricks/Select.d.ts

@@ -21,7 +21,14 @@ import { type FocusableProps } from "./~utils.js";
  * ```
  */
 declare const SelectRoot: React.ForwardRefExoticComponent<Pick<Ariakit.RoleProps, "render"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & React.RefAttributes<HTMLElement | HTMLDivElement>>;
-interface HtmlSelectProps extends Omit<FocusableProps<"select">, "multiple" | "size"> {
+type HtmlSelectBaseProps = Omit<FocusableProps<"select">, "multiple" | "size">;
+interface HtmlSelectProps extends HtmlSelectBaseProps {
+    /**
+     * The variant of the `HtmlSelect`, i.e. solid, outline, or ghost.
+     *
+     * @default "solid"
+     */
+    variant?: "solid" | "outline" | "ghost";
 }
 /**
  * The actual select element to be used inside `Select.Root`. This is a wrapper around the

package/dist/bricks/Select.js

@@ -25,6 +25,7 @@ const SelectRoot = forwardRef((props, forwardedRef) => {
 });
 const HtmlSelect = forwardRef(
   (props, forwardedRef) => {
+    const { variant = "solid", ...rest } = props;
     const setIsHtmlSelect = React.useContext(HtmlSelectContext);
     const fieldId = useFieldId();
     const describedBy = useFieldDescribedBy(props["aria-describedby"]);
@@ -39,11 +40,11 @@ const HtmlSelect = forwardRef(
         Ariakit.Role.select,
         {
           id: fieldId,
-          ...props,
+          ...rest,
           className: cx("\u{1F95D}-button", "\u{1F95D}-select", props.className),
           "aria-describedby": describedBy,
           "data-kiwi-tone": "neutral",
-          "data-kiwi-variant": "solid",
+          "data-kiwi-variant": variant,
           ref: forwardedRef
         }
       ),

package/dist/bricks/TextBox.d.ts

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { Icon } from "./Icon.js";
-import { Textarea } from "./Textarea.js";
 import { type FocusableProps, type BaseProps } from "./~utils.js";
 interface BaseInputProps extends FocusableProps<"input"> {
 }
@@ -39,6 +38,28 @@ interface TextBoxInputProps extends Omit<BaseInputProps, "children" | "type"> {
  * For a multiline text input, use the `TextBox.Textarea` component.
  */
 declare const TextBoxInput: React.ForwardRefExoticComponent<TextBoxInputProps & React.RefAttributes<HTMLElement | HTMLInputElement>>;
+interface TextareaProps extends FocusableProps<"textarea"> {
+}
+/**
+ * A styled textarea element that allows users to enter multiline text values.
+ *
+ * Example usage:
+ * ```tsx
+ * <TextBox.Textarea defaultValue="Hello" />
+ * ```
+ *
+ * Works well with the `Field` and `Label` components.
+ * ```tsx
+ * <Field>
+ *   <Label>Leave a comment, be kind</Label>
+ *   <TextBox.Textarea />
+ * </Field>
+ * ```
+ *
+ * Underneath, it's an HTML textarea, i.e. `<textarea>`, so it supports the same props, including
+ * `value`, `defaultValue`, `onChange`, and `disabled`.
+ */
+declare const TextBoxTextarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLElement | HTMLTextAreaElement>>;
 interface TextBoxRootProps extends BaseProps {
 }
 /**
@@ -76,4 +97,4 @@ interface TextBoxTextProps extends BaseProps<"span"> {
  * A static text decoration for the `TextBox.Root` component. Can be added before or after the `TextBox.Input`.
  */
 declare const TextBoxText: React.ForwardRefExoticComponent<TextBoxTextProps & React.RefAttributes<HTMLElement | HTMLSpanElement>>;
-export { TextBoxRoot as Root, TextBoxInput as Input, Textarea, TextBoxIcon as Icon, TextBoxText as Text, };
+export { TextBoxRoot as Root, TextBoxInput as Input, TextBoxTextarea as Textarea, TextBoxIcon as Icon, TextBoxText as Text, };

package/dist/bricks/TextBox.js

@@ -4,7 +4,6 @@ import * as Ariakit from "@ariakit/react";
 import cx from "classnames";
 import { useFieldDescribedBy, useFieldId } from "./Field.js";
 import { Icon } from "./Icon.js";
-import { Textarea } from "./Textarea.js";
 import { useMergedRefs } from "./~hooks.js";
 import { forwardRef } from "./~utils.js";
 const TextBoxInput = forwardRef(
@@ -20,9 +19,11 @@ const TextBoxInput = forwardRef(
       Ariakit.Role.input,
       {
         id: fieldId,
+        readOnly: props.disabled,
         ...props,
         "aria-describedby": describedBy,
         className: cx({ "\u{1F95D}-text-box": !rootContext }, props.className),
+        placeholder: props.placeholder ?? " ",
         render: /* @__PURE__ */ jsx(
           Ariakit.Focusable,
           {
@@ -35,6 +36,31 @@ const TextBoxInput = forwardRef(
     );
   }
 );
+const TextBoxTextarea = forwardRef(
+  (props, forwardedRef) => {
+    const fieldId = useFieldId();
+    const describedBy = useFieldDescribedBy(props["aria-describedby"]);
+    return /* @__PURE__ */ jsx(
+      Ariakit.Role.textarea,
+      {
+        id: fieldId,
+        readOnly: props.disabled,
+        ...props,
+        className: cx("\u{1F95D}-text-box", props.className),
+        "aria-describedby": describedBy,
+        placeholder: props.placeholder ?? " ",
+        render: /* @__PURE__ */ jsx(
+          Ariakit.Focusable,
+          {
+            accessibleWhenDisabled: true,
+            render: props.render || /* @__PURE__ */ jsx("textarea", {})
+          }
+        ),
+        ref: forwardedRef
+      }
+    );
+  }
+);
 const TextBoxRoot = forwardRef(
   (props, forwardedRef) => {
     const inputRef = React.useRef(null);
@@ -94,5 +120,5 @@ export {
   TextBoxInput as Input,
   TextBoxRoot as Root,
   TextBoxText as Text,
-  Textarea
+  TextBoxTextarea as Textarea
 };