@itwin/itwinui-react 5.0.0-alpha.7 → 5.0.0-alpha.9

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: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);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/Anchor.js

@@ -1,22 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+import { Role } from "@ariakit/react/role";
+import { Focusable } from "@ariakit/react/focusable";
 import { forwardRef } from "./~utils.js";
 const Anchor = forwardRef((props, forwardedRef) => {
   const { tone = "neutral", ...rest } = props;
   return /* @__PURE__ */ jsx(
-    Ariakit.Role.a,
+    Role.a,
     {
       ...rest,
       "data-kiwi-tone": tone,
       className: cx("\u{1F95D}-anchor", props.className),
-      render: /* @__PURE__ */ jsx(
-        Ariakit.Focusable,
-        {
-          accessibleWhenDisabled: true,
-          render: props.render || /* @__PURE__ */ jsx("a", {})
-        }
-      ),
+      render: /* @__PURE__ */ jsx(Focusable, { accessibleWhenDisabled: true, render: props.render || /* @__PURE__ */ jsx("a", {}) }),
       ref: forwardedRef
     }
   );

package/dist/bricks/Avatar.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+import { Role } from "@ariakit/react/role";
 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.span,
     {
       role: isDecorative ? void 0 : "img",
       "aria-label": isDecorative ? void 0 : alt,

package/dist/bricks/Badge.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+import { Role } from "@ariakit/react/role";
 import { forwardRef } from "./~utils.js";
 const Badge = forwardRef((props, forwardedRef) => {
   const { tone = "neutral", variant = "solid", label, ...rest } = props;
   return /* @__PURE__ */ jsx(
-    Ariakit.Role.span,
+    Role.span,
     {
       ...rest,
       "data-kiwi-tone": tone,

package/dist/bricks/Button.js

@@ -1,18 +1,25 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+import { Button as AkButton } from "@ariakit/react/button";
 import { forwardRef } from "./~utils.js";
+import { useGhostAlignment } from "./~utils.GhostAligner.js";
 const Button = forwardRef(
   (props, forwardedRef) => {
     const { variant = "solid", tone = "neutral", ...rest } = props;
+    const ghostAlignment = useGhostAlignment();
     return /* @__PURE__ */ jsx(
-      Ariakit.Button,
+      AkButton,
       {
         accessibleWhenDisabled: true,
         ...rest,
         "data-kiwi-variant": variant,
         "data-kiwi-tone": tone,
-        className: cx("\u{1F95D}-button", props.className),
+        "data-kiwi-ghost-align": variant === "ghost" ? ghostAlignment : void 0,
+        className: cx(
+          "\u{1F95D}-button",
+          { "\u{1F95D}-ghost-aligner": variant === "ghost" },
+          props.className
+        ),
         ref: forwardedRef
       }
     );

package/dist/bricks/Checkbox.d.ts

@@ -1,7 +1,7 @@
-import * as Ariakit from "@ariakit/react";
+import { type CheckboxProps as AkCheckboxProps } from "@ariakit/react/checkbox";
 import { type FocusableProps } from "./~utils.js";
 type InputBaseProps = Omit<FocusableProps<"input">, "defaultValue" | "checked" | "defaultChecked">;
-type CheckboxOwnProps = Pick<Ariakit.CheckboxProps, "value" | "defaultChecked" | "checked" | "onChange">;
+type CheckboxOwnProps = Pick<AkCheckboxProps, "value" | "defaultChecked" | "checked" | "onChange">;
 interface CheckboxProps extends InputBaseProps, CheckboxOwnProps {
 }
 /**

package/dist/bricks/Checkbox.js

@@ -1,6 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+import {
+  Checkbox as AkCheckbox
+} from "@ariakit/react/checkbox";
 import { FieldControl } from "./Field.js";
 import { forwardRef } from "./~utils.js";
 const Checkbox = forwardRef(
@@ -12,7 +14,7 @@ const Checkbox = forwardRef(
         type: "checkable",
         id,
         render: /* @__PURE__ */ jsx(
-          Ariakit.Checkbox,
+          AkCheckbox,
           {
             accessibleWhenDisabled: true,
             ...rest,

package/dist/bricks/Chip.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import cx from "classnames";
 import * as React from "react";
-import * as Ariakit from "@ariakit/react";
+import { Role } from "@ariakit/react/role";
 import { forwardRef } from "./~utils.js";
 import { IconButton } from "./IconButton.js";
 import { Dismiss } from "./Icon.js";
@@ -11,7 +11,7 @@ const Chip = forwardRef((props, forwardedRef) => {
   const labelId = `${baseId}-label`;
   const dismissIconId = `${baseId}-dismiss`;
   return /* @__PURE__ */ jsxs(
-    Ariakit.Role.div,
+    Role.div,
     {
       "data-kiwi-variant": variant,
       ...rest,

package/dist/bricks/Divider.d.ts

@@ -1,6 +1,6 @@
-import * as Ariakit from "@ariakit/react";
+import { type SeparatorProps } from "@ariakit/react/separator";
 import { type BaseProps } from "./~utils.js";
-interface DividerProps extends BaseProps<"hr">, Pick<Ariakit.SeparatorProps, "orientation"> {
+interface DividerProps extends BaseProps<"hr">, Pick<SeparatorProps, "orientation"> {
     /**
      * If true, the divider will be purely presentational and will not have any associated semantics.
      *

package/dist/bricks/Divider.js

@@ -1,10 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+import { Role } from "@ariakit/react/role";
+import { Separator } from "@ariakit/react/separator";
 import { forwardRef } from "./~utils.js";
 const Divider = forwardRef((props, forwardedRef) => {
   const { presentational, ...rest } = props;
-  const Comp = presentational ? Ariakit.Role : Ariakit.Separator;
+  const Comp = presentational ? Role : Separator;
   return /* @__PURE__ */ jsx(
     Comp,
     {

package/dist/bricks/DropdownMenu.d.ts

@@ -1,7 +1,8 @@
 import * as React from "react";
-import * as Ariakit from "@ariakit/react";
-import { type FocusableProps } from "./~utils.js";
-interface DropdownMenuProps extends Pick<Ariakit.MenuProviderProps, "children" | "placement" | "open" | "setOpen" | "defaultOpen"> {
+import { type AnyString, type BaseProps, type FocusableProps } from "./~utils.js";
+import { type MenuItemCheckboxProps, type MenuProviderProps } from "@ariakit/react/menu";
+import { type PredefinedSymbol } from "./Kbd.internal.js";
+interface DropdownMenuProps extends Pick<MenuProviderProps, "children" | "placement" | "open" | "setOpen" | "defaultOpen"> {
 }
 /**
  * A dropdown menu displays a list of actions or commands when the menu button is clicked.
@@ -14,9 +15,9 @@ interface DropdownMenuProps extends Pick<Ariakit.MenuProviderProps, "children" |
  *   <DropdownMenu.Button>Actions</DropdownMenu.Button>
  *
  *   <DropdownMenu.Content>
- *     <DropdownMenu.Item>Add</DropdownMenu.Item>
- *     <DropdownMenu.Item>Edit</DropdownMenu.Item>
- *     <DropdownMenu.Item>Delete</DropdownMenu.Item>
+ *     <DropdownMenu.Item label="Add" />
+ *     <DropdownMenu.Item label="Edit" />
+ *     <DropdownMenu.Item label="Delete" />
  *   </DropdownMenu.Content>
  * </DropdownMenu.Root>
  * ```
@@ -55,7 +56,21 @@ interface DropdownMenuButtonProps extends FocusableProps<"button"> {
  * ```
  */
 declare const DropdownMenuButton: React.ForwardRefExoticComponent<DropdownMenuButtonProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
-interface DropdownMenuItemProps extends FocusableProps {
+interface DropdownMenuItemProps extends Omit<FocusableProps, "children">, Partial<Pick<DropdownMenuItemShortcutsProps, "shortcuts"> & Pick<DropdownMenuIconProps, "icon">> {
+    /** The primary text label for the menu-item. */
+    label: React.ReactNode;
+}
+/**
+ * A single menu item within the dropdown menu. Should be used as a child of `DropdownMenu.Content`.
+ *
+ * Example:
+ * ```tsx
+ * <DropdownMenu.Item label="Add" />
+ * <DropdownMenu.Item label="Edit" />
+ * ```
+ */
+declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+interface DropdownMenuItemShortcutsProps extends BaseProps {
     /**
      * A string defining the keyboard shortcut(s) associated with the menu item.
      *
@@ -63,33 +78,33 @@ interface DropdownMenuItemProps extends FocusableProps {
      * shortcuts="S" // A single key shortcut
      * ```
      *
-     * Multiple keys should be separated by the '+' character.
+     * Multiple keys should be separated by the `+` character. If one of the keys is
+     * recognized as a symbol name or a modifier key, it will be displayed as a symbol.
      *
      * ```tsx
-     * shortcuts="Ctrl+Shift+S" // A multi-key combination
+     * shortcuts="Control+Enter" // A multi-key shortcut, displayed as "Ctrl ⏎"
      * ```
      */
-    shortcuts?: string;
+    shortcuts: AnyString | `${PredefinedSymbol}+${AnyString}`;
 }
-/**
- * A single menu item within the dropdown menu. Should be used as a child of `DropdownMenu.Content`.
- *
- * Example:
- * ```tsx
- * <DropdownMenu.Item>Add</DropdownMenu.Item>
- * <DropdownMenu.Item>Edit</DropdownMenu.Item>
- * ```
- */
-declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
-interface DropdownMenuCheckboxItemProps extends Omit<FocusableProps, "onChange">, Pick<Ariakit.MenuItemCheckboxProps, "checked" | "onChange" | "name" | "value"> {
+interface DropdownMenuIconProps extends BaseProps {
+    /**
+     * An optional icon displayed before the menu-item label.
+     *
+     * Can be a URL of an SVG from the `@itwin/itwinui-icons` package,
+     * or a custom JSX icon.
+     */
+    icon?: string | React.JSX.Element;
+}
+interface DropdownMenuCheckboxItemProps extends Omit<FocusableProps, "onChange" | "children">, Pick<MenuItemCheckboxProps, "checked" | "onChange" | "name" | "value">, Pick<DropdownMenuItemProps, "label" | "icon"> {
 }
 /**
  * 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>
+ * <DropdownMenu.CheckboxItem name="add" label="Add" />
+ * <DropdownMenu.CheckboxItem name="edit" label="Edit" />
  * ```
  */
 declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;

package/dist/bricks/DropdownMenu.js

@@ -1,12 +1,23 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
-import * as ListItem from "./ListItem.js";
+import * as ListItem from "./~utils.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 { Checkmark, DisclosureArrow, Icon } from "./Icon.js";
+import {
+  forwardRef
+} from "./~utils.js";
+import { usePopoverApi } from "./~hooks.js";
+import {
+  MenuProvider,
+  useMenuContext,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuItemCheckbox
+} from "@ariakit/react/menu";
+import { predefinedSymbols } from "./Kbd.internal.js";
 function DropdownMenu(props) {
   const {
     children,
@@ -15,21 +26,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,
+    MenuProvider,
     {
-      store,
       placement,
       defaultOpen: defaultOpenProp,
       open: openProp,
@@ -40,15 +39,16 @@ function DropdownMenu(props) {
 }
 const DropdownMenuContent = forwardRef(
   (props, forwardedRef) => {
+    const popover = usePopoverApi(useMenuContext());
     return /* @__PURE__ */ jsx(
-      Ariakit.Menu,
+      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
       }
@@ -59,7 +59,7 @@ const DropdownMenuButton = forwardRef(
   (props, forwardedRef) => {
     const { accessibleWhenDisabled = true, children, ...rest } = props;
     return /* @__PURE__ */ jsx(
-      Ariakit.MenuButton,
+      MenuButton,
       {
         accessibleWhenDisabled: true,
         render: /* @__PURE__ */ jsxs(Button, { accessibleWhenDisabled, children: [
@@ -75,13 +75,9 @@ const DropdownMenuButton = forwardRef(
 );
 const DropdownMenuItem = forwardRef(
   (props, forwardedRef) => {
-    const { shortcuts, ...rest } = props;
-    const shortcutKeys = React.useMemo(() => {
-      return typeof shortcuts === "string" ? shortcuts.split("+").map((key) => key.trim()) : [];
-    }, [shortcuts]);
-    const hasShortcuts = shortcutKeys.length > 0;
+    const { label, shortcuts, icon, ...rest } = props;
     return /* @__PURE__ */ jsxs(
-      Ariakit.MenuItem,
+      MenuItem,
       {
         accessibleWhenDisabled: true,
         ...rest,
@@ -89,25 +85,77 @@ const DropdownMenuItem = forwardRef(
         className: cx("\u{1F95D}-dropdown-menu-item", props.className),
         ref: forwardedRef,
         children: [
-          /* @__PURE__ */ jsx(ListItem.Content, { children: props.children }),
-          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}`)) })
+          icon ? /* @__PURE__ */ jsx(DropdownMenuIcon, { icon }) : null,
+          /* @__PURE__ */ jsx(ListItem.Content, { children: label }),
+          shortcuts ? /* @__PURE__ */ jsx(DropdownMenuItemShortcuts, { shortcuts }) : null
         ]
       }
     );
   }
 );
+const DropdownMenuItemShortcuts = forwardRef((props, forwardedRef) => {
+  const { shortcuts, ...rest } = props;
+  const shortcutKeys = React.useMemo(() => {
+    return shortcuts.split("+").map((key) => ({
+      key: key.trim(),
+      isSymbol: key in predefinedSymbols
+    }));
+  }, [shortcuts]);
+  return /* @__PURE__ */ jsx(
+    ListItem.Decoration,
+    {
+      ...rest,
+      className: cx("\u{1F95D}-dropdown-menu-item-shortcuts", props.className),
+      ref: forwardedRef,
+      children: shortcutKeys.map(({ key, isSymbol }, index) => {
+        if (isSymbol) {
+          return /* @__PURE__ */ jsx(
+            Kbd,
+            {
+              variant: "ghost",
+              symbol: key
+            },
+            `${key + index}`
+          );
+        }
+        return /* @__PURE__ */ jsx(Kbd, { variant: "ghost", children: key }, `${key + index}`);
+      })
+    }
+  );
+});
+const DropdownMenuIcon = forwardRef(
+  (props, forwardedRef) => {
+    const { icon, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      ListItem.Decoration,
+      {
+        render: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            href: typeof icon === "string" ? icon : void 0,
+            render: React.isValidElement(icon) ? icon : void 0
+          }
+        ),
+        ...rest,
+        ref: forwardedRef
+      }
+    );
+  }
+);
 const DropdownMenuCheckboxItem = forwardRef((props, forwardedRef) => {
+  const { label, icon, ...rest } = props;
   return /* @__PURE__ */ jsxs(
-    Ariakit.MenuItemCheckbox,
+    MenuItemCheckbox,
     {
       accessibleWhenDisabled: true,
       value: props.defaultChecked ? "on" : void 0,
-      ...props,
+      ...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 }),
+        icon ? /* @__PURE__ */ jsx(DropdownMenuIcon, { icon }) : null,
+        /* @__PURE__ */ jsx(ListItem.Content, { children: label }),
         /* @__PURE__ */ jsx(
           ListItem.Decoration,
           {