@bundle-stats/ui 4.16.0-beta.2 → 4.16.0-beta.4

package/lib/components/preview-source/preview-source.js

@@ -12,14 +12,17 @@ const control_group_1 = require("../../ui/control-group");
 const tooltip_1 = require("../../ui/tooltip");
 const textarea_1 = require("../../ui/textarea");
 const preview_source_module_css_1 = __importDefault(require("./preview-source.module.css"));
+const DEFAULT_ROWS = 10;
 const PreviewSource = (props) => {
-    const { className = '', source, download = false, ...restProps } = props;
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(preview_source_module_css_1.default.root, className), ...restProps },
-        react_1.default.createElement(control_group_1.ControlGroup, { className: preview_source_module_css_1.default.toolbar },
+    const { className = '', source, rows = DEFAULT_ROWS, download = false, ...restProps } = props;
+    const isEmpty = !source;
+    const rootClassName = (0, classnames_1.default)(preview_source_module_css_1.default.root, className, isEmpty && preview_source_module_css_1.default.isEmpty);
+    return (react_1.default.createElement("div", { className: rootClassName, ...restProps },
+        source && (react_1.default.createElement(control_group_1.ControlGroup, { className: preview_source_module_css_1.default.toolbar },
             react_1.default.createElement(copy_to_clipboard_1.CopyToClipboard, { outline: true, size: "small", text: source }),
             download && (react_1.default.createElement(tooltip_1.Tooltip, { title: `Download ${download}`, className: preview_source_module_css_1.default.downloadTooltip },
-                react_1.default.createElement(button_1.Button, { outline: true, rightGlyph: button_1.BUTTON_GLYPHS.DOWNLOAD, size: "small", as: "a", href: `data:application/json,${encodeURIComponent(source)}`, download: download })))),
-        react_1.default.createElement(textarea_1.Textarea, { previewSource: true, readOnly: true, rows: 12, className: preview_source_module_css_1.default.content }, source)));
+                react_1.default.createElement(button_1.Button, { outline: true, rightGlyph: button_1.BUTTON_GLYPHS.DOWNLOAD, size: "small", as: "a", href: `data:application/json,${encodeURIComponent(source)}`, download: download }))))),
+        react_1.default.createElement(textarea_1.Textarea, { previewSource: true, readOnly: true, rows: rows, className: preview_source_module_css_1.default.content }, source)));
 };
 exports.PreviewSource = PreviewSource;
 //# sourceMappingURL=preview-source.js.map

package/lib/components/preview-source/preview-source.js.map

@@ -1 +1 @@
-{"version":3,"file":"preview-source.js","sourceRoot":"","sources":["../../../src/components/preview-source/preview-source.tsx"],"names":[],"mappings":";;;;;;AACA,kDAA0B;AAC1B,4DAA4B;AAE5B,4CAAwD;AACxD,kEAA6D;AAC7D,0DAAsD;AACtD,8CAA2C;AAC3C,gDAA6C;AAC7C,4FAA8C;AAYvC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAE,EAAE;IACzD,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,MAAM,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEzE,OAAO,CACL,uCAAK,SAAS,EAAE,IAAA,oBAAE,EAAC,mCAAG,CAAC,IAAI,EAAE,SAAS,CAAC,KAAM,SAAS;QACpD,8BAAC,4BAAY,IAAC,SAAS,EAAE,mCAAG,CAAC,OAAO;YAClC,8BAAC,mCAAe,IAAC,OAAO,QAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,MAAM,GAAI;YACrD,QAAQ,IAAI,CACX,8BAAC,iBAAO,IAAC,KAAK,EAAE,YAAY,QAAQ,EAAE,EAAE,SAAS,EAAE,mCAAG,CAAC,eAAe;gBACpE,8BAAC,eAAM,IACL,OAAO,QACP,UAAU,EAAE,sBAAa,CAAC,QAAQ,EAClC,IAAI,EAAC,OAAO,EACZ,EAAE,EAAC,GAAG,EACN,IAAI,EAAE,yBAAyB,kBAAkB,CAAC,MAAM,CAAC,EAAE,EAC3D,QAAQ,EAAE,QAAQ,GAClB,CACM,CACX,CACY;QACf,8BAAC,mBAAQ,IAAC,aAAa,QAAC,QAAQ,QAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,mCAAG,CAAC,OAAO,IAC9D,MAAM,CACE,CACP,CACP,CAAC;AACJ,CAAC,CAAC;AAzBW,QAAA,aAAa,iBAyBxB"}
+{"version":3,"file":"preview-source.js","sourceRoot":"","sources":["../../../src/components/preview-source/preview-source.tsx"],"names":[],"mappings":";;;;;;AACA,kDAA0B;AAC1B,4DAA4B;AAE5B,4CAAwD;AACxD,kEAA6D;AAC7D,0DAAsD;AACtD,8CAA2C;AAC3C,gDAA6C;AAC7C,4FAA8C;AAE9C,MAAM,YAAY,GAAG,EAAE,CAAC;AAgBjB,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAE,EAAE;IACzD,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,MAAM,EAAE,IAAI,GAAG,YAAY,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE9F,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC;IACxB,MAAM,aAAa,GAAG,IAAA,oBAAE,EAAC,mCAAG,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,IAAI,mCAAG,CAAC,OAAO,CAAC,CAAC;IAEtE,OAAO,CACL,uCAAK,SAAS,EAAE,aAAa,KAAM,SAAS;QACzC,MAAM,IAAI,CACT,8BAAC,4BAAY,IAAC,SAAS,EAAE,mCAAG,CAAC,OAAO;YAClC,8BAAC,mCAAe,IAAC,OAAO,QAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,MAAM,GAAI;YACrD,QAAQ,IAAI,CACX,8BAAC,iBAAO,IAAC,KAAK,EAAE,YAAY,QAAQ,EAAE,EAAE,SAAS,EAAE,mCAAG,CAAC,eAAe;gBACpE,8BAAC,eAAM,IACL,OAAO,QACP,UAAU,EAAE,sBAAa,CAAC,QAAQ,EAClC,IAAI,EAAC,OAAO,EACZ,EAAE,EAAC,GAAG,EACN,IAAI,EAAE,yBAAyB,kBAAkB,CAAC,MAAM,CAAC,EAAE,EAC3D,QAAQ,EAAE,QAAQ,GAClB,CACM,CACX,CACY,CAChB;QACD,8BAAC,mBAAQ,IAAC,aAAa,QAAC,QAAQ,QAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,mCAAG,CAAC,OAAO,IAChE,MAAM,CACE,CACP,CACP,CAAC;AACJ,CAAC,CAAC;AA9BW,QAAA,aAAa,iBA8BxB"}

package/lib/components/preview-source/preview-source.module.css

@@ -7,6 +7,8 @@
   z-index: 2;
   top: var(--space-xsmall);
   right: var(--space-xsmall);
+  background: var(--color-background);
+  border-radius: var(--radius-medium);
 }
 
 /** fix control group with nested components */
@@ -21,8 +23,18 @@
   box-shadow: none;
 }
 
+/** Source content */
 .content {
   position: relative;
   z-index: 1;
   height: 100%;
+  background: var(--color-highlight);
+  color: var(--color-text);
+}
+
+/** Empty / loading state */
+.isEmpty .content {
+  pointer-events: none;
+  background: var(--skeleton-block-background);
+  opacity: var(--skeleton-opacity);
 }

package/lib/css/variables.css

@@ -201,6 +201,10 @@
 
   --outline-hover: 0 0 0 var(--space-xxxsmall) var(--color-highlight);
 
+  --skeleton-inline-background: linear-gradient(transparent 10%, currentColor 10.1%, currentColor 89.9%, transparent 90%);
+  --skeleton-block-background: currentColor;
+  --skeleton-opacity: 0.06;
+
   /** Layout */
   --max-width: 88rem;
   --entry-info-width: 64rem;

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

@@ -61,11 +61,11 @@
 
 /** Width variation */
 .width--narrow {
-  max-width: 480px;
+  max-width: 360px;
 }
 
 .width--medium {
-  max-width: 748px;
+  max-width: 640px;
 }
 
 .width--wide {
@@ -73,7 +73,7 @@
 }
 
 .width--extra-wide {
-  max-width: var(--max-width);
+  max-width: calc(var(--max-width) + 2 * var(--space-medium));
 }
 
 /** Center variation */

package/lib/ui/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tooltip = exports.Textarea = exports.Tag = exports.Tabs = exports.Table = exports.Skeleton = exports.Loader = exports.InputSearch = exports.Input = exports.Icon = exports.HoverCard = exports.Filters = exports.FileName = exports.EmptySet = exports.Dropdown = exports.Dialog = exports.ControlGroup = exports.Container = exports.CopyToClipboard = exports.Button = exports.Alert = void 0;
+exports.Tooltip = exports.Textarea = exports.Tag = exports.Tabs = exports.Table = exports.Skeleton = exports.Markdown = exports.Loader = exports.InputSearch = exports.Input = exports.Icon = exports.HoverCard = exports.Filters = exports.FileName = exports.EmptySet = exports.Dropdown = exports.Dialog = exports.ControlGroup = exports.Container = exports.CopyToClipboard = exports.Button = exports.Alert = void 0;
 var alert_1 = require("./alert");
 Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return alert_1.Alert; } });
 var button_1 = require("./button");
@@ -31,6 +31,8 @@ var input_search_1 = require("./input-search");
 Object.defineProperty(exports, "InputSearch", { enumerable: true, get: function () { return input_search_1.InputSearch; } });
 var loader_1 = require("./loader");
 Object.defineProperty(exports, "Loader", { enumerable: true, get: function () { return loader_1.Loader; } });
+var markdown_1 = require("./markdown");
+Object.defineProperty(exports, "Markdown", { enumerable: true, get: function () { return markdown_1.Markdown; } });
 var skeleton_1 = require("./skeleton");
 Object.defineProperty(exports, "Skeleton", { enumerable: true, get: function () { return skeleton_1.Skeleton; } });
 var table_1 = require("./table");

package/lib/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.js"],"names":[],"mappings":";;;AAAA,iCAAgC;AAAvB,8FAAA,KAAK,OAAA;AACd,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,yDAAsD;AAA7C,oHAAA,eAAe,OAAA;AACxB,yCAAwC;AAA/B,sGAAA,SAAS,OAAA;AAClB,iDAA+C;AAAtC,6GAAA,YAAY,OAAA;AACrB,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,yCAAuC;AAA9B,qGAAA,QAAQ,OAAA;AACjB,yCAAuC;AAA9B,qGAAA,QAAQ,OAAA;AACjB,qCAAoC;AAA3B,kGAAA,OAAO,OAAA;AAChB,2CAAyC;AAAhC,uGAAA,SAAS,OAAA;AAClB,+BAA8B;AAArB,4FAAA,IAAI,OAAA;AACb,iCAAgC;AAAvB,8FAAA,KAAK,OAAA;AACd,+CAA6C;AAApC,2GAAA,WAAW,OAAA;AACpB,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,iCAAgC;AAAvB,8FAAA,KAAK,OAAA;AACd,+BAA8B;AAArB,4FAAA,IAAI,OAAA;AACb,6BAA4B;AAAnB,0FAAA,GAAG,OAAA;AACZ,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,qCAAoC;AAA3B,kGAAA,OAAO,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.js"],"names":[],"mappings":";;;AAAA,iCAAgC;AAAvB,8FAAA,KAAK,OAAA;AACd,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,yDAAsD;AAA7C,oHAAA,eAAe,OAAA;AACxB,yCAAwC;AAA/B,sGAAA,SAAS,OAAA;AAClB,iDAA+C;AAAtC,6GAAA,YAAY,OAAA;AACrB,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,yCAAuC;AAA9B,qGAAA,QAAQ,OAAA;AACjB,yCAAuC;AAA9B,qGAAA,QAAQ,OAAA;AACjB,qCAAoC;AAA3B,kGAAA,OAAO,OAAA;AAChB,2CAAyC;AAAhC,uGAAA,SAAS,OAAA;AAClB,+BAA8B;AAArB,4FAAA,IAAI,OAAA;AACb,iCAAgC;AAAvB,8FAAA,KAAK,OAAA;AACd,+CAA6C;AAApC,2GAAA,WAAW,OAAA;AACpB,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,iCAAgC;AAAvB,8FAAA,KAAK,OAAA;AACd,+BAA8B;AAArB,4FAAA,IAAI,OAAA;AACb,6BAA4B;AAAnB,0FAAA,GAAG,OAAA;AACZ,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,qCAAoC;AAA3B,kGAAA,OAAO,OAAA"}

package/lib/ui/markdown/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./markdown"), exports);
+//# sourceMappingURL=index.js.map

package/lib/ui/markdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/markdown/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,6CAA2B"}

package/lib/ui/markdown/markdown.js

@@ -0,0 +1,40 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Markdown = void 0;
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const snarkdown_1 = __importDefault(require("snarkdown"));
+const markdown_module_css_1 = __importDefault(require("./markdown.module.css"));
+const Markdown = (props) => {
+    const { className = '', content = '', as: Component = 'div', ...restProps } = props;
+    const html = (0, react_1.useMemo)(() => (0, snarkdown_1.default)(content), [content]);
+    return (react_1.default.createElement(Component, { className: (0, classnames_1.default)(markdown_module_css_1.default.root, className), ...restProps, dangerouslySetInnerHTML: { __html: html } }));
+};
+exports.Markdown = Markdown;
+//# sourceMappingURL=markdown.js.map

package/lib/ui/markdown/markdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown.js","sourceRoot":"","sources":["../../../src/ui/markdown/markdown.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAoE;AACpE,4DAA4B;AAC5B,0DAAkC;AAElC,gFAAwC;AAOjC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE;IAC/C,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,OAAO,GAAG,EAAE,EAAE,EAAE,EAAE,SAAS,GAAG,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEpF,MAAM,IAAI,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAA,mBAAS,EAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAE1D,OAAO,CACL,8BAAC,SAAS,IACR,SAAS,EAAE,IAAA,oBAAE,EAAC,6BAAG,CAAC,IAAI,EAAE,SAAS,CAAC,KAC9B,SAAS,EACb,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GACzC,CACH,CAAC;AACJ,CAAC,CAAC;AAZW,QAAA,QAAQ,YAYnB"}

package/lib/ui/markdown/markdown.module.css

@@ -0,0 +1,7 @@
+.root code {
+  padding: 2px var(--space-xxxsmall);
+  background: var(--color-highlight);
+  outline: 1px solid var(--color-outline);
+  border-radius: var(--radius-small);
+  color: var(--color-text);
+}

package/lib/ui/skeleton/skeleton.module.css

@@ -1,6 +1,6 @@
 .root {
-  background: linear-gradient(transparent 10%, currentColor 10.1%, currentColor 89.9%, transparent 90%);
-  opacity: 0.05;
+  background: var(--skeleton-inline-background);
+  opacity: var(--skeleton-opacity);
   pointer-events: none;
   min-width: 6em;
   border-radius: var(--radius-medium);
@@ -14,5 +14,5 @@
 }
 
 .block {
-  background: currentColor;
+  background: var(--skeleton-block-background);
 }

package/lib-esm/components/preview-source/preview-source.js

@@ -6,13 +6,16 @@ import { ControlGroup } from '../../ui/control-group';
 import { Tooltip } from '../../ui/tooltip';
 import { Textarea } from '../../ui/textarea';
 import css from './preview-source.module.css';
+const DEFAULT_ROWS = 10;
 export const PreviewSource = (props) => {
-    const { className = '', source, download = false, ...restProps } = props;
-    return (React.createElement("div", { className: cx(css.root, className), ...restProps },
-        React.createElement(ControlGroup, { className: css.toolbar },
+    const { className = '', source, rows = DEFAULT_ROWS, download = false, ...restProps } = props;
+    const isEmpty = !source;
+    const rootClassName = cx(css.root, className, isEmpty && css.isEmpty);
+    return (React.createElement("div", { className: rootClassName, ...restProps },
+        source && (React.createElement(ControlGroup, { className: css.toolbar },
             React.createElement(CopyToClipboard, { outline: true, size: "small", text: source }),
             download && (React.createElement(Tooltip, { title: `Download ${download}`, className: css.downloadTooltip },
-                React.createElement(Button, { outline: true, rightGlyph: BUTTON_GLYPHS.DOWNLOAD, size: "small", as: "a", href: `data:application/json,${encodeURIComponent(source)}`, download: download })))),
-        React.createElement(Textarea, { previewSource: true, readOnly: true, rows: 12, className: css.content }, source)));
+                React.createElement(Button, { outline: true, rightGlyph: BUTTON_GLYPHS.DOWNLOAD, size: "small", as: "a", href: `data:application/json,${encodeURIComponent(source)}`, download: download }))))),
+        React.createElement(Textarea, { previewSource: true, readOnly: true, rows: rows, className: css.content }, source)));
 };
 //# sourceMappingURL=preview-source.js.map

package/lib-esm/components/preview-source/preview-source.js.map

@@ -1 +1 @@
-{"version":3,"file":"preview-source.js","sourceRoot":"","sources":["../../../src/components/preview-source/preview-source.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,GAAG,MAAM,6BAA6B,CAAC;AAY9C,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAE,EAAE;IACzD,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,MAAM,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEzE,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,KAAM,SAAS;QACpD,oBAAC,YAAY,IAAC,SAAS,EAAE,GAAG,CAAC,OAAO;YAClC,oBAAC,eAAe,IAAC,OAAO,QAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,MAAM,GAAI;YACrD,QAAQ,IAAI,CACX,oBAAC,OAAO,IAAC,KAAK,EAAE,YAAY,QAAQ,EAAE,EAAE,SAAS,EAAE,GAAG,CAAC,eAAe;gBACpE,oBAAC,MAAM,IACL,OAAO,QACP,UAAU,EAAE,aAAa,CAAC,QAAQ,EAClC,IAAI,EAAC,OAAO,EACZ,EAAE,EAAC,GAAG,EACN,IAAI,EAAE,yBAAyB,kBAAkB,CAAC,MAAM,CAAC,EAAE,EAC3D,QAAQ,EAAE,QAAQ,GAClB,CACM,CACX,CACY;QACf,oBAAC,QAAQ,IAAC,aAAa,QAAC,QAAQ,QAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,CAAC,OAAO,IAC9D,MAAM,CACE,CACP,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"preview-source.js","sourceRoot":"","sources":["../../../src/components/preview-source/preview-source.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,GAAG,MAAM,6BAA6B,CAAC;AAE9C,MAAM,YAAY,GAAG,EAAE,CAAC;AAgBxB,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAE,EAAE;IACzD,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,MAAM,EAAE,IAAI,GAAG,YAAY,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE9F,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC;IACxB,MAAM,aAAa,GAAG,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,IAAI,GAAG,CAAC,OAAO,CAAC,CAAC;IAEtE,OAAO,CACL,6BAAK,SAAS,EAAE,aAAa,KAAM,SAAS;QACzC,MAAM,IAAI,CACT,oBAAC,YAAY,IAAC,SAAS,EAAE,GAAG,CAAC,OAAO;YAClC,oBAAC,eAAe,IAAC,OAAO,QAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,MAAM,GAAI;YACrD,QAAQ,IAAI,CACX,oBAAC,OAAO,IAAC,KAAK,EAAE,YAAY,QAAQ,EAAE,EAAE,SAAS,EAAE,GAAG,CAAC,eAAe;gBACpE,oBAAC,MAAM,IACL,OAAO,QACP,UAAU,EAAE,aAAa,CAAC,QAAQ,EAClC,IAAI,EAAC,OAAO,EACZ,EAAE,EAAC,GAAG,EACN,IAAI,EAAE,yBAAyB,kBAAkB,CAAC,MAAM,CAAC,EAAE,EAC3D,QAAQ,EAAE,QAAQ,GAClB,CACM,CACX,CACY,CAChB;QACD,oBAAC,QAAQ,IAAC,aAAa,QAAC,QAAQ,QAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,CAAC,OAAO,IAChE,MAAM,CACE,CACP,CACP,CAAC;AACJ,CAAC,CAAC"}

package/lib-esm/components/preview-source/preview-source.module.css

@@ -7,6 +7,8 @@
   z-index: 2;
   top: var(--space-xsmall);
   right: var(--space-xsmall);
+  background: var(--color-background);
+  border-radius: var(--radius-medium);
 }
 
 /** fix control group with nested components */
@@ -21,8 +23,18 @@
   box-shadow: none;
 }
 
+/** Source content */
 .content {
   position: relative;
   z-index: 1;
   height: 100%;
+  background: var(--color-highlight);
+  color: var(--color-text);
+}
+
+/** Empty / loading state */
+.isEmpty .content {
+  pointer-events: none;
+  background: var(--skeleton-block-background);
+  opacity: var(--skeleton-opacity);
 }

package/lib-esm/css/variables.css

@@ -201,6 +201,10 @@
 
   --outline-hover: 0 0 0 var(--space-xxxsmall) var(--color-highlight);
 
+  --skeleton-inline-background: linear-gradient(transparent 10%, currentColor 10.1%, currentColor 89.9%, transparent 90%);
+  --skeleton-block-background: currentColor;
+  --skeleton-opacity: 0.06;
+
   /** Layout */
   --max-width: 88rem;
   --entry-info-width: 64rem;

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

@@ -61,11 +61,11 @@
 
 /** Width variation */
 .width--narrow {
-  max-width: 480px;
+  max-width: 360px;
 }
 
 .width--medium {
-  max-width: 748px;
+  max-width: 640px;
 }
 
 .width--wide {
@@ -73,7 +73,7 @@
 }
 
 .width--extra-wide {
-  max-width: var(--max-width);
+  max-width: calc(var(--max-width) + 2 * var(--space-medium));
 }
 
 /** Center variation */

package/lib-esm/ui/index.js

@@ -13,6 +13,7 @@ export { Icon } from './icon';
 export { Input } from './input';
 export { InputSearch } from './input-search';
 export { Loader } from './loader';
+export { Markdown } from './markdown';
 export { Skeleton } from './skeleton';
 export { Table } from './table';
 export { Tabs } from './tabs';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

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

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

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

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

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

@@ -0,0 +1,10 @@
+import React, { useMemo } from 'react';
+import cx from 'classnames';
+import snarkdown from 'snarkdown';
+import css from './markdown.module.css';
+export const Markdown = (props) => {
+    const { className = '', content = '', as: Component = 'div', ...restProps } = props;
+    const html = useMemo(() => snarkdown(content), [content]);
+    return (React.createElement(Component, { className: cx(css.root, className), ...restProps, dangerouslySetInnerHTML: { __html: html } }));
+};
+//# sourceMappingURL=markdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"markdown.js","sourceRoot":"","sources":["../../../src/ui/markdown/markdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA+B,OAAO,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,SAAS,MAAM,WAAW,CAAC;AAElC,OAAO,GAAG,MAAM,uBAAuB,CAAC;AAOxC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE;IAC/C,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,OAAO,GAAG,EAAE,EAAE,EAAE,EAAE,SAAS,GAAG,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEpF,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAE1D,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,KAC9B,SAAS,EACb,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GACzC,CACH,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,7 @@
+.root code {
+  padding: 2px var(--space-xxxsmall);
+  background: var(--color-highlight);
+  outline: 1px solid var(--color-outline);
+  border-radius: var(--radius-small);
+  color: var(--color-text);
+}

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

@@ -1,6 +1,6 @@
 .root {
-  background: linear-gradient(transparent 10%, currentColor 10.1%, currentColor 89.9%, transparent 90%);
-  opacity: 0.05;
+  background: var(--skeleton-inline-background);
+  opacity: var(--skeleton-opacity);
   pointer-events: none;
   min-width: 6em;
   border-radius: var(--radius-medium);
@@ -14,5 +14,5 @@
 }
 
 .block {
-  background: currentColor;
+  background: var(--skeleton-block-background);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.16.0-beta.2",
+  "version": "4.16.0-beta.4",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -74,12 +74,13 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.16.0-beta.2",
+    "@bundle-stats/utils": "^4.16.0-beta.4",
     "ariakit": "2.0.0-next.44",
     "d3": "7.9.0",
     "modern-css-reset": "1.4.0",
     "react-use": "17.5.1",
+    "snarkdown": "2.0.0",
     "use-query-params": "2.2.1"
   },
-  "gitHead": "9dbf2764290e1158a92624a10f693bf2c7866163"
+  "gitHead": "13a47480528282f6f9c2b31bd59c826f61d2828d"
 }

package/src/components/preview-source/preview-source.module.css

@@ -7,6 +7,8 @@
   z-index: 2;
   top: var(--space-xsmall);
   right: var(--space-xsmall);
+  background: var(--color-background);
+  border-radius: var(--radius-medium);
 }
 
 /** fix control group with nested components */
@@ -21,8 +23,18 @@
   box-shadow: none;
 }
 
+/** Source content */
 .content {
   position: relative;
   z-index: 1;
   height: 100%;
+  background: var(--color-highlight);
+  color: var(--color-text);
+}
+
+/** Empty / loading state */
+.isEmpty .content {
+  pointer-events: none;
+  background: var(--skeleton-block-background);
+  opacity: var(--skeleton-opacity);
 }

package/src/components/preview-source/preview-source.stories.tsx

@@ -33,3 +33,9 @@ export const Default: Story = {
     download: 'bundle-stats--assets.json',
   },
 };
+
+export const Empty: Story = {
+  args: {
+    download: 'bundle-stats--assets.json',
+  },
+};

package/src/components/preview-source/preview-source.tsx

@@ -9,8 +9,14 @@ import { Tooltip } from '../../ui/tooltip';
 import { Textarea } from '../../ui/textarea';
 import css from './preview-source.module.css';
 
+const DEFAULT_ROWS = 10;
+
 type PreviewSourceProps = {
-  source: string;
+  source?: string;
+  /**
+   * Textarea rows
+   */
+  rows?: number;
   /**
    * Link download attribute
    * @example
@@ -20,26 +26,31 @@ type PreviewSourceProps = {
 } & ComponentProps<'div'>;
 
 export const PreviewSource = (props: PreviewSourceProps) => {
-  const { className = '', source, download = false, ...restProps } = props;
+  const { className = '', source, rows = DEFAULT_ROWS, download = false, ...restProps } = props;
+
+  const isEmpty = !source;
+  const rootClassName = cx(css.root, className, isEmpty && css.isEmpty);
 
   return (
-    <div className={cx(css.root, className)} {...restProps}>
-      <ControlGroup className={css.toolbar}>
-        <CopyToClipboard outline size="small" text={source} />
-        {download && (
-          <Tooltip title={`Download ${download}`} className={css.downloadTooltip}>
-            <Button
-              outline
-              rightGlyph={BUTTON_GLYPHS.DOWNLOAD}
-              size="small"
-              as="a"
-              href={`data:application/json,${encodeURIComponent(source)}`}
-              download={download}
-            />
-          </Tooltip>
-        )}
-      </ControlGroup>
-      <Textarea previewSource readOnly rows={12} className={css.content}>
+    <div className={rootClassName} {...restProps}>
+      {source && (
+        <ControlGroup className={css.toolbar}>
+          <CopyToClipboard outline size="small" text={source} />
+          {download && (
+            <Tooltip title={`Download ${download}`} className={css.downloadTooltip}>
+              <Button
+                outline
+                rightGlyph={BUTTON_GLYPHS.DOWNLOAD}
+                size="small"
+                as="a"
+                href={`data:application/json,${encodeURIComponent(source)}`}
+                download={download}
+              />
+            </Tooltip>
+          )}
+        </ControlGroup>
+      )}
+      <Textarea previewSource readOnly rows={rows} className={css.content}>
         {source}
       </Textarea>
     </div>

package/src/css/variables.css

@@ -201,6 +201,10 @@
 
   --outline-hover: 0 0 0 var(--space-xxxsmall) var(--color-highlight);
 
+  --skeleton-inline-background: linear-gradient(transparent 10%, currentColor 10.1%, currentColor 89.9%, transparent 90%);
+  --skeleton-block-background: currentColor;
+  --skeleton-opacity: 0.06;
+
   /** Layout */
   --max-width: 88rem;
   --entry-info-width: 64rem;

package/src/ui/dialog/dialog.module.css

@@ -61,11 +61,11 @@
 
 /** Width variation */
 .width--narrow {
-  max-width: 480px;
+  max-width: 360px;
 }
 
 .width--medium {
-  max-width: 748px;
+  max-width: 640px;
 }
 
 .width--wide {
@@ -73,7 +73,7 @@
 }
 
 .width--extra-wide {
-  max-width: var(--max-width);
+  max-width: calc(var(--max-width) + 2 * var(--space-medium));
 }
 
 /** Center variation */

package/src/ui/index.js

@@ -13,6 +13,7 @@ export { Icon } from './icon';
 export { Input } from './input';
 export { InputSearch } from './input-search';
 export { Loader } from './loader';
+export { Markdown } from './markdown';
 export { Skeleton } from './skeleton';
 export { Table } from './table';
 export { Tabs } from './tabs';

package/src/ui/markdown/index.ts

@@ -0,0 +1 @@
+export * from './markdown';

package/src/ui/markdown/markdown.module.css

@@ -0,0 +1,7 @@
+.root code {
+  padding: 2px var(--space-xxxsmall);
+  background: var(--color-highlight);
+  outline: 1px solid var(--color-outline);
+  border-radius: var(--radius-small);
+  color: var(--color-text);
+}

package/src/ui/markdown/markdown.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Markdown } from '.';
+
+const meta: Meta<typeof Markdown> = {
+  title: 'UI/Markdown',
+  component: Markdown,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    content: '**One line** _markdown_ content',
+  },
+};
+
+const MULTI_LINE_MARKDOWN = `
+**Lorem ipsum** dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Habitant morbi tristique senectus et netus et malesuada.
+
+Eget nunc scelerisque viverra mauris in. Ipsum dolor sit amet consectetur adipiscing.
+`;
+
+export const MultiLine: Story = {
+  args: {
+    content: MULTI_LINE_MARKDOWN,
+  },
+};

package/src/ui/markdown/markdown.tsx

@@ -0,0 +1,24 @@
+import React, { ComponentProps, ElementType, useMemo } from 'react';
+import cx from 'classnames';
+import snarkdown from 'snarkdown';
+
+import css from './markdown.module.css';
+
+type MarkdownProps = {
+  content?: string;
+  as?: ElementType;
+} & ComponentProps<'div'>;
+
+export const Markdown = (props: MarkdownProps) => {
+  const { className = '', content = '', as: Component = 'div', ...restProps } = props;
+
+  const html = useMemo(() => snarkdown(content), [content]);
+
+  return (
+    <Component
+      className={cx(css.root, className)}
+      {...restProps}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+};

package/src/ui/skeleton/skeleton.module.css

@@ -1,6 +1,6 @@
 .root {
-  background: linear-gradient(transparent 10%, currentColor 10.1%, currentColor 89.9%, transparent 90%);
-  opacity: 0.05;
+  background: var(--skeleton-inline-background);
+  opacity: var(--skeleton-opacity);
   pointer-events: none;
   min-width: 6em;
   border-radius: var(--radius-medium);
@@ -14,5 +14,5 @@
 }
 
 .block {
-  background: currentColor;
+  background: var(--skeleton-block-background);
 }

package/types/components/preview-source/preview-source.d.ts

@@ -1,7 +1,8 @@
 import type { ComponentProps } from 'react';
 import React from 'react';
 type PreviewSourceProps = {
-    source: string;
+    source?: string;
+    rows?: number;
     download?: string;
 } & ComponentProps<'div'>;
 export declare const PreviewSource: (props: PreviewSourceProps) => React.JSX.Element;

package/types/ui/index.d.ts

@@ -13,6 +13,7 @@ export { Icon } from "./icon";
 export { Input } from "./input";
 export { InputSearch } from "./input-search";
 export { Loader } from "./loader";
+export { Markdown } from "./markdown";
 export { Skeleton } from "./skeleton";
 export { Table } from "./table";
 export { Tabs } from "./tabs";

package/types/ui/markdown/index.d.ts

@@ -0,0 +1 @@
+export * from './markdown';

package/types/ui/markdown/markdown.d.ts

@@ -0,0 +1,7 @@
+import React, { ComponentProps, ElementType } from 'react';
+type MarkdownProps = {
+    content?: string;
+    as?: ElementType;
+} & ComponentProps<'div'>;
+export declare const Markdown: (props: MarkdownProps) => React.JSX.Element;
+export {};