@bundle-stats/ui 4.16.0-beta.3 → 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/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/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.3",
+  "version": "4.16.0-beta.4",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -74,7 +74,7 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.16.0-beta.3",
+    "@bundle-stats/utils": "^4.16.0-beta.4",
     "ariakit": "2.0.0-next.44",
     "d3": "7.9.0",
     "modern-css-reset": "1.4.0",
@@ -82,5 +82,5 @@
     "snarkdown": "2.0.0",
     "use-query-params": "2.2.1"
   },
-  "gitHead": "192202fe9951efa05865b4421e69c9e577d2d6cc"
+  "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/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;