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

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

@@ -1,4 +1,6 @@
 import * as React from "react";
+import * as Ariakit from "@ariakit/react";
+import { supportsPopover } from "./~utils.js";
 function useControlledState(initialValue, controlledState, setControlledState) {
   const [uncontrolledState, setUncontrolledState] = React.useState(initialValue);
   const state = React.useMemo(
@@ -48,9 +50,41 @@ function useEventHandlers(...handlers) {
     [latestHandlers]
   );
 }
+function useSafeContext(context) {
+  const value = React.useContext(context);
+  if (value === void 0) {
+    throw new Error(`${context.displayName || "Context"} is undefined`);
+  }
+  return value;
+}
+function usePopoverApi(store) {
+  const open = Ariakit.useStoreState(store, (state) => state?.open);
+  const popover = Ariakit.useStoreState(
+    store,
+    (state) => state?.popoverElement
+  );
+  React.useEffect(
+    function syncPopoverWithOpenState() {
+      if (popover?.isConnected) {
+        popover?.togglePopover?.(open);
+      }
+    },
+    [open, popover]
+  );
+  return React.useMemo(
+    () => ({
+      portal: !supportsPopover,
+      style: { zIndex: supportsPopover ? void 0 : 9999 },
+      wrapperProps: { popover: "manual" }
+    }),
+    []
+  );
+}
 export {
   useControlledState,
   useEventHandlers,
   useLatestRef,
-  useMergedRefs
+  useMergedRefs,
+  usePopoverApi,
+  useSafeContext
 };

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 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}}`;
+// inline-css:/home/runner/work/design-system/design-system/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 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:oklch(0% none none/.12)}:is(html:where([data-color-scheme=light]),:host([data-color-scheme=light]),.🥝-root:where([data-kiwi-theme=light])){--ids-color-bg-mono-base:oklch(55.22% .018 253.99);--ids-color-bg-mono-muted:oklch(87.77% .005 247.88);--ids-color-bg-mono-faded:oklch(34.4% .011 264.42);--ids-color-bg-accent-base:oklch(54% .1 170.26);--ids-color-bg-accent-muted:oklch(89.34% .027 178.99);--ids-color-bg-accent-faded:oklch(33.76% .059 170.74);--ids-color-bg-info-base:oklch(55.68% .187 255.82);--ids-color-bg-info-muted:oklch(89.45% .042 250.5);--ids-color-bg-info-faded:oklch(34.71% .108 254.29);--ids-color-bg-positive-base:oklch(53.64% .173 140.57);--ids-color-bg-positive-muted:oklch(89.17% .046 138.13);--ids-color-bg-positive-faded:oklch(33.63% .106 139.87);--ids-color-bg-attention-base:oklch(55.63% .116 75.58);--ids-color-bg-attention-muted:oklch(89.65% .049 84.55);--ids-color-bg-attention-faded:oklch(34.69% .071 77.24);--ids-color-bg-critical-base:oklch(58.02% .221 19.39);--ids-color-bg-critical-muted:oklch(90.3% .042 5.14);--ids-color-bg-critical-faded:oklch(36.08% .133 17.52);--ids-color-bg-page-depth:oklch(94.86% .002 247.84);--ids-color-bg-page-base:oklch(99.06% .002 247.84);--ids-color-bg-page-zebra:oklch(0% none none/.02);--ids-color-bg-elevation-base:oklch(100% none none);--ids-color-bg-elevation-emphasis:oklch(18.15% .003 247.97);--ids-color-bg-elevation-control:oklch(100% none none);--ids-color-bg-elevation-level-1:oklch(100% none none);--ids-color-bg-elevation-overlay:oklch(99.06% .002 247.84);--ids-color-bg-elevation-level-2:oklch(100% none none);--ids-color-bg-elevation-scrollbar-surface:oklch(0% none none/.32);--ids-color-bg-elevation-scrollbar-canvas:oklch(0% none none/.48);--ids-color-bg-neutral-base:oklch(100% none none);--ids-color-bg-neutral-muted:oklch(97.87% .002 247.84);--ids-color-bg-neutral-faded:oklch(94.86% .002 247.84);--ids-color-bg-neutral-inverse:oklch(100% none none);--ids-color-bg-glow-base-hover-\%:4.0%;--ids-color-bg-glow-base-pressed-\%:8.0%;--ids-color-bg-glow-on-surface-accent-hover:oklch(54% .1 170.26/.12);--ids-color-bg-glow-on-surface-accent-pressed:oklch(54% .1 170.26/.16);--ids-color-bg-glow-on-surface-neutral-hover:oklch(0% none none/.04);--ids-color-bg-glow-on-surface-neutral-pressed:oklch(0% none none/.08);--ids-color-bg-glow-on-surface-critical-pressed:oklch(58.02% .221 19.39/.16);--ids-color-bg-glow-on-surface-critical-hover:oklch(58.02% .221 19.39/.12);--ids-color-bg-glow-on-surface-disabled:oklch(0% none none/.04);--ids-color-bg-glow-strong-pressed-\%:16.0%;--ids-color-bg-glow-strong-hover-\%:8.0%;--ids-color-icon-neutral-hover:oklch(26.92% .008 268.32);--ids-color-icon-neutral-base:oklch(55.22% .018 253.99);--ids-color-icon-neutral-secondary:oklch(69.04% .014 255.53);--ids-color-icon-neutral-tertiary:oklch(75.82% .01 252.83);--ids-color-icon-neutral-disabled:oklch(75.82% .01 252.83);--ids-color-icon-neutral-emphasis:oklch(100% none none);--ids-color-icon-neutral-muted:oklch(79.56% .008 241.69);--ids-color-icon-accent-base:oklch(54% .1 170.26);--ids-color-icon-accent-strong:oklch(54% .1 170.26);--ids-color-icon-accent-faded:oklch(47.28% .087 169.96);--ids-color-icon-info-base:oklch(55.68% .187 255.82);--ids-color-icon-info-faded:oklch(48.74% .162 255.58);--ids-color-icon-positive-base:oklch(53.64% .173 140.57);--ids-color-icon-positive-faded:oklch(46.81% .151 140.37);--ids-color-icon-attention-base:oklch(55.63% .116 75.58);--ids-color-icon-attention-faded:oklch(48.69% .101 75.71);--ids-color-icon-critical-base:oklch(58.02% .221 19.39);--ids-color-icon-critical-faded:oklch(50.74% .193 19.05);--ids-color-icon-mono-base:oklch(55.22% .018 253.99);--ids-color-icon-mono-faded:oklch(48.26% .017 254.7);--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:oklch(55.22% .018 253.99);--ids-color-border-mono-faded:oklch(41.45% .013 256.75);--ids-color-border-mono-muted:oklch(62.09% .017 257.22);--ids-color-border-accent-base:oklch(54% .1 170.26);--ids-color-border-accent-faded:oklch(40.38% .071 171.73);--ids-color-border-accent-muted:oklch(82.26% .045 176.56);--ids-color-border-accent-strong:oklch(54% .1 170.26);--ids-color-border-info-base:oklch(55.68% .187 255.82);--ids-color-border-info-faded:oklch(41.55% .136 255.23);--ids-color-border-info-muted:oklch(82.51% .071 249.98);--ids-color-border-positive-base:oklch(53.64% .173 140.57);--ids-color-border-positive-muted:oklch(82.11% .078 138.1);--ids-color-border-positive-faded:oklch(40.36% .129 140.08);--ids-color-border-attention-base:oklch(55.63% .116 75.58);--ids-color-border-attention-muted:oklch(82.78% .08 84.58);--ids-color-border-attention-faded:oklch(41.7% .086 77.28);--ids-color-border-critical-base:oklch(58.02% .221 19.39);--ids-color-border-critical-muted:oklch(83.74% .075 6.15);--ids-color-border-critical-faded:oklch(43.46% .163 18.38);--ids-color-border-glow-base-hover-\%:8.0%;--ids-color-border-glow-base-pressed-\%:12.0%;--ids-color-border-glow-base-default:oklch(0% none none/.08);--ids-color-border-glow-on-surface-faded:oklch(0% none none/.04);--ids-color-border-glow-on-surface-disabled:oklch(0% none none/.08);--ids-color-border-glow-strong-hover-\%:8.0%;--ids-color-border-glow-strong-pressed-\%:16.0%;--ids-color-border-glow-strong-default:oklch(0% none none/.12);--ids-color-border-neutral-base:oklch(87.77% .005 247.88);--ids-color-border-neutral-muted:oklch(91.52% .005 258.33);--ids-color-border-neutral-faded:oklch(82.77% .007 247.91);--ids-color-border-neutral-inverse:oklch(14.4% .003 247.09);--ids-color-border-neutral-disabled:oklch(75.82% .01 252.83);--ids-color-border-elevation-base:oklch(0% none none/.64);--ids-color-border-elevation-scrollbar-canvas:oklch(100% none none/.24);--ids-color-border-page-base:oklch(0% none none/.08);--ids-color-border-page-depth:oklch(0% none none/.08);--ids-color-text-mono-base:oklch(55.22% .018 253.99);--ids-color-text-mono-faded:oklch(48.26% .017 254.7);--ids-color-text-accent-base:oklch(54% .1 170.26);--ids-color-text-accent-faded:oklch(47.28% .087 169.96);--ids-color-text-accent-strong:oklch(54% .1 170.26);--ids-color-text-info-base:oklch(55.68% .187 255.82);--ids-color-text-info-faded:oklch(48.74% .162 255.58);--ids-color-text-positive-base:oklch(53.64% .173 140.57);--ids-color-text-positive-faded:oklch(46.81% .151 140.37);--ids-color-text-attention-base:oklch(55.63% .116 75.58);--ids-color-text-attention-faded:oklch(48.69% .101 75.71);--ids-color-text-critical-base:oklch(58.02% .221 19.39);--ids-color-text-critical-faded:oklch(50.74% .193 19.05);--ids-color-text-neutral-emphasis:oklch(100% none none);--ids-color-text-neutral-primary:oklch(24.37% .006 268.32);--ids-color-text-neutral-secondary:oklch(41.45% .013 256.75);--ids-color-text-neutral-tertiary:oklch(48.26% .017 254.7);--ids-color-text-neutral-disabled:oklch(75.82% .01 252.83);--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:oklch(0% none none);--ids-color-static-white:oklch(100% none none);--ids-color-static-accent:oklch(54% .1 170.26);--ids-color-glow-hue:oklch(0% none none);--ids-shadow-surface-xs:0px 1px 0px 0px oklch(0% none none/.04),0px 0px 0px 1px oklch(0% none none/.08),inset 0px 0px 0px 1px oklch(100% none none/.04),0px 1px 1px -.5px oklch(0% none none/.04);--ids-shadow-surface-sm:0px 1px 0px 0px oklch(0% none none/.04),0px 0px 0px 1px oklch(0% none none/.08),inset 0px 0px 0px 1px oklch(100% none none/.04),0px 1px 1px -.5px oklch(0% none none/.04),0px 3px 3px -1.5px oklch(0% none none/.04);--ids-shadow-surface-md:0px 1px 0px 0px oklch(0% none none/.04),0px 0px 0px 1px oklch(0% none none/.08),0px 1px 1px -.5px oklch(0% none none/.04),inset 0px 0px 0px 1px oklch(100% none none/.04),0px 3px 3px -1.5px oklch(0% none none/.04),0px 6px 6px -3px oklch(0% none none/.04);--ids-shadow-surface-lg:0px 1px 0px 0px oklch(0% none none/.04),0px 0px 0px 1px oklch(0% none none/.08),inset 0px 0px 0px 1px oklch(100% none none/.04),0px 1px 1px -.5px oklch(0% none none/.04),0px 3px 3px -1.5px oklch(0% none none/.04),0px 6px 6px -3px oklch(0% none none/.04),0px 12px 12px -6px oklch(0% none none/.04);--ids-shadow-surface-xl:0px 1px 0px 0px oklch(0% none none/.04),0px 0px 0px 1px oklch(0% none none/.08),inset 0px 0px 0px 1px oklch(100% none none/.04),0px 1px 1px -.5px oklch(0% none none/.04),0px 3px 3px -1.5px oklch(0% none none/.04),0px 6px 6px -3px oklch(0% none none/.04),0px 12px 12px -6px oklch(0% none none/.04),0px 24px 24px -12px oklch(0% none none/.04);--ids-shadow-button-base-drop:0px 1px 1px -.5px oklch(0% none none/.04),0px 3px 3px -1.5px oklch(0% none none/.04);--ids-shadow-button-base-inset:inset 0px -1px 0px 0px oklch(0% none none/.08);--ids-shadow-input-base:inset 0px 1px 1px 0px oklch(0% none none/.04),inset 0px 2px 4px 0px oklch(0% none none/.04);--ids-shadow-tooltip-base:0px 1px 1px -.5px oklch(0% none none/.04),0px 3px 3px -1.5px oklch(0% none none/.04),0px 6px 6px -3px oklch(0% none none/.04),0px 12px 12px -6px oklch(0% none none/.04);--ids-shadow-toolbar-base:0px 1px 0px 0px oklch(0% none none/.04),0px 0px 0px 1px oklch(0% none none/.8),inset 0px 0px 0px 1px oklch(100% none none/.08),0px 1px 1px -.5px oklch(0% none none/.04),0px 3px 3px -1.5px oklch(0% none none/.04),0px 6px 6px -3px oklch(0% none none/.04),0px 12px 12px -6px oklch(0% none none/.04),0px 24px 24px -12px oklch(0% none none/.04)}@supports not (color:oklch(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:#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}}html:where([data-color-scheme=dark]),:host([data-color-scheme=dark]),.🥝-root:where([data-kiwi-theme=dark]){--ids-color-border-shadow-base:oklch(100% none none/.08);--ids-color-border-shadow-strong:oklch(100% none none/.16)}:is(html:where([data-color-scheme=dark]),:host([data-color-scheme=dark]),.🥝-root:where([data-kiwi-theme=dark])){--ids-color-bg-mono-base:oklch(55.22% .018 253.99);--ids-color-bg-mono-muted:oklch(34.4% .011 264.42);--ids-color-bg-mono-faded:oklch(69.04% .014 255.53);--ids-color-bg-accent-base:oklch(54% .1 170.26);--ids-color-bg-accent-muted:oklch(33.76% .059 170.74);--ids-color-bg-accent-faded:oklch(67.95% .077 175.72);--ids-color-bg-info-base:oklch(55.68% .187 255.82);--ids-color-bg-info-muted:oklch(34.71% .108 254.29);--ids-color-bg-info-faded:oklch(68.84% .131 251.14);--ids-color-bg-positive-base:oklch(53.64% .173 140.57);--ids-color-bg-positive-muted:oklch(33.63% .106 139.87);--ids-color-bg-positive-faded:oklch(67.58% .14 138.68);--ids-color-bg-attention-base:oklch(55.63% .116 75.58);--ids-color-bg-attention-muted:oklch(34.69% .071 77.24);--ids-color-bg-attention-faded:oklch(69.31% .129 79.75);--ids-color-bg-critical-base:oklch(58.02% .221 19.39);--ids-color-bg-critical-muted:oklch(36.08% .133 17.52);--ids-color-bg-critical-faded:oklch(70.76% .147 9.28);--ids-color-bg-page-depth:oklch(22.52% .005 268.32);--ids-color-bg-page-base:oklch(24.37% .006 268.32);--ids-color-bg-page-zebra:oklch(0% none none/.04);--ids-color-bg-elevation-base:oklch(26.92% .008 268.32);--ids-color-bg-elevation-emphasis:oklch(14.4% .003 247.09);--ids-color-bg-elevation-control:oklch(24.37% .006 268.32);--ids-color-bg-elevation-level-1:oklch(29.76% .011 268.32);--ids-color-bg-elevation-overlay:oklch(18.15% .003 247.97);--ids-color-bg-elevation-level-2:oklch(32.63% .014 268.32);--ids-color-bg-elevation-scrollbar-surface:oklch(100% none none/.32);--ids-color-bg-elevation-scrollbar-canvas:oklch(0% none none/.48);--ids-color-bg-neutral-base:oklch(34.4% .011 264.42);--ids-color-bg-neutral-muted:oklch(32.63% .014 268.32);--ids-color-bg-neutral-faded:oklch(48.26% .017 254.7);--ids-color-bg-neutral-inverse:oklch(99.06% .002 247.84);--ids-color-bg-glow-base-hover-\%:4.0%;--ids-color-bg-glow-base-pressed-\%:8.0%;--ids-color-bg-glow-on-surface-accent-hover:oklch(54% .1 170.26/.12);--ids-color-bg-glow-on-surface-accent-pressed:oklch(54% .1 170.26/.16);--ids-color-bg-glow-on-surface-neutral-hover:oklch(100% none none/.04);--ids-color-bg-glow-on-surface-neutral-pressed:oklch(100% none none/.08);--ids-color-bg-glow-on-surface-critical-pressed:oklch(58.02% .221 19.39/.16);--ids-color-bg-glow-on-surface-critical-hover:oklch(58.02% .221 19.39/.12);--ids-color-bg-glow-on-surface-disabled:oklch(100% none none/.04);--ids-color-bg-glow-strong-pressed-\%:16.0%;--ids-color-bg-glow-strong-hover-\%:8.0%;--ids-color-icon-neutral-hover:oklch(99.06% .002 247.84);--ids-color-icon-neutral-base:oklch(75.82% .01 252.83);--ids-color-icon-neutral-secondary:oklch(62.09% .017 257.22);--ids-color-icon-neutral-tertiary:oklch(55.22% .018 253.99);--ids-color-icon-neutral-disabled:oklch(48.26% .017 254.7);--ids-color-icon-neutral-emphasis:oklch(100% none none);--ids-color-icon-neutral-muted:oklch(48.26% .017 254.7);--ids-color-icon-accent-base:oklch(67.95% .077 175.72);--ids-color-icon-accent-strong:oklch(87.59% .175 168.9);--ids-color-icon-accent-faded:oklch(75.2% .062 176.03);--ids-color-icon-info-base:oklch(68.84% .131 251.14);--ids-color-icon-info-faded:oklch(75.7% .101 250.13);--ids-color-icon-positive-base:oklch(67.58% .14 138.68);--ids-color-icon-positive-faded:oklch(74.8% .109 138.51);--ids-color-icon-attention-base:oklch(69.31% .129 79.75);--ids-color-icon-attention-faded:oklch(76.1% .109 83.1);--ids-color-icon-critical-base:oklch(70.76% .147 9.28);--ids-color-icon-critical-faded:oklch(77.16% .109 6.79);--ids-color-icon-mono-base:oklch(69.04% .014 255.53);--ids-color-icon-mono-faded:oklch(75.82% .01 252.83);--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:oklch(62.09% .017 257.22);--ids-color-border-mono-faded:oklch(79.56% .008 241.69);--ids-color-border-mono-muted:oklch(41.45% .013 256.75);--ids-color-border-accent-base:oklch(60.98% .092 173.18);--ids-color-border-accent-faded:oklch(82.26% .045 176.56);--ids-color-border-accent-muted:oklch(40.38% .071 171.73);--ids-color-border-accent-strong:oklch(87.59% .175 168.9);--ids-color-border-info-base:oklch(62.11% .161 252.88);--ids-color-border-info-faded:oklch(82.51% .071 249.98);--ids-color-border-info-muted:oklch(41.55% .136 255.23);--ids-color-border-positive-base:oklch(60.59% .164 139.21);--ids-color-border-positive-muted:oklch(40.36% .129 140.08);--ids-color-border-positive-faded:oklch(82.11% .078 138.1);--ids-color-border-attention-base:oklch(62.6% .132 74.4);--ids-color-border-attention-muted:oklch(41.7% .086 77.28);--ids-color-border-attention-faded:oklch(82.78% .08 84.58);--ids-color-border-critical-base:oklch(64.49% .185 12.51);--ids-color-border-critical-muted:oklch(43.46% .163 18.38);--ids-color-border-critical-faded:oklch(83.74% .075 6.15);--ids-color-border-glow-base-hover-\%:8.0%;--ids-color-border-glow-base-pressed-\%:12.0%;--ids-color-border-glow-base-default:oklch(100% none none/.08);--ids-color-border-glow-on-surface-faded:oklch(100% none none/.04);--ids-color-border-glow-on-surface-disabled:oklch(100% none none/.08);--ids-color-border-glow-strong-hover-\%:16.0%;--ids-color-border-glow-strong-pressed-\%:24.0%;--ids-color-border-glow-strong-default:oklch(100% none none/.16);--ids-color-border-neutral-base:oklch(41.45% .013 256.75);--ids-color-border-neutral-muted:oklch(32.63% .014 268.32);--ids-color-border-neutral-faded:oklch(62.09% .017 257.22);--ids-color-border-neutral-inverse:oklch(99.06% .002 247.84);--ids-color-border-neutral-disabled:oklch(48.26% .017 254.7);--ids-color-border-elevation-base:oklch(0% none none/.64);--ids-color-border-elevation-scrollbar-canvas:oklch(100% none none/.24);--ids-color-border-page-base:oklch(100% none none/.08);--ids-color-border-page-depth:oklch(100% none none/.08);--ids-color-text-mono-base:oklch(69.04% .014 255.53);--ids-color-text-mono-faded:oklch(75.82% .01 252.83);--ids-color-text-accent-base:oklch(67.95% .077 175.72);--ids-color-text-accent-faded:oklch(75.2% .062 176.03);--ids-color-text-accent-strong:oklch(87.59% .175 168.9);--ids-color-text-info-base:oklch(68.84% .131 251.14);--ids-color-text-info-faded:oklch(75.7% .101 250.13);--ids-color-text-positive-base:oklch(67.58% .14 138.68);--ids-color-text-positive-faded:oklch(74.8% .109 138.51);--ids-color-text-attention-base:oklch(69.31% .129 79.75);--ids-color-text-attention-faded:oklch(76.1% .109 83.1);--ids-color-text-critical-base:oklch(70.76% .147 9.28);--ids-color-text-critical-faded:oklch(77.16% .109 6.79);--ids-color-text-neutral-emphasis:oklch(100% none none);--ids-color-text-neutral-primary:oklch(99.06% .002 247.84);--ids-color-text-neutral-secondary:oklch(79.56% .008 241.69);--ids-color-text-neutral-tertiary:oklch(69.04% .014 255.53);--ids-color-text-neutral-disabled:oklch(48.26% .017 254.7);--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:oklch(0% none none);--ids-color-static-white:oklch(100% none none);--ids-color-static-accent:oklch(54% .1 170.26);--ids-color-glow-hue:oklch(100% none none);--ids-shadow-surface-xs:0px 1px 0px 0px oklch(0% none none/.08),0px 0px 0px 1px oklch(0% none none/.16),inset 0px 0px 0px 1px oklch(100% none none/.08),0px 1px 1px -.5px oklch(0% none none/.16);--ids-shadow-surface-sm:0px 1px 0px 0px oklch(0% none none/.08),0px 0px 0px 1px oklch(0% none none/.16),inset 0px 0px 0px 1px oklch(100% none none/.08),0px 1px 1px -.5px oklch(0% none none/.16),0px 3px 3px -1.5px oklch(0% none none/.16);--ids-shadow-surface-md:0px 1px 0px 0px oklch(0% none none/.08),0px 0px 0px 1px oklch(0% none none/.16),0px 1px 1px -.5px oklch(0% none none/.16),inset 0px 0px 0px 1px oklch(100% none none/.08),0px 3px 3px -1.5px oklch(0% none none/.16),0px 6px 6px -3px oklch(0% none none/.16);--ids-shadow-surface-lg:0px 1px 0px 0px oklch(0% none none/.08),0px 0px 0px 1px oklch(0% none none/.16),inset 0px 0px 0px 1px oklch(100% none none/.08),0px 1px 1px -.5px oklch(0% none none/.16),0px 3px 3px -1.5px oklch(0% none none/.16),0px 6px 6px -3px oklch(0% none none/.16),0px 12px 12px -6px oklch(0% none none/.16);--ids-shadow-surface-xl:0px 1px 0px 0px oklch(0% none none/.08),0px 0px 0px 1px oklch(0% none none/.16),inset 0px 0px 0px 1px oklch(100% none none/.08),0px 1px 1px -.5px oklch(0% none none/.16),0px 3px 3px -1.5px oklch(0% none none/.16),0px 6px 6px -3px oklch(0% none none/.16),0px 12px 12px -6px oklch(0% none none/.16),0px 24px 24px -12px oklch(0% none none/.16);--ids-shadow-button-base-drop:0px 1px 1px -.5px oklch(0% none none/.16),0px 3px 3px -1.5px oklch(0% none none/.16);--ids-shadow-button-base-inset:inset 0px -1px 0px 0px oklch(0% none none/.08);--ids-shadow-input-base:inset 0px 1px 2px 0px oklch(0% none none/.16),inset 0px 2px 4px 0px oklch(0% none none/.16);--ids-shadow-tooltip-base:0px 1px 1px -.5px oklch(0% none none/.16),0px 3px 3px -1.5px oklch(0% none none/.16),0px 6px 6px -3px oklch(0% none none/.16),0px 12px 12px -6px oklch(0% none none/.16);--ids-shadow-toolbar-base:0px 1px 0px 0px oklch(0% none none/.08),0px 0px 0px 1px oklch(0% none none/.8),inset 0px 0px 0px 1px oklch(100% none none/.08),0px 1px 1px -.5px oklch(0% none none/.16),0px 3px 3px -1.5px oklch(0% none none/.16),0px 6px 6px -3px oklch(0% none none/.16),0px 12px 12px -6px oklch(0% none none/.16),0px 24px 24px -12px oklch(0% none none/.16)}@supports not (color:oklch(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:#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}}: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);line-height:1.3333}html{background-color:var(--ids-color-bg-page-base)}body{font-size:var(--ids-font-size-14);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}}`;
 
 // src/foundations/styles.css.ts
 var styles_css_default = styles_default;

package/dist/bricks/Avatar.d.ts

@@ -0,0 +1,47 @@
+import { type BaseProps } from "./~utils.js";
+interface AvatarProps extends BaseProps<"span"> {
+    /**
+     * The size of the avatar.
+     * @default "medium"
+     */
+    size?: "small" | "medium" | "large" | "xlarge";
+    /**
+     * Initials that gets displayed in the absence of an image.
+     */
+    initials?: string;
+    /**
+     * Alternative text describing the avatar, typically the user's or organization's full name.
+     *
+     * When this prop is passed, the avatar gets rendered as `role="img"` and labelled
+     * using the provided text.
+     *
+     * This prop is not required if the avatar is purely decorative. By default, the avatar
+     * will be hidden from the accessibility tree.
+     */
+    alt?: string;
+    /**
+     * Image to be displayed. Can be `<img>` or `<svg>` or anything else.
+     */
+    image?: React.JSX.Element;
+}
+/**
+ * An avatar to represent a user or organization.
+ *
+ * By default, this component assumes that the avatar is decorative, so it adds `aria-hidden` by default.
+ * ```tsx
+ * <Avatar initials="JD" />
+ * ```
+ *
+ * If the avatar is semantically meaningful, the `alt` prop can be used to provide alternative text.
+ * ```tsx
+ * <Avatar initials="JD" alt="John Doe" />
+ * ```
+ *
+ * Image & size examples:
+ * ```tsx
+ * <Avatar initials="JD" alt="John Doe" size="xlarge" image={<img src="…" alt="">} />
+ * <Avatar initials="JD" alt="John Doe" size="small" image={<Icon href="…">} />
+ * ```
+ */
+export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLElement | HTMLSpanElement>>;
+export {};

package/dist/bricks/Avatar.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import cx from "classnames";
+import * as Ariakit from "@ariakit/react";
+import { forwardRef } from "./~utils.js";
+const Avatar = forwardRef((props, forwardedRef) => {
+  const { size = "medium", initials, alt, image, children, ...rest } = props;
+  const isDecorative = !alt;
+  return /* @__PURE__ */ jsx(
+    Ariakit.Role.span,
+    {
+      role: isDecorative ? void 0 : "img",
+      "aria-label": isDecorative ? void 0 : alt,
+      ...rest,
+      "data-kiwi-size": size,
+      className: cx("\u{1F95D}-avatar", props.className),
+      ref: forwardedRef,
+      children: image ?? /* @__PURE__ */ jsx("abbr", { className: "\u{1F95D}-avatar-initials", "aria-hidden": "true", children: initials?.substring(0, 1) })
+    }
+  );
+});
+export {
+  Avatar
+};

package/dist/bricks/Badge.d.ts

@@ -0,0 +1,28 @@
+import { type BaseProps } from "./~utils.js";
+interface BadgeProps extends Omit<BaseProps<"span">, "children"> {
+    /**
+     * The label displayed inside the badge.
+     */
+    label: string;
+    /**
+     * The tone of the badge.
+     * @default "neutral"
+     */
+    tone?: "neutral" | "info" | "positive" | "attention" | "critical";
+    /**
+     * The variant style of the badge.
+     * @default "solid"
+     */
+    variant?: "solid" | "muted" | "outline";
+}
+/**
+ * A badge component, typically used to designate the status of an item.
+ *
+ * Example:
+ * ```tsx
+ * <Badge label="Value" />
+ * <Badge label="Value" tone="info" variant="outline" />
+ * ```
+ */
+export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLElement | HTMLSpanElement>>;
+export {};

package/dist/bricks/Badge.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import cx from "classnames";
+import * as Ariakit from "@ariakit/react";
+import { forwardRef } from "./~utils.js";
+const Badge = forwardRef((props, forwardedRef) => {
+  const { tone = "neutral", variant = "solid", label, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    Ariakit.Role.span,
+    {
+      ...rest,
+      "data-kiwi-tone": tone,
+      "data-kiwi-variant": variant,
+      className: cx("\u{1F95D}-badge", props.className),
+      ref: forwardedRef,
+      children: label
+    }
+  );
+});
+export {
+  Badge
+};

package/dist/bricks/DropdownMenu.js

@@ -6,7 +6,8 @@ import * as ListItem from "./ListItem.js";
 import { Button } from "./Button.js";
 import { Kbd } from "./Kbd.js";
 import { Checkmark, DisclosureArrow } from "./Icon.js";
-import { forwardRef, supportsPopover } from "./~utils.js";
+import { forwardRef } from "./~utils.js";
+import { usePopoverApi } from "./~hooks.js";
 function DropdownMenu(props) {
   const {
     children,
@@ -15,21 +16,9 @@ function DropdownMenu(props) {
     setOpen: setOpenProp,
     defaultOpen: defaultOpenProp
   } = props;
-  const store = Ariakit.useMenuStore();
-  const open = Ariakit.useStoreState(store, (state) => state.open);
-  const popover = Ariakit.useStoreState(store, (state) => state.popoverElement);
-  React.useEffect(
-    function syncPopoverWithOpenState() {
-      if (popover?.isConnected) {
-        popover?.togglePopover?.(open);
-      }
-    },
-    [open, popover]
-  );
   return /* @__PURE__ */ jsx(
     Ariakit.MenuProvider,
     {
-      store,
       placement,
       defaultOpen: defaultOpenProp,
       open: openProp,
@@ -40,15 +29,16 @@ function DropdownMenu(props) {
 }
 const DropdownMenuContent = forwardRef(
   (props, forwardedRef) => {
+    const popover = usePopoverApi(Ariakit.useMenuContext());
     return /* @__PURE__ */ jsx(
       Ariakit.Menu,
       {
-        portal: !supportsPopover,
+        portal: popover.portal,
         unmountOnHide: true,
         ...props,
         gutter: 4,
-        style: { zIndex: supportsPopover ? void 0 : 9999, ...props.style },
-        wrapperProps: { popover: "manual" },
+        style: { ...popover.style, ...props.style },
+        wrapperProps: popover.wrapperProps,
         className: cx("\u{1F95D}-dropdown-menu", props.className),
         ref: forwardedRef
       }
@@ -90,7 +80,7 @@ const DropdownMenuItem = forwardRef(
         ref: forwardedRef,
         children: [
           /* @__PURE__ */ jsx(ListItem.Content, { children: props.children }),
-          hasShortcuts && /* @__PURE__ */ jsx("span", { className: "\u{1F95D}-dropdown-menu-item-shortcuts", children: shortcutKeys.map((key, index) => /* @__PURE__ */ jsx(Kbd, { variant: "ghost", children: key }, `${key + index}`)) })
+          hasShortcuts && /* @__PURE__ */ jsx(ListItem.Decoration, { className: "\u{1F95D}-dropdown-menu-item-shortcuts", children: shortcutKeys.map((key, index) => /* @__PURE__ */ jsx(Kbd, { variant: "ghost", children: key }, `${key + index}`)) })
         ]
       }
     );
@@ -108,7 +98,12 @@ const DropdownMenuCheckboxItem = forwardRef((props, forwardedRef) => {
       ref: forwardedRef,
       children: [
         /* @__PURE__ */ jsx(ListItem.Content, { children: props.children }),
-        /* @__PURE__ */ jsx(Checkmark, { className: "\u{1F95D}-dropdown-menu-checkmark" })
+        /* @__PURE__ */ jsx(
+          ListItem.Decoration,
+          {
+            render: /* @__PURE__ */ jsx(Checkmark, { className: "\u{1F95D}-dropdown-menu-checkmark" })
+          }
+        )
       ]
     }
   );

package/dist/bricks/Icon.d.ts

@@ -1,10 +1,29 @@
 import * as React from "react";
 import { type BaseProps } from "./~utils.js";
 interface IconProps extends Omit<BaseProps<"svg">, "children"> {
-    /** URL of the symbol sprite. */
+    /**
+     * URL of the symbol sprite.
+     *
+     * Should be a URL to an `.svg` file from `@itwin/itwinui-icons`.
+     */
     href?: string;
-    /** Size of the icon. Defaults to `regular`. */
+    /**
+     * Size of the icon. This affects the icon's physical dimensions, as well as the
+     * actual SVG contents (different sizes might have different fidelity).
+     *
+     * Defaults to `"regular"` (16px) and can be optionally set to `"large"` (24px).
+     */
     size?: "regular" | "large";
+    /**
+     * Alternative text describing the icon.
+     *
+     * When this prop is passed, the SVG gets rendered as `role="img"` and labelled
+     * using the provided text.
+     *
+     * This prop is not required if the icon is purely decorative. By default, the icon
+     * will be hidden from the accessibility tree.
+     */
+    alt?: string;
 }
 /**
  * Icon component that provides fill and sizing to the SVGs from `@itwin/itwinui-icons`.
@@ -21,7 +40,13 @@ interface IconProps extends Omit<BaseProps<"svg">, "children"> {
  * <Icon render={<svg><path d="…" fill="currentColor" /></svg>} />
  * ```
  *
- * **Note**: This component is meant to be used with decorative icons, so it adds `aria-hidden` by default.
+ * By default, this component assumes that the icon is decorative, so it adds `aria-hidden` by default.
+ *
+ * If the icon is semantically meaningful, the `alt` prop can be used to provide alternative text.
+ *
+ * ```tsx
+ * <Icon href={…} alt="Help" />
+ * ```
  */
 export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLElement | SVGSVGElement>>;
 interface DisclosureArrowProps extends Omit<BaseProps<"svg">, "children"> {

package/dist/bricks/Icon.js

@@ -4,12 +4,15 @@ import cx from "classnames";
 import * as Ariakit from "@ariakit/react";
 import { forwardRef } from "./~utils.js";
 const Icon = forwardRef((props, forwardedRef) => {
-  const { href, size = "regular", ...rest } = props;
+  const { href, size, alt, ...rest } = props;
   const iconId = toIconId(size);
+  const isDecorative = !alt;
   return /* @__PURE__ */ jsx(
     Ariakit.Role.svg,
     {
-      "aria-hidden": true,
+      "aria-hidden": isDecorative ? "true" : void 0,
+      role: isDecorative ? void 0 : "img",
+      "aria-label": isDecorative ? void 0 : alt,
       ...rest,
       "data-kiwi-size": size,
       className: cx("\u{1F95D}-icon", props.className),

package/dist/bricks/IconButton.d.ts

@@ -10,7 +10,7 @@ interface IconButtonBaseProps extends Omit<React.ComponentProps<typeof Button>,
     /**
      * Icon to be displayed inside the button.
      *
-     * Can be a URL of an SVG from the `kiwi-icons` package,
+     * Can be a URL of an SVG from the `@itwin/itwinui-icons` package,
      * or a custom JSX icon.
      */
     icon: string | React.JSX.Element;
@@ -27,7 +27,7 @@ interface IconButtonBaseProps extends Omit<React.ComponentProps<typeof Button>,
 /**
  * An icon-only button, with a required accessible name.
  *
- * The icon can be a URL from the `kiwi-icons` package:
+ * The icon can be a URL from the `@itwin/itwinui-icons` package:
  * ```tsx
  * <IconButton
  *   label="Reveal full content"

package/dist/bricks/ListItem.d.ts

@@ -3,8 +3,12 @@ interface ListItemProps extends Ariakit.RoleProps<"div"> {
 }
 /** @internal */
 declare const ListItem: import("react").ForwardRefExoticComponent<Omit<ListItemProps, "ref"> & import("react").RefAttributes<HTMLElement | HTMLDivElement>>;
-interface ListItemContentProps extends Ariakit.RoleProps<"span"> {
+interface ListItemContentProps extends Ariakit.RoleProps<"div"> {
 }
 /** @internal */
-declare const ListItemContent: import("react").ForwardRefExoticComponent<Omit<ListItemContentProps, "ref"> & import("react").RefAttributes<HTMLElement | HTMLSpanElement>>;
-export { ListItem as Root, ListItemContent as Content };
+declare const ListItemContent: import("react").ForwardRefExoticComponent<Omit<ListItemContentProps, "ref"> & import("react").RefAttributes<HTMLElement | HTMLDivElement>>;
+interface ListItemDecorationProps extends Ariakit.RoleProps<"span"> {
+}
+/** @internal */
+declare const ListItemDecoration: import("react").ForwardRefExoticComponent<Omit<ListItemDecorationProps, "ref"> & import("react").RefAttributes<HTMLElement | HTMLSpanElement>>;
+export { ListItem as Root, ListItemContent as Content, ListItemDecoration as Decoration, };

package/dist/bricks/ListItem.js

@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
 import * as Ariakit from "@ariakit/react";
 import { forwardRef } from "./~utils.js";
+import { Text } from "./Text.js";
 const ListItem = forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(
     Ariakit.Role.div,
@@ -16,16 +17,30 @@ const ListItem = forwardRef((props, forwardedRef) => {
 const ListItemContent = forwardRef(
   (props, forwardedRef) => {
     return /* @__PURE__ */ jsx(
-      Ariakit.Role.span,
+      Text,
       {
         ...props,
+        variant: "body-sm",
         className: cx("\u{1F95D}-list-item-content", props.className),
         ref: forwardedRef
       }
     );
   }
 );
+const ListItemDecoration = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Ariakit.Role.span,
+      {
+        ...props,
+        className: cx("\u{1F95D}-list-item-decoration", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
 export {
   ListItemContent as Content,
+  ListItemDecoration as Decoration,
   ListItem as Root
 };

package/dist/bricks/Text.d.ts

@@ -3,7 +3,7 @@ interface TextProps extends BaseProps {
     /**
      * The typography variant to use.
      */
-    variant?: "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "body-lg" | "body-md" | "body-sm" | "caption-lg" | "caption-md" | "caption-sm" | "mono-sm";
+    variant: "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "body-lg" | "body-md" | "body-sm" | "caption-lg" | "caption-md" | "caption-sm" | "mono-sm";
 }
 /**
  * An element with text styles applied. Useful for paragraphs, headings, and other text content.

package/dist/bricks/Tooltip.js

@@ -2,7 +2,8 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import cx from "classnames";
 import * as Ariakit from "@ariakit/react";
-import { forwardRef, supportsPopover } from "./~utils.js";
+import { forwardRef } from "./~utils.js";
+import { usePopoverApi } from "./~hooks.js";
 const Tooltip = forwardRef(
   (props, forwardedRef) => {
     const generatedId = React.useId();
@@ -18,19 +19,7 @@ const Tooltip = forwardRef(
       ...rest
     } = props;
     const store = Ariakit.useTooltipStore();
-    const open = Ariakit.useStoreState(store, (state) => state.open);
-    const popover = Ariakit.useStoreState(
-      store,
-      (state) => state.popoverElement
-    );
-    React.useEffect(
-      function syncPopoverWithOpenState() {
-        if (popover?.isConnected) {
-          popover?.togglePopover?.(open);
-        }
-      },
-      [open, popover]
-    );
+    const popover = usePopoverApi(store);
     return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
       Ariakit.TooltipProvider,
       {
@@ -57,11 +46,11 @@ const Tooltip = forwardRef(
               ref: forwardedRef,
               id,
               style: {
-                zIndex: supportsPopover ? void 0 : 9999,
+                ...popover.style,
                 ...props.style
               },
-              wrapperProps: { popover: "manual" },
-              portal: !supportsPopover,
+              wrapperProps: popover.wrapperProps,
+              portal: popover.portal,
               children: content
             }
           )

package/dist/bricks/Tree.d.ts

@@ -20,7 +20,7 @@ interface TreeProps extends BaseProps {
  * ```
  */
 declare const Tree: React.ForwardRefExoticComponent<TreeProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
-interface TreeItemProps extends Omit<BaseProps, "content"> {
+interface TreeItemProps extends Omit<BaseProps, "content" | "children"> {
     /** Specifies the nesting level of the tree item. Nesting levels start at 1. */
     "aria-level": number;
     /** Defines tree item position in the current level of tree items. Integer greater than or equal to 1. */
@@ -58,13 +58,15 @@ interface TreeItemProps extends Omit<BaseProps, "content"> {
     /**
      * Icon to be displayed inside the tree item.
      *
-     * Can be a URL of an SVG from the `kiwi-icons` package, or a JSX element.
+     * Can be a URL of an SVG from the `@itwin/itwinui-icons` package, or a JSX element.
      */
     icon?: string | React.JSX.Element;
     /**
      * The primary label that identifies the tree item and is displayed inside it.
      */
     label?: React.ReactNode;
+    /** Secondary line of text to display additional information about the tree item. */
+    description?: React.ReactNode;
     /**
      * The actions available for the tree item. Must be a list of `Tree.ItemAction` components.
      *