@bundle-stats/ui 4.2.3-beta.0 → 4.2.3-beta.1

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

@@ -1,36 +1,12 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import cx from 'classnames';
+import { KIND, SIZE } from '../../tokens';
 import css from './tag.module.css';
-export const KINDS = {
-    DEFAULT: 'default',
-    SUCCESS: 'success',
-    INFO: 'info',
-    WARNING: 'warning',
-    DANGER: 'danger',
-};
-export const SIZES = {
-    SMALL: 'small',
-    MEDIUM: 'medium',
-    LARGE: 'large',
-};
 export const Tag = (props) => {
-    const { className = '', as: Component = 'span', kind = KINDS.DEFAULT, size = SIZES.MEDIUM, ...restProps } = props;
+    const { className = '', as: Component = 'span', kind = KIND.DEFAULT, size = SIZE.MEDIUM, ...restProps } = props;
     const rootClassName = cx(css.root, className, css[kind], css[size]);
     return React.createElement(Component, { className: rootClassName, ...restProps });
 };
-Tag.propTypes = {
-    className: PropTypes.string,
-    as: PropTypes.elementType,
-    kind: PropTypes.oneOf(Object.values(KINDS)),
-    size: PropTypes.oneOf(Object.values(SIZES)),
-};
-Tag.defaultProps = {
-    className: '',
-    as: 'span',
-    kind: KINDS.DEFAULT,
-    size: SIZES.MEDIUM,
-};
-Tag.KINDS = KINDS;
-Tag.SIZES = SIZES;
+Tag.KINDS = KIND;
+Tag.SIZES = SIZE;
 //# sourceMappingURL=tag.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../../src/ui/tag/tag.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,GAAG,MAAM,kBAAkB,CAAC;AAEnC,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,KAAK,EAAE,EAAE;IAC3B,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,EAAE,EAAE,SAAS,GAAG,MAAM,EACtB,IAAI,GAAG,KAAK,CAAC,OAAO,EACpB,IAAI,GAAG,KAAK,CAAC,MAAM,EACnB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IACV,MAAM,aAAa,GAAG,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;IAEpE,OAAO,oBAAC,SAAS,IAAC,SAAS,EAAE,aAAa,KAAM,SAAS,GAAI,CAAC;AAChE,CAAC,CAAC;AAEF,GAAG,CAAC,SAAS,GAAG;IACd,SAAS,EAAE,SAAS,CAAC,MAAM;IAC3B,EAAE,EAAE,SAAS,CAAC,WAAW;IACzB,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC3C,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;CAC5C,CAAC;AAEF,GAAG,CAAC,YAAY,GAAG;IACjB,SAAS,EAAE,EAAE;IACb,EAAE,EAAE,MAAM;IACV,IAAI,EAAE,KAAK,CAAC,OAAO;IACnB,IAAI,EAAE,KAAK,CAAC,MAAM;CACnB,CAAC;AAEF,GAAG,CAAC,KAAK,GAAG,KAAK,CAAC;AAClB,GAAG,CAAC,KAAK,GAAG,KAAK,CAAC"}
+{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../../src/ui/tag/tag.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,GAAG,MAAM,kBAAkB,CAAC;AAQnC,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,KAAe,EAAE,EAAE;IACrC,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,EAAE,EAAE,SAAS,GAAG,MAAM,EACtB,IAAI,GAAG,IAAI,CAAC,OAAO,EACnB,IAAI,GAAG,IAAI,CAAC,MAAM,EAClB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;IAEpE,OAAO,oBAAC,SAAS,IAAC,SAAS,EAAE,aAAa,KAAM,SAAS,GAAI,CAAC;AAChE,CAAC,CAAC;AAEF,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC;AACjB,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC"}

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

@@ -2,12 +2,26 @@
   display: inline-block;
   font-family: var(--font-family);
   font-weight: bold;
-  background: var(--color-text-light);
+  background: var(--color-text-ultra-light);
   color: var(--color-light);
   text-align: center;
   text-transform: uppercase;
 }
 
+a.root {
+  text-decoration: none;
+  transition: var(--transition-out);
+}
+
+a.root:hover,
+a.root:focus,
+a.root:active {
+  opacity: 0.8;
+  color: var(--color-light);
+  text-decoration: none;
+  transition: var(--transition-in);
+}
+
 /** Kind variation */
 .success {
   background: var(--color-success);
@@ -28,7 +42,7 @@
 /** Size variation */
 /** default: medium */
 .root {
-  border-radius: var(--radius-medium);
+  border-radius: var(--radius-small);
   padding: calc(var(--space-xxxsmall) / 2) var(--space-xxxsmall);
   min-width: var(--space-small);
   height: var(--space-small);
@@ -37,7 +51,7 @@
 }
 
 .small {
-  border-radius: var(--radius-small);
+  border-radius: var(--radius-xsmall);
   padding: calc(var(--space-xxxsmall) / 2);
   height: var(--space-xsmall);
   min-width: var(--space-xsmall);
@@ -46,7 +60,7 @@
 }
 
 .large {
-  border-radius: var(--radius-large);
+  border-radius: var(--radius-medium);
   padding: var(--space-xxxsmall) var(--space-xxsmall);
   min-width: var(--space-medium);
   height: var(--space-medium);

package/lib-esm/ui/textarea/index.js

@@ -0,0 +1,2 @@
+export * from './textarea';
+//# sourceMappingURL=index.js.map

package/lib-esm/ui/textarea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/textarea/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import cx from 'classnames';
+import css from './textarea.module.css';
+export const Textarea = (props) => {
+    const { className = '', size = '', ...restProps } = props;
+    const rootClassName = cx(css.root, size && css[size], className);
+    return React.createElement("textarea", { className: rootClassName, ...restProps });
+};
+//# sourceMappingURL=textarea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/ui/textarea/textarea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,GAAG,MAAM,uBAAuB,CAAC;AAMxC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE;IAC/C,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE1D,MAAM,aAAa,GAAG,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,IAAI,GAAG,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,CAAC;IAEjE,OAAO,kCAAU,SAAS,EAAE,aAAa,KAAM,SAAS,GAAI,CAAC;AAC/D,CAAC,CAAC"}

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

@@ -0,0 +1,56 @@
+.root {
+  border: 1px solid var(--color-outline);
+  border-radius: var(--radius-small);
+  color: var(--color-text-light);
+  width: 100%;
+  resize: vertical;
+  transition: var(--transition-in);
+  appearance: none;
+  outline: none;
+}
+
+.root::-webkit-input-placeholder {
+  color: var(--color-text-light);
+}
+
+.root::-moz-placeholder {
+  color: var(--color-text-light);
+}
+
+.root:-ms-input-placeholder {
+  color: var(--color-text-light);
+}
+
+.root:-moz-placeholder {
+  color: var(--color-text-light);
+}
+
+.root:focus {
+  border-color: var(--color-outline-dark);
+  color: inherit;
+  transition: var(--transition-out);
+}
+
+.root[readonly=""] {
+  color: var(--color-text-light);
+}
+
+/** Size modifier */
+/* default - medium */
+.root {
+  padding: var(--space-xsmall);
+  font-size: var(--size-medium);
+  line-height: calc(var(--space-medium) - 2px);
+}
+
+.small {
+  padding: var(--space-xxsmall);
+  font-size: var(--size-small);
+  line-height: calc(var(--space-small) - 2px);
+}
+
+.large {
+  padding: var(--space-small);
+  font-size: var(--size-large);
+  line-height: calc(var(--space-large) - 2px);
+}

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

@@ -1,6 +1,4 @@
-.root {
-  padding: var(--space-small);
-}
+.root { }
 
 .content {}
 

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/tooltip/index.js"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/tooltip/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}

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

@@ -1,34 +1,15 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Tooltip as UITooltip, TooltipAnchor as UITooltipAnchor, TooltipArrow as UITooltipArrow, useTooltipState, } from 'ariakit/tooltip';
 import css from './tooltip.module.css';
 export const Tooltip = (props) => {
-    const { className, tooltipClassName, title, children, as: Component, containerRef: ref, darkMode, ...restProps } = props;
-    const tooltip = useTooltipState({ placement: 'top' });
+    var _a;
+    const { className = '', tooltipClassName = '', title = '', as: Component = 'span', containerRef: ref, ...restProps } = props;
+    const tooltip = useTooltipState({ placement: 'top', timeout: 300 });
     return (React.createElement(React.Fragment, null,
-        React.createElement(UITooltipAnchor, { as: Component, className: cx(css.root, className), state: tooltip, ...(ref ? { ref } : {}), ...restProps }, children),
-        title && (React.createElement(UITooltip, { state: tooltip, className: cx(css.tooltip, tooltipClassName, darkMode && css.tooltipDarkMode) },
+        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) },
             React.createElement(UITooltipArrow, { state: tooltip, className: css.arrow, size: 12 }),
             title))));
 };
-Tooltip.defaultProps = {
-    className: '',
-    tooltipClassName: '',
-    title: '',
-    as: 'span',
-    containerRef: null,
-    darkMode: true,
-};
-Tooltip.propTypes = {
-    className: PropTypes.string,
-    tooltipClassName: PropTypes.string,
-    title: PropTypes.node,
-    children: PropTypes.node.isRequired,
-    as: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]),
-    containerRef: PropTypes.shape({
-        current: PropTypes.object,
-    }),
-    darkMode: PropTypes.bool,
-};
 //# sourceMappingURL=tooltip.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/ui/tooltip/tooltip.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,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;AAEvC,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAAK,EAAE,EAAE;IAC/B,MAAM,EACJ,SAAS,EACT,gBAAgB,EAChB,KAAK,EACL,QAAQ,EACR,EAAE,EAAE,SAAS,EACb,YAAY,EAAE,GAAG,EACjB,QAAQ,EACR,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;IAEtD,OAAO,CACL;QACE,oBAAC,eAAe,IACd,EAAE,EAAE,SAAS,EACb,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,EAClC,KAAK,EAAE,OAAO,KACV,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KACpB,SAAS,IAEZ,QAAQ,CACO;QACjB,KAAK,IAAI,CACR,oBAAC,SAAS,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,gBAAgB,EAAE,QAAQ,IAAI,GAAG,CAAC,eAAe,CAAC;YACtG,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;AAEF,OAAO,CAAC,YAAY,GAAG;IACrB,SAAS,EAAE,EAAE;IACb,gBAAgB,EAAE,EAAE;IACpB,KAAK,EAAE,EAAE;IACT,EAAE,EAAE,MAAM;IACV,YAAY,EAAE,IAAI;IAClB,QAAQ,EAAE,IAAI;CACf,CAAC;AAEF,OAAO,CAAC,SAAS,GAAG;IAClB,SAAS,EAAE,SAAS,CAAC,MAAM;IAC3B,gBAAgB,EAAE,SAAS,CAAC,MAAM;IAClC,KAAK,EAAE,SAAS,CAAC,IAAI;IACrB,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;IACnC,EAAE,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,OAAO,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;IAC9E,YAAY,EAAE,SAAS,CAAC,KAAK,CAAC;QAC5B,OAAO,EAAE,SAAS,CAAC,MAAM;KAC1B,CAAC;IACF,QAAQ,EAAE,SAAS,CAAC,IAAI;CACzB,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,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"}

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

@@ -11,27 +11,19 @@
 }
 
 .tooltip {
+  z-index: var(--layer-xxhigh);
   padding: var(--space-xxxsmall) var(--space-xxsmall);
-  border-radius: var(--radius-medium);
-  background: var(--color-light);
-  max-width: 24em;
-  color: var(--color-text);
+  border-radius: var(--radius-small);
+  background: var(--color-text);
+  max-width: 28em;
+  color: var(--color-background);
+  font-size: var(--size-small);
+  text-align: center;
   filter: drop-shadow(var(--shadow-layer));
   will-change: filter;
-  font-size: var(--size-xsmall);
-  line-height: var(--space-small);
 }
 
 .arrow svg {
   display: block;
-  fill: var(--color-light);
-}
-
-.tooltipDarkMode {
-  background: var(--color-text);
-  color: var(--color-light);
-}
-
-.tooltipDarkMode .arrow svg {
   fill: var(--color-text);
 }

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

@@ -0,0 +1,8 @@
+.customTooltip {
+  padding: var(--space-large);
+  color: var(--color-danger);
+  font-size: var(--size-large);
+  text-align: left;
+  width: 100vw;
+  max-width: 480px;
+}

package/lib-esm/utils/colors.js

@@ -0,0 +1,15 @@
+import chunk from 'lodash/chunk';
+import COLORS from '../chart-colors.json';
+export function getColors(count = 2) {
+    const chunks = chunk(COLORS, Math.round(COLORS.length / count));
+    return chunks.map((chunkColors, index) => {
+        if (index === 0) {
+            return chunkColors[0];
+        }
+        if (index === chunks.length - 1) {
+            return chunkColors[chunkColors.length - 1];
+        }
+        return chunkColors[Math.floor(chunkColors.length / 2)];
+    });
+}
+//# sourceMappingURL=colors.js.map

package/lib-esm/utils/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../src/utils/colors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,cAAc,CAAC;AAEjC,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAE1C,MAAM,UAAU,SAAS,CAAC,KAAK,GAAG,CAAC;IACjC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC;IAEhE,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE;QACvC,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;YAChB,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC;QACxB,CAAC;QAED,IAAI,KAAK,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAChC,OAAO,WAAW,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAC7C,CAAC;QAED,OAAO,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;IACzD,CAAC,CAAC,CAAC;AACL,CAAC"}

package/lib-esm/utils/components.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import cx from 'classnames';
+export const getRenderChildWithClassName = (className) => (child) => {
+    if (child === null || child === '') {
+        return null;
+    }
+    const { props } = child;
+    if (!props) {
+        return React.createElement("div", { className: className }, child);
+    }
+    return React.cloneElement(child, {
+        ...props,
+        className: cx(className, props.className),
+    });
+};
+//# sourceMappingURL=components.js.map

package/lib-esm/utils/components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../../src/utils/components.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,SAAiB,EAAE,EAAE,CAAC,CAAC,KAAU,EAAE,EAAE;IAC/E,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,EAAE,EAAE,CAAC;QACnC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAExB,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,6BAAK,SAAS,EAAE,SAAS,IAAG,KAAK,CAAO,CAAC;IAClD,CAAC;IAED,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;QAC/B,GAAG,KAAK;QACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;KAC1C,CAAC,CAAC;AACL,CAAC,CAAC"}

package/lib-esm/utils/index.js

@@ -0,0 +1,4 @@
+export * from './colors';
+export * from './jobs';
+export * from './components';
+//# sourceMappingURL=index.js.map

package/lib-esm/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC"}

package/lib-esm/utils/jobs.js

@@ -0,0 +1,11 @@
+import uniqBy from 'lodash/uniqBy';
+export function getJobsChunksData(jobs) {
+    const jobChunks = jobs.map((job) => { var _a, _b; return ((_b = (_a = job === null || job === void 0 ? void 0 : job.meta) === null || _a === void 0 ? void 0 : _a.webpack) === null || _b === void 0 ? void 0 : _b.chunks) || []; });
+    const chunks = uniqBy(jobChunks.flat(), ({ id }) => id);
+    const chunkIds = chunks === null || chunks === void 0 ? void 0 : chunks.map(({ id }) => id);
+    return {
+        chunks,
+        chunkIds,
+    };
+}
+//# sourceMappingURL=jobs.js.map

package/lib-esm/utils/jobs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jobs.js","sourceRoot":"","sources":["../../src/utils/jobs.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,eAAe,CAAC;AAYnC,MAAM,UAAU,iBAAiB,CAAC,IAAgB;IAChD,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,eAAC,OAAA,CAAA,MAAA,MAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,IAAI,0CAAE,OAAO,0CAAE,MAAM,KAAI,EAAE,CAAA,EAAA,CAAC,CAAC;IACtE,MAAM,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC;IACxD,MAAM,QAAQ,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC;IAE7C,OAAO;QACL,MAAM;QACN,QAAQ;KACT,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,26 +1,24 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.2.3-beta.0",
+  "version": "4.2.3-beta.1",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
   "types": "types/index.d.ts",
   "scripts": {
     "build": "npm run build-lib && npm run build-esm && npm run build-assets-lib && npm run build-assets-esm",
-    "prebuild-lib": "npx rimraf ./lib",
-    "build-lib": "../../node_modules/.bin/tsc --rootDir ./src --project tsconfig.lib.json --outDir ./lib",
+    "prebuild-lib": "rimraf ./lib",
+    "build-lib": "tsc --rootDir ./src --project tsconfig.lib.json --outDir ./lib",
     "build-assets-lib": "rsync -arm --include '*/' --include '*.json' --include '*.css' --include 'icons.svg' --exclude '*' src/ lib",
-    "prebuild-esm": "npx rimraf ./lib-esm ./types",
-    "build-esm": "../../node_modules/.bin/tsc --rootDir ./src --project tsconfig.esm.json --outDir ./lib-esm",
+    "prebuild-esm": "rimraf ./lib-esm ./types",
+    "build-esm": "tsc --rootDir ./src --project tsconfig.esm.json --outDir ./lib-esm",
     "build-assets-esm": "rsync -arm --include '*/' --include '*.json' --include '*.css' --include 'icons.svg' --exclude '*' src/ lib-esm",
-    "build-storybook": "npx build-storybook -c ./build/storybook",
+    "build-storybook": "storybook build -c ./build/storybook",
     "generate-chart-colors": "node scripts/generate-chart-colors.js",
-    "generate-svg-sprite": "npx svg-sprite -s --si --no-svg-namespace-classnames src/assets/icons/*.svg && mv symbol/svg/sprite.symbol.svg src/assets/icons.svg",
-    "lint": "../../node_modules/.bin/eslint . --resolve-plugins-relative-to ../../",
-    "start": "cross-env NODE_ENV=development start-storybook -c ./build/storybook -p 8080",
-    "test": "npm run test:unit",
-    "test:unit": "jest src --passWithNoTests",
-    "test:storyshots": "jest build/storybook "
+    "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"
   },
   "repository": {
     "type": "git",
@@ -29,8 +27,8 @@
   "keywords": [],
   "author": {
     "name": "Viorel Cojocaru",
-    "email": "vio@beanon.com",
-    "url": "https://beanon.com"
+    "email": "vio@relative-ci.com",
+    "url": "https://relative-ci.com"
   },
   "license": "MIT",
   "bugs": {
@@ -38,53 +36,50 @@
   },
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
-    "@babel/preset-env": "7.20.2",
-    "@babel/preset-react": "7.18.6",
-    "@storybook/addon-essentials": "6.5.16",
-    "@storybook/addon-knobs": "6.4.0",
-    "@storybook/addon-postcss": "2.0.0",
-    "@storybook/addon-storyshots": "6.5.16",
-    "@storybook/addons": "6.5.16",
-    "@storybook/builder-webpack5": "6.5.16",
-    "@storybook/manager-webpack5": "6.5.16",
-    "@storybook/react": "6.5.16",
-    "@types/react": "18.0.26",
+    "@babel/preset-env": "7.27.2",
+    "@babel/preset-react": "7.27.1",
+    "@babel/preset-typescript": "7.27.1",
+    "@storybook/addon-webpack5-compiler-babel": "3.0.6",
+    "@storybook/react": "9.0.12",
+    "@storybook/react-webpack5": "9.0.12",
+    "@types/d3": "7.4.3",
+    "@types/react": "18.3.13",
+    "@types/react-router-dom": "5.3.3",
     "babel-plugin-require-context-hook": "1.0.0",
-    "classnames": "2.3.2",
+    "classnames": "2.5.1",
     "colormap": "2.3.2",
     "cross-env": "7.0.3",
-    "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.7",
-    "enzyme-to-json": "3.6.2",
     "hex-rgb": "5.0.0",
     "identity-obj-proxy": "3.0.0",
-    "jest": "29.4.3",
-    "jest-date-mock": "1.0.8",
-    "jest-environment-jsdom": "29.4.3",
+    "jest": "29.7.0",
+    "jest-date-mock": "1.0.10",
+    "jest-environment-jsdom": "29.7.0",
     "lodash": "4.17.21",
-    "postcss": "8.4.21",
     "prop-types": "15.8.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-router-dom": "5.3.4",
-    "react-test-renderer": "18.2.0",
-    "rimraf": "4.1.2",
-    "typescript": "4.9.5"
+    "rimraf": "6.0.1",
+    "storybook": "9.0.12",
+    "typescript": "5.8.3",
+    "typescript-plugin-css-modules": "5.1.0"
   },
   "peerDependencies": {
     "classnames": "^2.0.0",
     "lodash": "^4.0.0",
     "prop-types": "^15.0.0",
-    "react": "^17.0.0 | ^18.0.0",
-    "react-dom": "^17.0.0 | ^18.0.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.2.3-beta.0",
-    "ariakit": "2.0.0-next.43",
+    "@bundle-stats/utils": "4.2.3-beta.1",
+    "ariakit": "2.0.0-next.44",
+    "d3": "7.9.0",
     "modern-css-reset": "1.4.0",
-    "query-string": "7.1.3",
-    "use-query-params": "2.2.0"
+    "react-use": "17.6.0",
+    "snarkdown": "2.0.0",
+    "use-query-params": "2.2.1"
   },
-  "gitHead": "a4664a4c6318b73774aae3666f5ae6c778025ea1"
+  "gitHead": "18734a4f1ce353ca150d7e0a40212f44a90c621e"
 }

package/src/app/app-gladys.stories.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { createJobs } from '@bundle-stats/utils';
+
+/* eslint-disable import/no-unresolved, import/no-relative-packages */
+import currentData from '../../../../fixtures/gladys/current.json';
+import baselineData from '../../../../fixtures/gladys/baseline.json';
+import { metaBaseline, metaCurrent } from '../../../../fixtures/meta';
+/* eslint-enable import/no-unresolved, import/no-relative-packages */
+import { App } from '.';
+
+const CURRENT_SOURCE = {
+  ...metaCurrent,
+  webpack: currentData,
+};
+
+const BASELINE_SOURCE = {
+  ...metaBaseline,
+  webpack: baselineData,
+};
+
+const JOBS = createJobs([CURRENT_SOURCE, BASELINE_SOURCE]);
+
+/**
+ * stack: preact-cli, webpack, npm
+ *
+ * - GitHub: https://github.com/GladysAssistant/Gladys
+ * - RelativeCI project: https://app.relative-ci.com/projects/PUROh8FAVkDKmpUrqr4u
+ */
+const meta: Meta<typeof App> = {
+  title: 'App/Gladys',
+  component: App,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    version: '1.0',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof App>;
+
+export const Default: Story = {
+  render: (args) => <App jobs={JOBS} {...args} />,
+};

package/src/app/app-home-assistant.stories.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { createJobs } from '@bundle-stats/utils';
+
+/* eslint-disable import/no-unresolved, import/no-relative-packages */
+import currentData from '../../../../fixtures/home-assistant/current.json';
+import baselineData from '../../../../fixtures/home-assistant/baseline.json';
+import { metaBaseline, metaCurrent } from '../../../../fixtures/meta';
+/* eslint-enable import/no-unresolved, import/no-relative-packages */
+import { App } from '.';
+
+const CURRENT_SOURCE = {
+  ...metaCurrent,
+  webpack: currentData,
+};
+
+const BASELINE_SOURCE = {
+  ...metaBaseline,
+  webpack: baselineData,
+};
+
+const JOBS = createJobs([CURRENT_SOURCE, BASELINE_SOURCE]);
+
+const meta: Meta<typeof App> = {
+  title: 'App/HomeAssistant',
+  component: App,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    version: '1.0',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof App>;
+
+/**
+ * stack: Vite, yarn
+ *
+ * - GitHub: https://github.com/home-assistant/frontend
+ * - RelativeCI project: https://app.relative-ci.com/projects/ZyS69RCzSjYaQA6vUq06
+ */
+export const Default: Story = {
+  render: (args) => <App jobs={JOBS} {...args} />,
+};

package/src/app/app-outline.stories.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { createJobs } from '@bundle-stats/utils';
+
+/* eslint-disable import/no-unresolved, import/no-relative-packages */
+import currentData from '../../../../fixtures/outline/current.json';
+import baselineData from '../../../../fixtures/outline/baseline.json';
+import { metaBaseline, metaCurrent } from '../../../../fixtures/meta';
+/* eslint-enable import/no-unresolved, import/no-relative-packages */
+import { App } from '.';
+
+const CURRENT_SOURCE = {
+  ...metaCurrent,
+  webpack: currentData,
+};
+
+const BASELINE_SOURCE = {
+  ...metaBaseline,
+  webpack: baselineData,
+};
+
+const JOBS = createJobs([CURRENT_SOURCE, BASELINE_SOURCE]);
+
+/**
+ * stack: Vite, yarn
+ *
+ * - GitHub: https://github.com/outline/outline
+ * - RelativeCI project:  https://app.relative-ci.com/projects/TMqufq6bi8qzsOjEHSWY
+ */
+const meta: Meta<typeof App> = {
+  title: 'App/Outline',
+  component: App,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    version: '1.0',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof App>;
+
+export const Default: Story = {
+  render: (args) => <App jobs={JOBS} {...args} />,
+};