@bundle-stats/ui 4.22.2 → 4.23.0-beta.1

package/lib-esm/ui/dialog/dialog.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import cx from 'classnames';
-import { Dialog as AriakitDialog, DialogDismiss as AriakitDialogDismiss } from 'ariakit/dialog';
+import { Dialog as AriakitDialog, DialogDismiss as AriakitDialogDismiss, useDialogState as useAriakitDialogState, } from 'ariakit/dialog';
 import { Stack } from '../../layout/stack';
 import { BUTTON_GLYPHS, Button } from '../button';
 import css from './dialog.module.css';
-export { useDialogState } from 'ariakit/dialog';
+export const useDialogState = (options = {}) => {
+    return useAriakitDialogState({ animated: true, ...options });
+};
 export const Dialog = (props) => {
     const { state, className = '', title = '', width = 'medium', center = false, modal = false, children, } = props;
     const rootClassName = cx(css.dialog, width && css[`width--${width}`], center && css.center);

package/lib-esm/ui/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/ui/dialog/dialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,aAAa,IAAI,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAEhG,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,GAAG,MAAM,qBAAqB,CAAC;AAEtC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAYhD,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE;IAC3C,MAAM,EACJ,KAAK,EACL,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACV,KAAK,GAAG,QAAQ,EAChB,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,KAAK,EACb,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK,IAAI,GAAG,CAAC,UAAU,KAAK,EAAE,CAAC,EAAE,MAAM,IAAI,GAAG,CAAC,MAAM,CAAC,CAAC;IAE5F,OAAO,CACL,oBAAC,aAAa,IACZ,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,QAAQ,QACR,aAAa,EAAE;YACb,SAAS,EAAE,GAAG,CAAC,QAAQ;SACxB,EACD,MAAM,QACN,SAAS,EAAE,aAAa;QAEvB,CAAC,KAAK,IAAI,CACT,oBAAC,oBAAoB,IAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,WAAW,IAErF,IAAI,CACgB,CACxB;QACD,oBAAC,KAAK,IAAC,KAAK,EAAC,QAAQ;YAClB,KAAK,IAAI,CACR,gCAAQ,SAAS,EAAE,GAAG,CAAC,MAAM,IAC1B,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,4BAAI,SAAS,EAAE,GAAG,CAAC,WAAW,IAAG,KAAK,CAAM,CAAC,CAAC,CAAC,KAAK,CAC1E,CACV;YACD,6BAAK,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,SAAS,CAAC,IAAG,QAAQ,CAAO,CACtD,CACM,CACjB,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/ui/dialog/dialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,MAAM,IAAI,aAAa,EACvB,aAAa,IAAI,oBAAoB,EACrC,cAAc,IAAI,qBAAqB,GAExC,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,GAAG,MAAM,qBAAqB,CAAC;AAEtC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,UAA4B,EAAE,EAAE,EAAE;IAC/D,OAAO,qBAAqB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;AAC/D,CAAC,CAAC;AAYF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE;IAC3C,MAAM,EACJ,KAAK,EACL,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACV,KAAK,GAAG,QAAQ,EAChB,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,KAAK,EACb,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK,IAAI,GAAG,CAAC,UAAU,KAAK,EAAE,CAAC,EAAE,MAAM,IAAI,GAAG,CAAC,MAAM,CAAC,CAAC;IAE5F,OAAO,CACL,oBAAC,aAAa,IACZ,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,QAAQ,QACR,aAAa,EAAE;YACb,SAAS,EAAE,GAAG,CAAC,QAAQ;SACxB,EACD,MAAM,QACN,SAAS,EAAE,aAAa;QAEvB,CAAC,KAAK,IAAI,CACT,oBAAC,oBAAoB,IAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,WAAW,IAErF,IAAI,CACgB,CACxB;QACD,oBAAC,KAAK,IAAC,KAAK,EAAC,QAAQ;YAClB,KAAK,IAAI,CACR,gCAAQ,SAAS,EAAE,GAAG,CAAC,MAAM,IAC1B,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,4BAAI,SAAS,EAAE,GAAG,CAAC,WAAW,IAAG,KAAK,CAAM,CAAC,CAAC,CAAC,KAAK,CAC1E,CACV;YACD,6BAAK,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,SAAS,CAAC,IAAG,QAAQ,CAAO,CACtD,CACM,CACjB,CAAC;AACJ,CAAC,CAAC"}

package/lib-esm/ui/dialog/dialog.module.css

@@ -3,6 +3,17 @@
   align-items: center;
   justify-content: center;
   z-index: var(--layer-xxhigh);
+  opacity: 0;
+  transition: var(--transition-out);
+}
+
+.backdrop[data-enter] {
+  opacity: 1;
+  transition: var(--transition-in);
+}
+
+.backdrop[data-leave] {
+  pointer-events: none;
 }
 
 .backdrop::before {
@@ -27,6 +38,17 @@
   background: var(--color-background);
   box-shadow: 0 0 var(--space-medium) var(--color-shadow);
   z-index: var(--layer-xxhigh);
+  opacity: 0;
+  transition: var(--transition-out);
+}
+
+.dialog[data-enter] {
+  opacity: 1;
+  transition: var(--transition-in);
+}
+
+.digalog[data-leave] {
+  pointer-events: none;
 }
 
 .header {

package/lib-esm/ui/dropdown/dropdown.js

@@ -3,16 +3,17 @@ import cx from 'classnames';
 import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
 import { Button, BUTTON_SIZE } from '../button';
 import css from './dropdown.module.css';
+import { Icon } from '../icon';
 export const DropdownItem = (props) => {
     const { className = '', isActive = false, ...restProps } = props;
     return (React.createElement(MenuItem, { className: cx(css.item, className, isActive && css.itemActive), ...restProps }));
 };
 export const Dropdown = (props) => {
-    const { className = '', dropdownClassName = '', label = null, ariaLabel = '', glyph = '', disabled = false, placement, gutter = 4, shift, children, } = props;
+    const { className = '', dropdownClassName = '', label = null, ariaLabel = '', glyph = '', showChevron = true, disabled = false, placement, gutter = 4, shift, children, } = props;
     const dropdownAriaLabel = ariaLabel || (typeof label === 'string' ? label : '');
-    const menuState = useMenuState({ placement, gutter, shift });
+    const menuState = useMenuState({ animated: true, placement, gutter, shift });
     return (React.createElement(React.Fragment, null,
-        React.createElement(MenuButton, { as: Button, outline: true, size: BUTTON_SIZE.SMALL, glyph: glyph, disabled: disabled, state: menuState, tabIndex: null, className: cx(css.button, className) }, label),
+        React.createElement(MenuButton, { as: Button, outline: true, size: BUTTON_SIZE.SMALL, glyph: glyph, rightGlyph: showChevron ? Icon.ICONS.CHEVRON_DOWN : undefined, disabled: disabled, state: menuState, tabIndex: null, className: cx(css.button, className) }, label),
         React.createElement(Menu, { portal: true, state: menuState, "aria-label": dropdownAriaLabel, className: cx(css.dropdown, dropdownClassName) }, children)));
 };
 //# sourceMappingURL=dropdown.js.map

package/lib-esm/ui/dropdown/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/ui/dropdown/dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAkB,YAAY,EAAE,MAAM,cAAc,CAAC;AAExF,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,GAAG,MAAM,uBAAuB,CAAC;AAMxC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAgE,EAAE,EAAE;IAC/F,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEjE,OAAO,CACL,oBAAC,QAAQ,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,IAAI,GAAG,CAAC,UAAU,CAAC,KAAM,SAAS,GAAI,CAC5F,CAAC;AACJ,CAAC,CAAC;AAaF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAkD,EAAE,EAAE;IAC7E,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,iBAAiB,GAAG,EAAE,EACtB,KAAK,GAAG,IAAI,EACZ,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACV,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,MAAM,GAAG,CAAC,EACV,KAAK,EACL,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,iBAAiB,GAAG,SAAS,IAAI,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAChF,MAAM,SAAS,GAAG,YAAY,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;IAE7D,OAAO,CACL;QACE,oBAAC,UAAU,IACT,EAAE,EAAE,MAAM,EACV,OAAO,QACP,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,IAAI,EACd,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,IAEnC,KAAK,CACK;QACb,oBAAC,IAAI,IACH,MAAM,QACN,KAAK,EAAE,SAAS,gBACJ,iBAAiB,EAC7B,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,QAAQ,EAAE,iBAAiB,CAAC,IAE7C,QAAQ,CACJ,CACN,CACJ,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/ui/dropdown/dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAkB,YAAY,EAAE,MAAM,cAAc,CAAC;AAExF,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,GAAG,MAAM,uBAAuB,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAM/B,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAgE,EAAE,EAAE;IAC/F,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEjE,OAAO,CACL,oBAAC,QAAQ,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,IAAI,GAAG,CAAC,UAAU,CAAC,KAAM,SAAS,GAAI,CAC5F,CAAC;AACJ,CAAC,CAAC;AAcF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAkD,EAAE,EAAE;IAC7E,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,iBAAiB,GAAG,EAAE,EACtB,KAAK,GAAG,IAAI,EACZ,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACV,WAAW,GAAG,IAAI,EAClB,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,MAAM,GAAG,CAAC,EACV,KAAK,EACL,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,iBAAiB,GAAG,SAAS,IAAI,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAChF,MAAM,SAAS,GAAG,YAAY,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;IAE7E,OAAO,CACL;QACE,oBAAC,UAAU,IACT,EAAE,EAAE,MAAM,EACV,OAAO,QACP,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EAC7D,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,IAAI,EACd,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,IAEnC,KAAK,CACK;QACb,oBAAC,IAAI,IACH,MAAM,QACN,KAAK,EAAE,SAAS,gBACJ,iBAAiB,EAC7B,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,QAAQ,EAAE,iBAAiB,CAAC,IAE7C,QAAQ,CACJ,CACN,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/lib-esm/ui/dropdown/dropdown.module.css

@@ -16,6 +16,17 @@
   min-width: 12em;
   z-index: var(--layer-high);
   padding: calc(var(--space-xxxsmall) / 2);
+  opacity: 0;
+  transition: var(--transition-out);
+}
+
+.dropdown[data-enter] {
+  opacity: 1;
+  transition: var(--transition-in);
+}
+
+.dropdown[data-leave] {
+  pointer-events: none;
 }
 
 .dropdown:focus {

package/lib-esm/ui/empty-set/empty-set.js

@@ -10,19 +10,19 @@ export const EmptySet = (props) => {
     const actions = [
         ...(handleResetFilters
             ? [
-                React.createElement(Button, { kind: "primary", type: "button", onClick: handleResetFilters, className: css.action }, I18N.RESET_FILTERS),
+                React.createElement(Button, { key: "reset-filters", kind: "primary", type: "button", onClick: handleResetFilters, className: css.action }, I18N.RESET_FILTERS),
             ]
             : []),
         ...(handleViewAll
             ? [
-                React.createElement(Button, { kind: "primary", type: "button", onClick: handleViewAll, className: css.action }, I18N.VIEW_ALL),
+                React.createElement(Button, { key: "view-all", kind: "primary", type: "button", onClick: handleViewAll, className: css.action }, I18N.VIEW_ALL),
             ]
             : []),
     ];
     return (React.createElement(Stack, { space: "xxxsmall", className: css.root },
         React.createElement("p", null, message),
         filtered &&
-            actions.map((action, index) => (React.createElement(React.Fragment, null,
+            actions.map((action, index) => (React.createElement(React.Fragment, { key: action.key },
                 index > 0 && ' or ',
                 action)))));
 };

package/lib-esm/ui/empty-set/empty-set.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty-set.js","sourceRoot":"","sources":["../../../src/ui/empty-set/empty-set.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,IAAI,MAAM,YAAY,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,GAAG,MAAM,wBAAwB,CAAC;AAEzC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAK,EAAE,EAAE;IAChC,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,kBAAkB,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC;IAEzE,MAAM,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,SAAS,SAAS,CAAC,CAAC,CAAC,MAAM,SAAS,aAAa,CAAC;IACnF,MAAM,OAAO,GAAG;QACd,GAAG,CAAC,kBAAkB;YACpB,CAAC,CAAC;gBACE,oBAAC,MAAM,IAAC,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,GAAG,CAAC,MAAM,IACpF,IAAI,CAAC,aAAa,CACZ;aACV;YACH,CAAC,CAAC,EAAE,CAAC;QACP,GAAG,CAAC,aAAa;YACf,CAAC,CAAC;gBACE,oBAAC,MAAM,IAAC,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,CAAC,MAAM,IAC/E,IAAI,CAAC,QAAQ,CACP;aACV;YACH,CAAC,CAAC,EAAE,CAAC;KACR,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,IAAC,KAAK,EAAC,UAAU,EAAC,SAAS,EAAE,GAAG,CAAC,IAAI;QACzC,+BAAI,OAAO,CAAK;QACf,QAAQ;YACP,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAC7B;gBACG,KAAK,GAAG,CAAC,IAAI,MAAM;gBACnB,MAAM,CACN,CACJ,CAAC,CACE,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,SAAS,GAAG;IACnB,SAAS,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;IACtC,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;IACnC,kBAAkB,EAAE,SAAS,CAAC,IAAI;IAClC,aAAa,EAAE,SAAS,CAAC,IAAI;CAC9B,CAAC;AAEF,QAAQ,CAAC,YAAY,GAAG;IACtB,kBAAkB,EAAE,IAAI;IACxB,aAAa,EAAE,IAAI;CACpB,CAAC"}
+{"version":3,"file":"empty-set.js","sourceRoot":"","sources":["../../../src/ui/empty-set/empty-set.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,IAAI,MAAM,YAAY,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,GAAG,MAAM,wBAAwB,CAAC;AAEzC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAK,EAAE,EAAE;IAChC,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,kBAAkB,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC;IAEzE,MAAM,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,SAAS,SAAS,CAAC,CAAC,CAAC,MAAM,SAAS,aAAa,CAAC;IACnF,MAAM,OAAO,GAAG;QACd,GAAG,CAAC,kBAAkB;YACpB,CAAC,CAAC;gBACE,oBAAC,MAAM,IACL,GAAG,EAAC,eAAe,EACnB,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,kBAAkB,EAC3B,SAAS,EAAE,GAAG,CAAC,MAAM,IAEpB,IAAI,CAAC,aAAa,CACZ;aACV;YACH,CAAC,CAAC,EAAE,CAAC;QACP,GAAG,CAAC,aAAa;YACf,CAAC,CAAC;gBACE,oBAAC,MAAM,IACL,GAAG,EAAC,UAAU,EACd,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,aAAa,EACtB,SAAS,EAAE,GAAG,CAAC,MAAM,IAEpB,IAAI,CAAC,QAAQ,CACP;aACV;YACH,CAAC,CAAC,EAAE,CAAC;KACR,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,IAAC,KAAK,EAAC,UAAU,EAAC,SAAS,EAAE,GAAG,CAAC,IAAI;QACzC,+BAAI,OAAO,CAAK;QACf,QAAQ;YACP,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAC7B,oBAAC,KAAK,CAAC,QAAQ,IAAC,GAAG,EAAE,MAAM,CAAC,GAAG;gBAC5B,KAAK,GAAG,CAAC,IAAI,MAAM;gBACnB,MAAM,CACQ,CAClB,CAAC,CACE,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,SAAS,GAAG;IACnB,SAAS,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;IACtC,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;IACnC,kBAAkB,EAAE,SAAS,CAAC,IAAI;IAClC,aAAa,EAAE,SAAS,CAAC,IAAI;CAC9B,CAAC;AAEF,QAAQ,CAAC,YAAY,GAAG;IACtB,kBAAkB,EAAE,IAAI;IACxB,aAAa,EAAE,IAAI;CACpB,CAAC"}

package/lib-esm/ui/hover-card/hover-card.js

@@ -4,7 +4,7 @@ import { Hovercard, HovercardAnchor, HovercardArrow, useHovercard, useHovercardS
 import css from './hover-card.module.css';
 export const HoverCard = (props) => {
     const { className = '', anchorClassName = '', hoverCardClassName = '', href = '', as = null, label, children, } = props;
-    const state = useHovercardState({ gutter: 8, timeout: 300, placement: 'top' });
+    const state = useHovercardState({ animated: true, gutter: 8, timeout: 300, placement: 'top' });
     const hovercardProps = useHovercard({ state, portal: true });
     const Component = useMemo(() => {
         if (as) {

package/lib-esm/ui/hover-card/hover-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"hover-card.js","sourceRoot":"","sources":["../../../src/ui/hover-card/hover-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,SAAS,EACT,eAAe,EACf,cAAc,EACd,YAAY,EACZ,iBAAiB,GAClB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,GAAG,MAAM,yBAAyB,CAAC;AAY1C,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IACjD,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,eAAe,GAAG,EAAE,EACpB,kBAAkB,GAAG,EAAE,EACvB,IAAI,GAAG,EAAE,EACT,EAAE,GAAG,IAAI,EACT,KAAK,EACL,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;IAC/E,MAAM,cAAc,GAAG,YAAY,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;IAG7D,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,IAAI,EAAE,EAAE,CAAC;YACP,OAAO,EAAE,CAAC;QACZ,CAAC;QAED,IAAI,IAAI,EAAE,CAAC;YACT,OAAO,GAAG,CAAC;QACb,CAAC;QAED,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC;QACrC,oBAAC,eAAe,IACd,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE,eAAe,CAAC,EAC1C,EAAE,EAAE,SAAS,mBACE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IAEjD,KAAK,CACU;QAClB,oBAAC,SAAS,OACJ,cAAc,EAClB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,SAAS,EAAE,kBAAkB,CAAC;YAEhD,oBAAC,cAAc,IAAC,IAAI,EAAE,EAAE,GAAI;YAC3B,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAClE,CACR,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"hover-card.js","sourceRoot":"","sources":["../../../src/ui/hover-card/hover-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,SAAS,EACT,eAAe,EACf,cAAc,EACd,YAAY,EACZ,iBAAiB,GAClB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,GAAG,MAAM,yBAAyB,CAAC;AAY1C,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IACjD,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,eAAe,GAAG,EAAE,EACpB,kBAAkB,GAAG,EAAE,EACvB,IAAI,GAAG,EAAE,EACT,EAAE,GAAG,IAAI,EACT,KAAK,EACL,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,iBAAiB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;IAC/F,MAAM,cAAc,GAAG,YAAY,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;IAG7D,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,IAAI,EAAE,EAAE,CAAC;YACP,OAAO,EAAE,CAAC;QACZ,CAAC;QAED,IAAI,IAAI,EAAE,CAAC;YACT,OAAO,GAAG,CAAC;QACb,CAAC;QAED,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC;QACrC,oBAAC,eAAe,IACd,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE,eAAe,CAAC,EAC1C,EAAE,EAAE,SAAS,mBACE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IAEjD,KAAK,CACU;QAClB,oBAAC,SAAS,OACJ,cAAc,EAClB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,SAAS,EAAE,kBAAkB,CAAC;YAEhD,oBAAC,cAAc,IAAC,IAAI,EAAE,EAAE,GAAI;YAC3B,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAClE,CACR,CACP,CAAC;AACJ,CAAC,CAAC"}

package/lib-esm/ui/hover-card/hover-card.module.css

@@ -5,11 +5,14 @@
 .anchor {
   display: inline-block;
   color: inherit;
+  cursor: default;
   text-decoration: none;
+  transition: var(--transition-out);
 }
 
 .anchor:hover {
   color: var(--color-primary);
+  transition: var(--transition-in);
 }
 
 .anchor:focus {
@@ -27,4 +30,15 @@
   will-change: filter;
   background: var(--color-light);
   font-size: var(--size-small);
+  opacity: 0;
+  transition: var(--transition-out);
+}
+
+.hoverCard[data-enter] {
+  opacity: 1;
+  transition: var(--transition-in);
+}
+
+.hoverCard[data-leave] {
+  pointer-events: none;
 }

package/lib-esm/ui/table/table.module.css

@@ -16,7 +16,6 @@
 
 .root thead th {
   border-width: 0 0 1px;
-  text-transform: uppercase;
   vertical-align: top;
   background: var(--color-highlight);
 }

package/lib-esm/ui/tooltip/tooltip.js

@@ -5,7 +5,7 @@ import css from './tooltip.module.css';
 export const Tooltip = (props) => {
     var _a;
     const { className = '', tooltipClassName = '', title = '', as: Component = 'span', containerRef: ref, ...restProps } = props;
-    const tooltip = useTooltipState({ placement: 'top', timeout: 300 });
+    const tooltip = useTooltipState({ animated: true, placement: 'top', timeout: 300 });
     return (React.createElement(React.Fragment, null,
         React.createElement(UITooltipAnchor, { as: Component, className: cx(css.root, className), state: tooltip, "aria-controls": tooltip.open ? (_a = tooltip.contentElement) === null || _a === void 0 ? void 0 : _a.id : '', ...(ref ? { ref } : {}), ...restProps }),
         title && (React.createElement(UITooltip, { state: tooltip, className: cx(css.tooltip, tooltipClassName) },

package/lib-esm/ui/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/ui/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,aAAa,IAAI,eAAe,EAChC,YAAY,IAAI,cAAc,EAC9B,eAAe,GAChB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,GAAG,MAAM,sBAAsB,CAAC;AAUvC,MAAM,CAAC,MAAM,OAAO,GAAG,CACrB,KAA6E,EAC7E,EAAE;;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,gBAAgB,GAAG,EAAE,EACrB,KAAK,GAAG,EAAE,EACV,EAAE,EAAE,SAAS,GAAG,MAAM,EACtB,YAAY,EAAE,GAAG,EACjB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC;IAEpE,OAAO,CACL;QACE,oBAAC,eAAe,IACd,EAAE,EAAE,SAA8B,EAClC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,EAClC,KAAK,EAAE,OAAO,mBACC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,MAAA,OAAO,CAAC,cAAc,0CAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KACzD,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KACpB,SAAS,GACb;QACD,KAAK,IAAI,CACR,oBAAC,SAAS,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,gBAAgB,CAAC;YACrE,oBAAC,cAAc,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI;YACjE,KAAK,CACI,CACb,CACA,CACJ,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/ui/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,aAAa,IAAI,eAAe,EAChC,YAAY,IAAI,cAAc,EAC9B,eAAe,GAChB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,GAAG,MAAM,sBAAsB,CAAC;AAUvC,MAAM,CAAC,MAAM,OAAO,GAAG,CACrB,KAA6E,EAC7E,EAAE;;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,gBAAgB,GAAG,EAAE,EACrB,KAAK,GAAG,EAAE,EACV,EAAE,EAAE,SAAS,GAAG,MAAM,EACtB,YAAY,EAAE,GAAG,EACjB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,eAAe,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC;IAEpF,OAAO,CACL;QACE,oBAAC,eAAe,IACd,EAAE,EAAE,SAA8B,EAClC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,EAClC,KAAK,EAAE,OAAO,mBACC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,MAAA,OAAO,CAAC,cAAc,0CAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KACzD,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KACpB,SAAS,GACb;QACD,KAAK,IAAI,CACR,oBAAC,SAAS,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,gBAAgB,CAAC;YACrE,oBAAC,cAAc,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI;YACjE,KAAK,CACI,CACb,CACA,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/lib-esm/ui/tooltip/tooltip.module.css

@@ -21,6 +21,17 @@
   text-align: center;
   filter: drop-shadow(var(--shadow-layer));
   will-change: filter;
+  opacity: 0;
+  transition: var(--transition-out);
+}
+
+.tooltip[data-enter] {
+  opacity: 1;
+  transition: var(--transition-in);
+}
+
+.tooltip[data-leave] {
+  pointer-events: none;
 }
 
 .arrow svg {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.22.2",
+  "version": "4.23.0-beta.1",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -18,7 +18,9 @@
     "generate-svg-sprite": "npx svg-sprite -s --si --no-svg-namespace-classnames src/assets/icons/*.svg && mv symbol/svg/sprite.css.svg src/assets/icons.svg",
     "lint": "eslint .",
     "start": "cross-env NODE_ENV=development storybook dev -c ./build/storybook -p 8080",
-    "test": "jest src --passWithNoTests"
+    "serve-storybook": "vite preview --outDir storybook-static --port 8080",
+    "test": "jest src --passWithNoTests",
+    "test-storybook": "vitest run"
   },
   "repository": {
     "type": "git",
@@ -36,32 +38,41 @@
   },
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
-    "@babel/preset-env": "7.29.5",
-    "@babel/preset-react": "7.28.5",
-    "@babel/preset-typescript": "7.28.5",
-    "@storybook/addon-webpack5-compiler-babel": "3.0.6",
-    "@storybook/react": "9.1.15",
-    "@storybook/react-webpack5": "9.1.15",
+    "@babel/preset-env": "8.0.5",
+    "@babel/preset-react": "8.0.1",
+    "@babel/preset-typescript": "8.0.1",
+    "@storybook/addon-vitest": "10.5.10",
+    "@storybook/react": "10.5.10",
+    "@storybook/react-vite": "10.5.10",
     "@types/d3": "7.4.3",
     "@types/react": "18.3.13",
     "@types/react-router-dom": "5.3.3",
+    "@vitejs/plugin-react": "6.1.1",
+    "@vitest/browser": "5.0.0",
+    "@vitest/browser-playwright": "5.0.0",
+    "babel-plugin-polyfill-corejs3": "1.0.0",
     "babel-plugin-require-context-hook": "1.0.0",
     "classnames": "2.5.1",
     "colormap": "2.3.2",
+    "core-js": "3.50.0",
     "cross-env": "10.1.0",
     "hex-rgb": "5.0.0",
     "identity-obj-proxy": "3.0.0",
-    "jest": "29.7.0",
+    "jest": "^30.5.0",
     "jest-date-mock": "1.0.10",
-    "jest-environment-jsdom": "29.7.0",
+    "jest-environment-jsdom": "30.5.1",
     "lodash": "4.18.1",
+    "playwright": "1.63.0",
     "prop-types": "15.8.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-router-dom": "5.3.4",
     "rimraf": "6.1.3",
-    "storybook": "9.1.19",
-    "typescript": "5.9.3"
+    "storybook": "10.5.10",
+    "typescript": "5.9.3",
+    "vite": "8.3.0",
+    "vite-plugin-svgr": "5.2.0",
+    "vitest": "5.0.0"
   },
   "peerDependencies": {
     "classnames": "^2.0.0",
@@ -72,13 +83,13 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.22.2",
+    "@bundle-stats/utils": "^4.23.0-beta.1",
     "ariakit": "2.0.0-next.44",
     "d3": "7.9.0",
     "modern-css-reset": "1.4.0",
-    "react-use": "17.6.0",
+    "react-use": "17.6.1",
     "snarkdown": "2.0.0",
     "use-query-params": "2.2.2"
   },
-  "gitHead": "6696f34f552a50dcafbd7c8054e2b2f07a036068"
+  "gitHead": "5ed30de2bfdfe488b8a5f3490b11d1429d89b6ad"
 }

package/src/app/app.jsx

@@ -10,7 +10,7 @@ import { BundleAssetsTotals } from '../components/bundle-assets-totals';
 import { BundleModules } from '../components/bundle-modules';
 import { BundlePackages } from '../components/bundle-packages';
 import { Insights } from '../components/insights';
-import { MetricsTableTitle } from '../components';
+import { MetricChangeLegend, MetricsTableTitle } from '../components';
 import { Summary } from '../components/summary';
 import { Box } from '../layout/box';
 import { Footer } from '../layout/footer';
@@ -150,6 +150,11 @@ const AppComponent = ({ version, jobs }) => {
   return (
     <JobsProvider jobs={jobs}>
       <Layout jobs={jobs} version={version}>
+        <Container className={css.metricChangeLegendContainer}>
+          <div className={css.metricChangeLegendContainerInner}>
+            <MetricChangeLegend />
+          </div>
+        </Container>
         <Container className={css.summaryContainer}>
           <Summary
             data={jobs[0].summary}

package/src/app/app.module.css

@@ -17,11 +17,21 @@
   border-bottom: 1px solid var(--color-outline);
 }
 
-.summaryContainer {
+.metricChangeLegendContainer {
   padding-top: var(--space-small);
   padding-bottom: var(--space-xxsmall);
 }
 
+.metricChangeLegendContainerInner {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.summaryContainer {
+  padding-top: var(--space-xxsmall);
+  padding-bottom: var(--space-xxsmall);
+}
+
 .tabsContainer {
   border-bottom: 1px solid var(--color-outline);
   background: var(--color-light);

package/src/app/app.stories.tsx

@@ -13,7 +13,7 @@ const CURRENT_SOURCE = {
   webpack: {
     ...currentData.rawData.webpack,
     builtAt: currentData.createdAt,
-    hash: currentData.commit,
+    hash: currentData.rawData.webpack.hash || currentData.commit,
   },
 };
 
@@ -21,7 +21,7 @@ const BASELINE_SOURCE = {
   webpack: {
     ...baselineData.rawData.webpack,
     builtAt: baselineData.createdAt,
-    hash: baselineData.commit,
+    hash: baselineData.rawData.webpack.hash || baselineData.commit,
   },
 };
 

package/src/components/asset-info/asset-info.stories.tsx

@@ -1,23 +1,20 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { action } from 'storybook/actions';
 
 import { getWrapperDecorator } from '../../stories';
 import { AssetInfo } from '.';
 
-export default {
-  title: 'Components/AssetInfo',
-  component: AssetInfo,
-  decorators: [getWrapperDecorator()],
-} as Meta;
-
 const ITEM = {
+  key: 'static/vendor.js',
   label: 'static/vendor.js',
+  biggerIsBetter: false,
   changed: true,
+  isAsset: true,
   isChunk: true,
   isEntry: true,
   isInitial: true,
   isNotPredictive: false,
+  fileType: '',
   runs: [
     {
       name: 'static/vendor.abcd1234.js',
@@ -33,42 +30,53 @@ const ITEM = {
   ],
 };
 
-const Template = (props: Pick<React.ComponentProps<typeof AssetInfo>, 'chunks'>) => (
-  <AssetInfo item={ITEM} labels={['Job #2', 'Job #1']} onClose={action('CLOSE')} {...props} />
-);
+const meta = {
+  title: 'Components/AssetInfo',
+  component: AssetInfo,
+  decorators: [getWrapperDecorator()],
+  args: {
+    item: ITEM,
+    labels: ['Job #2', 'Job #1'],
+    onClose: action('CLOSE'),
+  },
+} satisfies Meta<typeof AssetInfo>;
 
-export const Default: Story = Template.bind({});
+export default meta;
 
-export const WithChunks: Story = Template.bind({});
+type Story = StoryObj<typeof meta>;
 
-WithChunks.args = {
-  chunks: [
-    {
-      id: '1',
-      name: 'vendor',
-    },
-    {
-      id: '2',
-      name: 'app~common~utils~shared',
-    },
-  ],
-};
+export const Default: Story = {};
 
-export const WithFileType: Story = Template.bind({});
+export const WithChunks: Story = {
+  args: {
+    chunks: [
+      {
+        id: '1',
+        name: 'vendor',
+      },
+      {
+        id: '2',
+        name: 'app~common~utils~shared',
+      },
+    ],
+  },
+};
 
-WithFileType.args = {
-  chunks: [
-    {
-      id: '1',
-      name: 'vendor',
+export const WithFileType: Story = {
+  args: {
+    chunks: [
+      {
+        id: '1',
+        name: 'vendor',
+      },
+      {
+        id: '2',
+        name: 'app~common~utils~shared',
+      },
+    ],
+    item: {
+      ...ITEM,
+      fileType: 'JS',
     },
-    {
-      id: '2',
-      name: 'app~common~utils~shared',
-    },
-  ],
-  item: {
-    ...ITEM,
-    fileType: 'JS',
   },
 };

package/src/components/asset-name/asset-name.stories.tsx

@@ -23,9 +23,7 @@ const meta = {
   title: 'Components/AssetName',
   component: AssetName,
   args: {
-    customComponentLink: 'span',
-    filters: {},
-    search: '',
+    EntryComponentLink: 'span',
   },
 } as Meta<typeof AssetName>;
 

package/src/components/asset-not-predictive/asset-not-predictive.stories.tsx

@@ -1,23 +1,30 @@
-import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { AssetNotPredictive } from '.';
 
-export default {
+const meta = {
   title: 'Components/AssetNotPredictive',
   component: AssetNotPredictive,
-};
+} satisfies Meta<typeof AssetNotPredictive>;
 
-export const Default = () => <AssetNotPredictive />;
+export default meta;
 
-const RUNS = [
-  {
-    name: 'static/vendor.abcd1234.js',
-    value: 1024 * 1024 - 1,
-  },
-  {
-    name: 'static/vendor.abcd1234.js',
-    value: 1024 * 1024,
-  },
-] as any;
+type Story = StoryObj<typeof meta>;
 
-export const WithRuns = () => <AssetNotPredictive runs={RUNS} labels={['Job 2', 'Job 1']} />;
+export const Default: Story = {};
+
+export const WithRuns: Story = {
+  args: {
+    runs: [
+      {
+        name: 'static/vendor.abcd1234.js',
+        value: 1024 * 1024 - 1,
+      },
+      {
+        name: 'static/vendor.abcd1234.js',
+        value: 1024 * 1024,
+      },
+    ] as any,
+    labels: ['Job 2', 'Job 1'],
+  },
+};

package/src/components/browsertime-table/browsertime-table.stories.tsx

@@ -0,0 +1,45 @@
+import type React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { createJobs, Job } from '@bundle-stats/utils';
+import * as browsertime from '@bundle-stats/utils/lib-esm/browsertime';
+
+// eslint-disable-next-line import/no-relative-packages
+import browsertimeSourceFixtures from '../../../../../fixtures/browsertime.json';
+import { getWrapperDecorator } from '../../stories';
+import { BrowsertimeTable } from '.';
+
+const browsertimeFixtures = browsertime.filter(browsertimeSourceFixtures);
+
+const JOBS = createJobs([
+  { browsertime: browsertimeFixtures },
+  { browsertime: browsertimeFixtures },
+]);
+
+// BrowsertimeTable is a plain .jsx component with defaultProps instead of
+// inline destructuring defaults, so TS can't infer its props as optional on its own.
+const TypedBrowsertimeTable = BrowsertimeTable as unknown as React.ComponentType<{
+  className?: string;
+  jobs?: Array<Job>;
+}>;
+
+const meta = {
+  title: 'Components/BrowsertimeTable',
+  component: TypedBrowsertimeTable,
+  decorators: [getWrapperDecorator()],
+} satisfies Meta<typeof TypedBrowsertimeTable>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    jobs: JOBS,
+  },
+};
+
+export const NoBaseline: Story = {
+  args: {
+    jobs: [JOBS[1]],
+  },
+};