@itwin/itwinui-react 5.0.0-alpha.7 → 5.0.0-alpha.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/README.md +6 -6
- package/dist/DEV/bricks/DropdownMenu.js +6 -16
- package/dist/DEV/bricks/ListItem.js +3 -1
- package/dist/DEV/bricks/Tooltip.js +6 -17
- package/dist/DEV/bricks/Tree.js +17 -24
- package/dist/DEV/bricks/styles.css.js +2 -2
- package/dist/DEV/bricks/~hooks.js +26 -0
- package/dist/DEV/foundations/styles.css.js +2 -2
- package/dist/bricks/DropdownMenu.js +6 -16
- package/dist/bricks/IconButton.d.ts +2 -2
- package/dist/bricks/ListItem.d.ts +2 -2
- package/dist/bricks/ListItem.js +3 -1
- package/dist/bricks/Text.d.ts +1 -1
- package/dist/bricks/Tooltip.js +6 -17
- package/dist/bricks/Tree.d.ts +4 -2
- package/dist/bricks/Tree.js +17 -23
- package/dist/bricks/styles.css.js +2 -2
- package/dist/bricks/~hooks.d.ts +22 -1
- package/dist/bricks/~hooks.js +26 -0
- package/dist/foundations/styles.css.js +2 -2
- package/package.json +4 -4
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
// inline-css:/home/runner/work/
|
|
2
|
-
var styles_default = String.raw`@layer reset{*,:before,:after{box-sizing:border-box;margin:0;padding:0}:where([hidden]:not([hidden=until-found])){display:none!important}:where(html){-webkit-text-size-adjust:auto}:where(html:has(dialog:modal[open])){overflow:clip}:where(input,button,textarea,select){font:inherit;color:inherit}:where(img,picture,svg,video){block-size:auto;max-inline-size:100%;display:block}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(dialog,[popover]){color:inherit;inset:unset;max-width:unset;max-height:unset;overflow:unset;background:0 0;border:none}:where(dialog:not([open],[popover]),[popover]:not(:popover-open)){display:none!important}}@layer itwinui.foundations{html:where([data-color-scheme=light]),:host([data-color-scheme=light]),.🥝-root:where([data-kiwi-theme=light]){--ids-color-border-shadow-base:var(--ids-color-border-neutral-base);--ids-color-border-shadow-strong: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}}`;
|
|
1
|
+
// inline-css:/home/runner/work/design-system/design-system/packages/kiwi-react/src/foundations/styles.css
|
|
2
|
+
var styles_default = String.raw`@layer reset{*,:before,:after{box-sizing:border-box;margin:0;padding:0}:where([hidden]:not([hidden=until-found])){display:none!important}:where(html){-webkit-text-size-adjust:auto}:where(html:has(dialog:modal[open])){overflow:clip}:where(input,button,textarea,select){font:inherit;color:inherit}:where(img,picture,svg,video){block-size:auto;max-inline-size:100%;display:block}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(dialog,[popover]){color:inherit;inset:unset;max-width:unset;max-height:unset;overflow:unset;background:0 0;border:none}:where(dialog:not([open],[popover]),[popover]:not(:popover-open)){display:none!important}}@layer 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}}`;
|
|
3
3
|
|
|
4
4
|
// src/foundations/styles.css.ts
|
|
5
5
|
var styles_css_default = styles_default;
|
|
@@ -6,7 +6,8 @@ import * as ListItem from "./ListItem.js";
|
|
|
6
6
|
import { Button } from "./Button.js";
|
|
7
7
|
import { Kbd } from "./Kbd.js";
|
|
8
8
|
import { Checkmark, DisclosureArrow } from "./Icon.js";
|
|
9
|
-
import { forwardRef
|
|
9
|
+
import { forwardRef } from "./~utils.js";
|
|
10
|
+
import { usePopoverApi } from "./~hooks.js";
|
|
10
11
|
function DropdownMenu(props) {
|
|
11
12
|
const {
|
|
12
13
|
children,
|
|
@@ -15,21 +16,9 @@ function DropdownMenu(props) {
|
|
|
15
16
|
setOpen: setOpenProp,
|
|
16
17
|
defaultOpen: defaultOpenProp
|
|
17
18
|
} = props;
|
|
18
|
-
const store = Ariakit.useMenuStore();
|
|
19
|
-
const open = Ariakit.useStoreState(store, (state) => state.open);
|
|
20
|
-
const popover = Ariakit.useStoreState(store, (state) => state.popoverElement);
|
|
21
|
-
React.useEffect(
|
|
22
|
-
function syncPopoverWithOpenState() {
|
|
23
|
-
if (popover?.isConnected) {
|
|
24
|
-
popover?.togglePopover?.(open);
|
|
25
|
-
}
|
|
26
|
-
},
|
|
27
|
-
[open, popover]
|
|
28
|
-
);
|
|
29
19
|
return /* @__PURE__ */ jsx(
|
|
30
20
|
Ariakit.MenuProvider,
|
|
31
21
|
{
|
|
32
|
-
store,
|
|
33
22
|
placement,
|
|
34
23
|
defaultOpen: defaultOpenProp,
|
|
35
24
|
open: openProp,
|
|
@@ -40,15 +29,16 @@ function DropdownMenu(props) {
|
|
|
40
29
|
}
|
|
41
30
|
const DropdownMenuContent = forwardRef(
|
|
42
31
|
(props, forwardedRef) => {
|
|
32
|
+
const popover = usePopoverApi(Ariakit.useMenuContext());
|
|
43
33
|
return /* @__PURE__ */ jsx(
|
|
44
34
|
Ariakit.Menu,
|
|
45
35
|
{
|
|
46
|
-
portal:
|
|
36
|
+
portal: popover.portal,
|
|
47
37
|
unmountOnHide: true,
|
|
48
38
|
...props,
|
|
49
39
|
gutter: 4,
|
|
50
|
-
style: {
|
|
51
|
-
wrapperProps:
|
|
40
|
+
style: { ...popover.style, ...props.style },
|
|
41
|
+
wrapperProps: popover.wrapperProps,
|
|
52
42
|
className: cx("\u{1F95D}-dropdown-menu", props.className),
|
|
53
43
|
ref: forwardedRef
|
|
54
44
|
}
|
|
@@ -10,7 +10,7 @@ interface IconButtonBaseProps extends Omit<React.ComponentProps<typeof Button>,
|
|
|
10
10
|
/**
|
|
11
11
|
* Icon to be displayed inside the button.
|
|
12
12
|
*
|
|
13
|
-
* Can be a URL of an SVG from the
|
|
13
|
+
* Can be a URL of an SVG from the `@itwin/itwinui-icons` package,
|
|
14
14
|
* or a custom JSX icon.
|
|
15
15
|
*/
|
|
16
16
|
icon: string | React.JSX.Element;
|
|
@@ -27,7 +27,7 @@ interface IconButtonBaseProps extends Omit<React.ComponentProps<typeof Button>,
|
|
|
27
27
|
/**
|
|
28
28
|
* An icon-only button, with a required accessible name.
|
|
29
29
|
*
|
|
30
|
-
* The icon can be a URL from the
|
|
30
|
+
* The icon can be a URL from the `@itwin/itwinui-icons` package:
|
|
31
31
|
* ```tsx
|
|
32
32
|
* <IconButton
|
|
33
33
|
* label="Reveal full content"
|
|
@@ -3,10 +3,10 @@ interface ListItemProps extends Ariakit.RoleProps<"div"> {
|
|
|
3
3
|
}
|
|
4
4
|
/** @internal */
|
|
5
5
|
declare const ListItem: import("react").ForwardRefExoticComponent<Omit<ListItemProps, "ref"> & import("react").RefAttributes<HTMLElement | HTMLDivElement>>;
|
|
6
|
-
interface ListItemContentProps extends Ariakit.RoleProps<"
|
|
6
|
+
interface ListItemContentProps extends Ariakit.RoleProps<"div"> {
|
|
7
7
|
}
|
|
8
8
|
/** @internal */
|
|
9
|
-
declare const ListItemContent: import("react").ForwardRefExoticComponent<Omit<ListItemContentProps, "ref"> & import("react").RefAttributes<HTMLElement |
|
|
9
|
+
declare const ListItemContent: import("react").ForwardRefExoticComponent<Omit<ListItemContentProps, "ref"> & import("react").RefAttributes<HTMLElement | HTMLDivElement>>;
|
|
10
10
|
interface ListItemDecorationProps extends Ariakit.RoleProps<"span"> {
|
|
11
11
|
}
|
|
12
12
|
/** @internal */
|
package/dist/bricks/ListItem.js
CHANGED
|
@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import cx from "classnames";
|
|
3
3
|
import * as Ariakit from "@ariakit/react";
|
|
4
4
|
import { forwardRef } from "./~utils.js";
|
|
5
|
+
import { Text } from "./Text.js";
|
|
5
6
|
const ListItem = forwardRef((props, forwardedRef) => {
|
|
6
7
|
return /* @__PURE__ */ jsx(
|
|
7
8
|
Ariakit.Role.div,
|
|
@@ -16,9 +17,10 @@ const ListItem = forwardRef((props, forwardedRef) => {
|
|
|
16
17
|
const ListItemContent = forwardRef(
|
|
17
18
|
(props, forwardedRef) => {
|
|
18
19
|
return /* @__PURE__ */ jsx(
|
|
19
|
-
|
|
20
|
+
Text,
|
|
20
21
|
{
|
|
21
22
|
...props,
|
|
23
|
+
variant: "body-sm",
|
|
22
24
|
className: cx("\u{1F95D}-list-item-content", props.className),
|
|
23
25
|
ref: forwardedRef
|
|
24
26
|
}
|
package/dist/bricks/Text.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ interface TextProps extends BaseProps {
|
|
|
3
3
|
/**
|
|
4
4
|
* The typography variant to use.
|
|
5
5
|
*/
|
|
6
|
-
variant
|
|
6
|
+
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";
|
|
7
7
|
}
|
|
8
8
|
/**
|
|
9
9
|
* An element with text styles applied. Useful for paragraphs, headings, and other text content.
|
package/dist/bricks/Tooltip.js
CHANGED
|
@@ -2,7 +2,8 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
import cx from "classnames";
|
|
4
4
|
import * as Ariakit from "@ariakit/react";
|
|
5
|
-
import { forwardRef
|
|
5
|
+
import { forwardRef } from "./~utils.js";
|
|
6
|
+
import { usePopoverApi } from "./~hooks.js";
|
|
6
7
|
const Tooltip = forwardRef(
|
|
7
8
|
(props, forwardedRef) => {
|
|
8
9
|
const generatedId = React.useId();
|
|
@@ -18,19 +19,7 @@ const Tooltip = forwardRef(
|
|
|
18
19
|
...rest
|
|
19
20
|
} = props;
|
|
20
21
|
const store = Ariakit.useTooltipStore();
|
|
21
|
-
const
|
|
22
|
-
const popover = Ariakit.useStoreState(
|
|
23
|
-
store,
|
|
24
|
-
(state) => state.popoverElement
|
|
25
|
-
);
|
|
26
|
-
React.useEffect(
|
|
27
|
-
function syncPopoverWithOpenState() {
|
|
28
|
-
if (popover?.isConnected) {
|
|
29
|
-
popover?.togglePopover?.(open);
|
|
30
|
-
}
|
|
31
|
-
},
|
|
32
|
-
[open, popover]
|
|
33
|
-
);
|
|
22
|
+
const popover = usePopoverApi(store);
|
|
34
23
|
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
|
|
35
24
|
Ariakit.TooltipProvider,
|
|
36
25
|
{
|
|
@@ -57,11 +46,11 @@ const Tooltip = forwardRef(
|
|
|
57
46
|
ref: forwardedRef,
|
|
58
47
|
id,
|
|
59
48
|
style: {
|
|
60
|
-
|
|
49
|
+
...popover.style,
|
|
61
50
|
...props.style
|
|
62
51
|
},
|
|
63
|
-
wrapperProps:
|
|
64
|
-
portal:
|
|
52
|
+
wrapperProps: popover.wrapperProps,
|
|
53
|
+
portal: popover.portal,
|
|
65
54
|
children: content
|
|
66
55
|
}
|
|
67
56
|
)
|
package/dist/bricks/Tree.d.ts
CHANGED
|
@@ -20,7 +20,7 @@ interface TreeProps extends BaseProps {
|
|
|
20
20
|
* ```
|
|
21
21
|
*/
|
|
22
22
|
declare const Tree: React.ForwardRefExoticComponent<TreeProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
|
|
23
|
-
interface TreeItemProps extends Omit<BaseProps, "content"> {
|
|
23
|
+
interface TreeItemProps extends Omit<BaseProps, "content" | "children"> {
|
|
24
24
|
/** Specifies the nesting level of the tree item. Nesting levels start at 1. */
|
|
25
25
|
"aria-level": number;
|
|
26
26
|
/** 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"> {
|
|
|
58
58
|
/**
|
|
59
59
|
* Icon to be displayed inside the tree item.
|
|
60
60
|
*
|
|
61
|
-
* Can be a URL of an SVG from the
|
|
61
|
+
* Can be a URL of an SVG from the `@itwin/itwinui-icons` package, or a JSX element.
|
|
62
62
|
*/
|
|
63
63
|
icon?: string | React.JSX.Element;
|
|
64
64
|
/**
|
|
65
65
|
* The primary label that identifies the tree item and is displayed inside it.
|
|
66
66
|
*/
|
|
67
67
|
label?: React.ReactNode;
|
|
68
|
+
/** Secondary line of text to display additional information about the tree item. */
|
|
69
|
+
description?: React.ReactNode;
|
|
68
70
|
/**
|
|
69
71
|
* The actions available for the tree item. Must be a list of `Tree.ItemAction` components.
|
|
70
72
|
*
|
package/dist/bricks/Tree.js
CHANGED
|
@@ -25,10 +25,10 @@ const TreeItem = forwardRef((props, forwardedRef) => {
|
|
|
25
25
|
const {
|
|
26
26
|
"aria-level": level,
|
|
27
27
|
selected,
|
|
28
|
-
children,
|
|
29
28
|
expanded,
|
|
30
29
|
icon,
|
|
31
30
|
label,
|
|
31
|
+
description,
|
|
32
32
|
actions,
|
|
33
33
|
onSelectedChange,
|
|
34
34
|
onExpandedChange,
|
|
@@ -51,7 +51,8 @@ const TreeItem = forwardRef((props, forwardedRef) => {
|
|
|
51
51
|
onExpandedChange?.(event.key === "ArrowRight");
|
|
52
52
|
}
|
|
53
53
|
};
|
|
54
|
-
const
|
|
54
|
+
const labelId = React.useId();
|
|
55
|
+
const descriptionId = React.useId();
|
|
55
56
|
return /* @__PURE__ */ jsx(
|
|
56
57
|
TreeItemContext.Provider,
|
|
57
58
|
{
|
|
@@ -59,10 +60,9 @@ const TreeItem = forwardRef((props, forwardedRef) => {
|
|
|
59
60
|
() => ({
|
|
60
61
|
level,
|
|
61
62
|
expanded,
|
|
62
|
-
selected
|
|
63
|
-
contentId
|
|
63
|
+
selected
|
|
64
64
|
}),
|
|
65
|
-
[level, expanded, selected
|
|
65
|
+
[level, expanded, selected]
|
|
66
66
|
),
|
|
67
67
|
children: /* @__PURE__ */ jsx(
|
|
68
68
|
Ariakit.CompositeItem,
|
|
@@ -79,7 +79,8 @@ const TreeItem = forwardRef((props, forwardedRef) => {
|
|
|
79
79
|
role: "treeitem",
|
|
80
80
|
"aria-expanded": expanded,
|
|
81
81
|
"aria-selected": selected,
|
|
82
|
-
"aria-labelledby":
|
|
82
|
+
"aria-labelledby": labelId,
|
|
83
|
+
"aria-describedby": description ? descriptionId : void 0,
|
|
83
84
|
"aria-level": level,
|
|
84
85
|
className: cx("\u{1F95D}-tree-item", props.className),
|
|
85
86
|
ref: forwardedRef,
|
|
@@ -96,6 +97,7 @@ const TreeItem = forwardRef((props, forwardedRef) => {
|
|
|
96
97
|
/* @__PURE__ */ jsx(
|
|
97
98
|
TreeItemExpander,
|
|
98
99
|
{
|
|
100
|
+
"data-kiwi-description": description ? true : void 0,
|
|
99
101
|
onClick: () => {
|
|
100
102
|
if (expanded === void 0) return;
|
|
101
103
|
onExpandedChange?.(!expanded);
|
|
@@ -104,7 +106,15 @@ const TreeItem = forwardRef((props, forwardedRef) => {
|
|
|
104
106
|
),
|
|
105
107
|
typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : icon
|
|
106
108
|
] }),
|
|
107
|
-
/* @__PURE__ */ jsx(
|
|
109
|
+
/* @__PURE__ */ jsx(ListItem.Content, { id: labelId, className: "\u{1F95D}-tree-item-content", children: label }),
|
|
110
|
+
description ? /* @__PURE__ */ jsx(
|
|
111
|
+
ListItem.Content,
|
|
112
|
+
{
|
|
113
|
+
id: descriptionId,
|
|
114
|
+
className: "\u{1F95D}-tree-item-description",
|
|
115
|
+
children: description
|
|
116
|
+
}
|
|
117
|
+
) : void 0,
|
|
108
118
|
/* @__PURE__ */ jsx(
|
|
109
119
|
ListItem.Decoration,
|
|
110
120
|
{
|
|
@@ -119,22 +129,6 @@ const TreeItem = forwardRef((props, forwardedRef) => {
|
|
|
119
129
|
}
|
|
120
130
|
);
|
|
121
131
|
});
|
|
122
|
-
const TreeItemContent = forwardRef(
|
|
123
|
-
(props, forwardedRef) => {
|
|
124
|
-
const { label, ...rest } = props;
|
|
125
|
-
const { contentId } = React.useContext(TreeItemContext) ?? {};
|
|
126
|
-
return /* @__PURE__ */ jsx(
|
|
127
|
-
ListItem.Content,
|
|
128
|
-
{
|
|
129
|
-
...rest,
|
|
130
|
-
id: contentId,
|
|
131
|
-
className: cx("\u{1F95D}-tree-item-content", props.className),
|
|
132
|
-
ref: forwardedRef,
|
|
133
|
-
children: label
|
|
134
|
-
}
|
|
135
|
-
);
|
|
136
|
-
}
|
|
137
|
-
);
|
|
138
132
|
const TreeItemActions = forwardRef((props, forwardedRef) => {
|
|
139
133
|
return /* @__PURE__ */ jsx(
|
|
140
134
|
Ariakit.Toolbar,
|