@bundle-stats/ui 4.16.0-beta.1 → 4.16.0-beta.10

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/lib-esm/ui/tabs/tabs.module.css

@@ -10,6 +10,7 @@
   color: var(--color-text-ultra-light);
   font-weight: bold;
   text-decoration: none;
+  cursor: default;
 }
 
 .item::after {

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

@@ -2,8 +2,8 @@ import React from 'react';
 import cx from 'classnames';
 import css from './textarea.module.css';
 export const Textarea = (props) => {
-    const { className = '', previewSource = false, size = '', ...restProps } = props;
-    const rootClassName = cx(css.root, previewSource && css.previewSource, size && css[size], className);
+    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

@@ -1 +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;AAOxC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE;IAC/C,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,aAAa,GAAG,KAAK,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEjF,MAAM,aAAa,GAAG,EAAE,CACtB,GAAG,CAAC,IAAI,EACR,aAAa,IAAI,GAAG,CAAC,aAAa,EAClC,IAAI,IAAI,GAAG,CAAC,IAAI,CAAC,EACjB,SAAS,CACV,CAAC;IAEF,OAAO,kCAAU,SAAS,EAAE,aAAa,KAAM,SAAS,GAAI,CAAC;AAC/D,CAAC,CAAC"}
+{"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

@@ -36,13 +36,6 @@
   color: var(--color-text-light);
 }
 
-/**
- * Source variation
- */
-.previewSource {
-  font-family: var(--font-family-fixed);
-}
-
 /** Size modifier */
 /* default - medium */
 .root {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.16.0-beta.1",
+  "version": "4.16.0-beta.10",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -39,10 +39,10 @@
     "@babel/preset-env": "7.25.7",
     "@babel/preset-react": "7.25.7",
     "@babel/preset-typescript": "7.25.7",
-    "@storybook/addon-essentials": "8.3.4",
+    "@storybook/addon-essentials": "8.3.5",
     "@storybook/addon-webpack5-compiler-babel": "3.0.3",
-    "@storybook/react": "8.3.4",
-    "@storybook/react-webpack5": "8.3.4",
+    "@storybook/react": "8.3.5",
+    "@storybook/react-webpack5": "8.3.5",
     "@types/d3": "7.4.3",
     "@types/react": "18.3.11",
     "@types/react-router-dom": "5.3.3",
@@ -61,7 +61,7 @@
     "react-dom": "18.3.1",
     "react-router-dom": "5.3.4",
     "rimraf": "6.0.1",
-    "storybook": "8.3.4",
+    "storybook": "8.3.5",
     "typescript": "5.6.2",
     "typescript-plugin-css-modules": "5.1.0"
   },
@@ -74,12 +74,13 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.16.0-beta.1",
+    "@bundle-stats/utils": "^4.16.0-beta.10",
     "ariakit": "2.0.0-next.44",
-    "d3": "^7.8.5",
+    "d3": "7.9.0",
     "modern-css-reset": "1.4.0",
-    "react-use": "^17.5.0",
+    "react-use": "17.5.1",
+    "snarkdown": "2.0.0",
     "use-query-params": "2.2.1"
   },
-  "gitHead": "db71907f2916c3bc5f4367041f4368a8f0a47c17"
+  "gitHead": "cb616111c85f4b0d28e4b049fe3f6c7b0d7551d7"
 }

package/src/components/bundle-assets/bundle-assets.jsx

@@ -52,10 +52,10 @@ const DISPLAY_TYPE_GROUPS = {
 
 const getFileTypeFilters = (filters) =>
   Object.entries(FILE_TYPE_LABELS).map(([key, label]) => ({
-    key,
-    label,
-    defaultValue: get(filters, `${ASSET_FILE_TYPE}.${key}`, true),
-  }));
+  key,
+  label,
+  defaultValue: get(filters, `${ASSET_FILE_TYPE}.${key}`, true),
+}));
 
 const getFilters = ({ compareMode, filters }) => ({
   [ASSET_FILTERS.CHANGED]: {
@@ -64,7 +64,7 @@ const getFilters = ({ compareMode, filters }) => ({
     disabled: !compareMode,
   },
   [ASSET_ENTRY_TYPE]: {
-    label: 'Entry type',
+    label: 'Type',
     children: [
       {
         key: ASSET_FILTERS.ENTRY,
@@ -396,7 +396,7 @@ export const BundleAssets = (props) => {
       )}
 
       <Dialog title={I18N.EXPORT} width="wide" state={exportDialog}>
-        {exportDialog.open && <MetricsTableExport items={items} download="bundle-stats--assets"/>}
+        {exportDialog.open && <MetricsTableExport items={items} download="bundle-stats--assets" />}
       </Dialog>
     </>
   );

package/src/components/insights/insights.module.css

@@ -4,6 +4,7 @@
 
 .entry {
   color: inherit;
+  line-height: var(--line-height-heading);
   text-decoration: none;
 }
 

package/src/components/metrics-table-export/metrics-table-export.tsx

@@ -5,7 +5,6 @@ import type { ReportMetricRow } from '@bundle-stats/utils';
 import { Stack } from '../../layout/stack';
 import { Tabs } from '../../ui/tabs';
 import { PreviewSource } from '../preview-source';
-import css from './metrics-table-export.module.css';
 
 const generateSourceJSON = (items: Array<ReportMetricRow>): string => {
   const output = items.map((item) => ({
@@ -54,12 +53,12 @@ const SOURCES = [
   {
     label: 'CSV',
     transformFn: generateSourceCSV,
-    extension: '.csv',
+    extension: 'csv',
   },
   {
     label: 'JSON',
     transformFn: generateSourceJSON,
-    extension: '.json',
+    extension: 'json',
   },
 ];
 
@@ -85,14 +84,14 @@ export const MetricsTableExport = (props: MetricsTableExportProps) => {
           </Tabs.Item>
         ))}
       </Tabs>
-      <div className={css.panels}>
+      <div>
         {SOURCES.map(
           (source) =>
             selectedId === source.label && (
               <PreviewSource
                 source={source.transformFn(items)}
+                rows={20}
                 download={`${download}.${source.extension}`}
-                className={css.panel}
                 key={source.label}
               />
           ),

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);
+  font-family: var(--font-family-fixed);
+}
+
+/** Empty / loading state */
+.isEmpty .content {
+  pointer-events: none;
+  background: var(--color-highlight);
 }

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

@@ -29,7 +29,25 @@ const SOURCE = JSON.stringify(
 
 export const Default: Story = {
   args: {
-    source: SOURCE,
+    source: JSON.stringify(
+      [
+        {
+          label: 'Hey',
+          runs: [
+            { value: 1, name: 'a' },
+            { value: 2, name: 'b' },
+          ],
+        },
+      ],
+      null,
+      2,
+    ),
+    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,28 +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}>
-        {source}
-      </Textarea>
+    <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 readOnly rows={rows} value={source} className={css.content} />
     </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/src/ui/tabs/tabs.module.css

@@ -10,6 +10,7 @@
   color: var(--color-text-ultra-light);
   font-weight: bold;
   text-decoration: none;
+  cursor: default;
 }
 
 .item::after {

package/src/ui/textarea/textarea.module.css

@@ -36,13 +36,6 @@
   color: var(--color-text-light);
 }
 
-/**
- * Source variation
- */
-.previewSource {
-  font-family: var(--font-family-fixed);
-}
-
 /** Size modifier */
 /* default - medium */
 .root {

package/src/ui/textarea/textarea.tsx

@@ -5,19 +5,13 @@ import cx from 'classnames';
 import css from './textarea.module.css';
 
 export type TextareaProps = {
-  previewSource?: boolean;
   size?: 'small' | 'medium' | 'large';
 } & ComponentProps<'textarea'>;
 
 export const Textarea = (props: TextareaProps) => {
-  const { className = '', previewSource = false, size = '', ...restProps } = props;
+  const { className = '', size = '', ...restProps } = props;
 
-  const rootClassName = cx(
-    css.root,
-    previewSource && css.previewSource,
-    size && css[size],
-    className,
-  );
+  const rootClassName = cx(css.root, size && css[size], className);
 
   return <textarea className={rootClassName} {...restProps} />;
 };

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 {};

package/types/ui/textarea/textarea.d.ts

@@ -1,7 +1,6 @@
 import type { ComponentProps } from 'react';
 import React from 'react';
 export type TextareaProps = {
-    previewSource?: boolean;
     size?: 'small' | 'medium' | 'large';
 } & ComponentProps<'textarea'>;
 export declare const Textarea: (props: TextareaProps) => React.JSX.Element;

package/lib/components/metrics-table-export/metrics-table-export.module.css

@@ -1,8 +0,0 @@
-.panels {
-}
-
-.panel {
-  min-height: 320px;
-  height: 60vh;
-  max-height: 480px;
-}

package/lib-esm/components/metrics-table-export/metrics-table-export.module.css

@@ -1,8 +0,0 @@
-.panels {
-}
-
-.panel {
-  min-height: 320px;
-  height: 60vh;
-  max-height: 480px;
-}

package/src/components/metrics-table-export/metrics-table-export.module.css

@@ -1,8 +0,0 @@
-.panels {
-}
-
-.panel {
-  min-height: 320px;
-  height: 60vh;
-  max-height: 480px;
-}