@dbcdk/react-components 0.0.181 → 0.0.183

package/dist/client.cjs

@@ -40,6 +40,7 @@ var severity_types = require('./constants/severity.types');
 var Textarea = require('./components/forms/text-area/Textarea');
 var AppHeader = require('./components/app-header/AppHeader');
 var Sidebar = require('./components/sidebar/Sidebar');
+var TreeView = require('./components/tree-view/TreeView');
 var nestedFiltering = require('./utils/arrays/nested-filtering');
 var MultiSelect = require('./components/forms/multi-select/MultiSelect');
 var useViewportFill = require('./hooks/useViewportFill');
@@ -59,6 +60,8 @@ var Pagination = require('./components/pagination/Pagination');
 var MetaBar = require('./components/meta-bar/MetaBar');
 var CodeBlock = require('./components/code-block/CodeBlock');
 var JsonViewer = require('./components/json-viewer/JsonViewer');
+var XmlViewer = require('./components/xml-viewer/XmlViewer');
+var LineViewer = require('./components/line-viewer/LineViewer');
 var useTimeDuration = require('./hooks/useTimeDuration');
 var useSorting = require('./hooks/useSorting');
 var usePagination = require('./hooks/usePagination');
@@ -330,6 +333,12 @@ Object.keys(Sidebar).forEach(function (k) {
 		get: function () { return Sidebar[k]; }
 	});
 });
+Object.keys(TreeView).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return TreeView[k]; }
+	});
+});
 Object.keys(nestedFiltering).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,
@@ -444,6 +453,18 @@ Object.keys(JsonViewer).forEach(function (k) {
 		get: function () { return JsonViewer[k]; }
 	});
 });
+Object.keys(XmlViewer).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return XmlViewer[k]; }
+	});
+});
+Object.keys(LineViewer).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return LineViewer[k]; }
+	});
+});
 Object.keys(useTimeDuration).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/client.d.ts

@@ -37,6 +37,7 @@ export * from './constants/severity.types';
 export * from './components/forms/text-area/Textarea';
 export * from './components/app-header/AppHeader';
 export * from './components/sidebar/Sidebar';
+export * from './components/tree-view/TreeView';
 export * from './utils/arrays/nested-filtering';
 export * from './components/forms/multi-select/MultiSelect';
 export * from './hooks/useViewportFill';
@@ -56,6 +57,8 @@ export * from './components/pagination/Pagination';
 export * from './components/meta-bar/MetaBar';
 export * from './components/code-block/CodeBlock';
 export * from './components/json-viewer/JsonViewer';
+export * from './components/xml-viewer/XmlViewer';
+export * from './components/line-viewer/LineViewer';
 export * from './hooks/useTimeDuration';
 export * from './hooks/useSorting';
 export * from './hooks/usePagination';

package/dist/client.js

@@ -38,6 +38,7 @@ export * from './constants/severity.types';
 export * from './components/forms/text-area/Textarea';
 export * from './components/app-header/AppHeader';
 export * from './components/sidebar/Sidebar';
+export * from './components/tree-view/TreeView';
 export * from './utils/arrays/nested-filtering';
 export * from './components/forms/multi-select/MultiSelect';
 export * from './hooks/useViewportFill';
@@ -57,6 +58,8 @@ export * from './components/pagination/Pagination';
 export * from './components/meta-bar/MetaBar';
 export * from './components/code-block/CodeBlock';
 export * from './components/json-viewer/JsonViewer';
+export * from './components/xml-viewer/XmlViewer';
+export * from './components/line-viewer/LineViewer';
 export * from './hooks/useTimeDuration';
 export * from './hooks/useSorting';
 export * from './hooks/usePagination';

package/dist/components/clear-button/ClearButton.cjs

@@ -11,25 +11,48 @@ var styles__default = /*#__PURE__*/_interopDefault(styles);
 function ClearButton({
   onClick,
   ariaLabel = "Ryd",
-  variant = "default"
+  variant = "default",
+  as = "button",
+  revealOnHover = false
 }) {
-  const wrapperClassName = [styles__default.default.clearButton, variant === "header" ? styles__default.default.header : ""].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: wrapperClassName, children: /* @__PURE__ */ jsxRuntime.jsx(
+  const wrapperClassName = [
+    styles__default.default.clearButton,
+    variant === "header" ? styles__default.default.header : "",
+    revealOnHover ? styles__default.default.revealOnHover : ""
+  ].filter(Boolean).join(" ");
+  const handleMouseDown = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  const handleClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onClick == null ? void 0 : onClick(e);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: wrapperClassName, children: as === "span" ? /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: styles__default.default.button,
+      role: "button",
+      tabIndex: 0,
+      "aria-label": ariaLabel,
+      "data-input-role": "clear",
+      onMouseDown: handleMouseDown,
+      onClick: handleClick,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") handleClick(e);
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16 })
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
       className: styles__default.default.button,
       type: "button",
       "aria-label": ariaLabel,
       "data-input-role": "clear",
-      onMouseDown: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      },
-      onClick: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        onClick == null ? void 0 : onClick(e);
-      },
+      onMouseDown: handleMouseDown,
+      onClick: handleClick,
       children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16 })
     }
   ) });

package/dist/components/clear-button/ClearButton.d.ts

@@ -5,6 +5,22 @@ interface ClearButtonProps {
     ariaLabel?: string;
     /** 'header' uses --color-navbar-fg tokens — only meaningful inside/near AppHeader */
     variant?: 'default' | 'header';
+    /**
+     * 'button' (default) renders a native <button>. Pass 'span' when this is
+     * nested inside another interactive <button> (e.g. a Select/MultiSelect/
+     * IntervalSelect trigger) - a <button> descendant of a <button> is invalid
+     * HTML and breaks hydration. The span variant keeps the same class,
+     * click/mousedown handling, and adds role="button" + Enter/Space
+     * activation so it stays keyboard-operable without the invalid nesting.
+     */
+    as?: 'button' | 'span';
+    /**
+     * When true, the button is hidden until the nearest ancestor <button>
+     * (e.g. a Select/MultiSelect/IntervalSelect trigger) is hovered or
+     * contains focus, instead of always being visible whenever there's a
+     * value to clear.
+     */
+    revealOnHover?: boolean;
 }
-export declare function ClearButton({ onClick, ariaLabel, variant, }: ClearButtonProps): ReactNode;
+export declare function ClearButton({ onClick, ariaLabel, variant, as, revealOnHover, }: ClearButtonProps): ReactNode;
 export {};

package/dist/components/clear-button/ClearButton.js

@@ -5,25 +5,48 @@ import styles from './ClearButton.module.css';
 function ClearButton({
   onClick,
   ariaLabel = "Ryd",
-  variant = "default"
+  variant = "default",
+  as = "button",
+  revealOnHover = false
 }) {
-  const wrapperClassName = [styles.clearButton, variant === "header" ? styles.header : ""].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx("span", { className: wrapperClassName, children: /* @__PURE__ */ jsx(
+  const wrapperClassName = [
+    styles.clearButton,
+    variant === "header" ? styles.header : "",
+    revealOnHover ? styles.revealOnHover : ""
+  ].filter(Boolean).join(" ");
+  const handleMouseDown = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  const handleClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onClick == null ? void 0 : onClick(e);
+  };
+  return /* @__PURE__ */ jsx("span", { className: wrapperClassName, children: as === "span" ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: styles.button,
+      role: "button",
+      tabIndex: 0,
+      "aria-label": ariaLabel,
+      "data-input-role": "clear",
+      onMouseDown: handleMouseDown,
+      onClick: handleClick,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") handleClick(e);
+      },
+      children: /* @__PURE__ */ jsx(X, { size: 16 })
+    }
+  ) : /* @__PURE__ */ jsx(
     "button",
     {
       className: styles.button,
       type: "button",
       "aria-label": ariaLabel,
       "data-input-role": "clear",
-      onMouseDown: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      },
-      onClick: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        onClick == null ? void 0 : onClick(e);
-      },
+      onMouseDown: handleMouseDown,
+      onClick: handleClick,
       children: /* @__PURE__ */ jsx(X, { size: 16 })
     }
   ) });

package/dist/components/clear-button/ClearButton.module.css

@@ -33,3 +33,15 @@
   background-color: color-mix(in srgb, var(--color-navbar-fg) 12%, transparent);
   color: var(--color-navbar-fg);
 }
+
+.clearButton.revealOnHover {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--transition-fast) var(--ease-standard);
+}
+
+button:hover .clearButton.revealOnHover,
+button:focus-within .clearButton.revealOnHover {
+  opacity: 1;
+  pointer-events: auto;
+}

package/dist/components/forms/multi-select/MultiSelect.cjs

@@ -156,7 +156,8 @@ function MultiSelect({
                     ClearButton.ClearButton,
                     {
                       onClick: onClear,
-                      variant: variant === "header" ? "header" : "default"
+                      variant: variant === "header" ? "header" : "default",
+                      as: "span"
                     }
                   ) : null,
                   /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--color-fg-subtle)", display: "inline-flex" }, children: icon })

package/dist/components/forms/multi-select/MultiSelect.js

@@ -154,7 +154,8 @@ function MultiSelect({
                     ClearButton,
                     {
                       onClick: onClear,
-                      variant: variant === "header" ? "header" : "default"
+                      variant: variant === "header" ? "header" : "default",
+                      as: "span"
                     }
                   ) : null,
                   /* @__PURE__ */ jsx("span", { style: { color: "var(--color-fg-subtle)", display: "inline-flex" }, children: icon })

package/dist/components/forms/select/Select.cjs

@@ -234,7 +234,9 @@ function Select({
                           ClearButton.ClearButton,
                           {
                             onClick: onClear,
-                            variant: variant === "header" ? "header" : "default"
+                            variant: variant === "header" ? "header" : "default",
+                            as: "span",
+                            revealOnHover: true
                           }
                         ),
                         /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--color-fg-subtle)", display: "inline-flex" }, children: icon })

package/dist/components/forms/select/Select.js

@@ -228,7 +228,9 @@ function Select({
                           ClearButton,
                           {
                             onClick: onClear,
-                            variant: variant === "header" ? "header" : "default"
+                            variant: variant === "header" ? "header" : "default",
+                            as: "span",
+                            revealOnHover: true
                           }
                         ),
                         /* @__PURE__ */ jsx("span", { style: { color: "var(--color-fg-subtle)", display: "inline-flex" }, children: icon })

package/dist/components/interval-select/IntervalSelect.cjs

@@ -158,7 +158,8 @@ function IntervalSelect({
                         ClearButton.ClearButton,
                         {
                           onClick: onClear,
-                          variant: variant === "header" ? "header" : "default"
+                          variant: variant === "header" ? "header" : "default",
+                          as: "span"
                         }
                       ),
                       icon

package/dist/components/interval-select/IntervalSelect.js

@@ -156,7 +156,8 @@ function IntervalSelect({
                         ClearButton,
                         {
                           onClick: onClear,
-                          variant: variant === "header" ? "header" : "default"
+                          variant: variant === "header" ? "header" : "default",
+                          as: "span"
                         }
                       ),
                       icon

package/dist/components/json-viewer/JsonViewer.cjs

@@ -29,7 +29,8 @@ function JsonViewer({
   className,
   maxHeight,
   appearance = "dark",
-  storageKey
+  storageKey,
+  borderless = false
 }) {
   const [queryInput, setQueryInput] = react.useState("");
   const [query, setQuery] = react.useState("");
@@ -100,7 +101,7 @@ function JsonViewer({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "section",
     {
-      className: [styles__default.default.viewer, className].filter(Boolean).join(" "),
+      className: [styles__default.default.viewer, borderless ? styles__default.default.borderless : "", className].filter(Boolean).join(" "),
       "data-appearance": currentAppearance,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(

package/dist/components/json-viewer/JsonViewer.d.ts

@@ -1,4 +1,4 @@
 import type { JSX } from 'react';
 import type { JsonViewerProps } from './types';
 export type { JsonViewerProps } from './types';
-export declare function JsonViewer({ value, defaultExpandedDepth, expandAll, searchDebounceMs, helperText, searchPlaceholder, emptySearchText, className, maxHeight, appearance, storageKey, }: JsonViewerProps): JSX.Element;
+export declare function JsonViewer({ value, defaultExpandedDepth, expandAll, searchDebounceMs, helperText, searchPlaceholder, emptySearchText, className, maxHeight, appearance, storageKey, borderless, }: JsonViewerProps): JSX.Element;

package/dist/components/json-viewer/JsonViewer.js

@@ -23,7 +23,8 @@ function JsonViewer({
   className,
   maxHeight,
   appearance = "dark",
-  storageKey
+  storageKey,
+  borderless = false
 }) {
   const [queryInput, setQueryInput] = useState("");
   const [query, setQuery] = useState("");
@@ -94,7 +95,7 @@ function JsonViewer({
   return /* @__PURE__ */ jsxs(
     "section",
     {
-      className: [styles.viewer, className].filter(Boolean).join(" "),
+      className: [styles.viewer, borderless ? styles.borderless : "", className].filter(Boolean).join(" "),
       "data-appearance": currentAppearance,
       children: [
         /* @__PURE__ */ jsxs(

package/dist/components/json-viewer/JsonViewer.module.css

@@ -51,6 +51,13 @@
   box-shadow: none;
 }
 
+.viewer.borderless {
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  padding: 0;
+}
+
 .toolbar {
   display: grid;
   gap: var(--spacing-xs);

package/dist/components/json-viewer/types.d.ts

@@ -25,6 +25,12 @@ export interface JsonViewerProps {
      * under `${storageKey}:appearance`.
      */
     storageKey?: string;
+    /**
+     * Removes the outer border, shadow, corner radius and padding, so the
+     * viewer sits flush in a container that already provides its own framing
+     * (e.g. a modal).
+     */
+    borderless?: boolean;
 }
 export type JsonNodeProps = {
     keyName?: string;

package/dist/components/line-viewer/LineViewer.cjs

@@ -0,0 +1,174 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var Menu = require('../../components/menu/Menu');
+var Popover = require('../../components/popover/Popover');
+var usePersistentState = require('../../hooks/usePersistentState');
+var styles = require('./LineViewer.module.css');
+var tokenizeLineFormat = require('./tokenizeLineFormat');
+var Button = require('../button/Button');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const TOKEN_CLASS = {
+  tag: styles__default.default.tag,
+  indicator: styles__default.default.indicator,
+  subfieldMarker: styles__default.default.subfieldMarker,
+  subfieldCode: styles__default.default.subfieldCode,
+  value: styles__default.default.value,
+  terminator: styles__default.default.terminator,
+  text: styles__default.default.text,
+  whitespace: void 0
+};
+function LineViewer({
+  lines,
+  size = "md",
+  appearance = "dark",
+  storageKey,
+  borderless = false
+}) {
+  const tokens = react.useMemo(() => tokenizeLineFormat.tokenizeLineFormat(lines), [lines]);
+  const codeRef = react.useRef(null);
+  const { value: currentAppearance, setValue: setCurrentAppearance } = usePersistentState.usePersistentState({
+    initialValue: appearance,
+    storageKey: storageKey ? `${storageKey}:appearance` : void 0,
+    validate: (stored) => stored === "dark" || stored === "light"
+  });
+  const { value: viewMode, setValue: setViewMode } = usePersistentState.usePersistentState({
+    initialValue: "highlighted",
+    storageKey: storageKey ? `${storageKey}:viewMode` : void 0,
+    validate: (stored) => stored === "highlighted" || stored === "raw"
+  });
+  const { value: wrap, setValue: setWrap } = usePersistentState.usePersistentState({
+    initialValue: true,
+    storageKey: storageKey ? `${storageKey}:wrap` : void 0,
+    validate: (stored) => typeof stored === "boolean"
+  });
+  const handleCopy = () => {
+    var _a;
+    (_a = navigator.clipboard) == null ? void 0 : _a.writeText(lines).catch(() => {
+    });
+  };
+  const handleDoubleClick = () => {
+    const el = codeRef.current;
+    const selection = typeof window !== "undefined" ? window.getSelection() : null;
+    if (!el || !selection) return;
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    selection.removeAllRanges();
+    selection.addRange(range);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      className: [styles__default.default.viewer, borderless ? styles__default.default.borderless : ""].filter(Boolean).join(" "),
+      "data-appearance": currentAppearance,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: styles__default.default.toolbar,
+            "data-surface": currentAppearance === "dark" ? "inverse" : void 0,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              Popover.Popover,
+              {
+                matchTriggerWidth: false,
+                minWidth: "200px",
+                trigger: (toggle, _icon, isOpen) => /* @__PURE__ */ jsxRuntime.jsx(
+                  Button.Button,
+                  {
+                    variant: "inline",
+                    "aria-label": "Flere handlinger",
+                    "aria-haspopup": "menu",
+                    "aria-expanded": isOpen ? true : false,
+                    onClick: toggle,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { "aria-hidden": "true" })
+                  }
+                ),
+                children: (close) => /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        setWrap((value) => !value);
+                        close();
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TextWrap, { "aria-hidden": "true" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { children: wrap ? "Ombryd ikke tekst" : "Ombryd tekst" })
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Separator, {}),
+                  /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        setViewMode((mode) => mode === "raw" ? "highlighted" : "raw");
+                        close();
+                      },
+                      children: [
+                        viewMode === "raw" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListTree, { "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code2, { "aria-hidden": "true" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { children: viewMode === "raw" ? "Vis med farver" : "Vis raw" })
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        setCurrentAppearance((value) => value === "dark" ? "light" : "dark");
+                        close();
+                      },
+                      children: [
+                        currentAppearance === "dark" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, { "aria-hidden": "true" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { children: currentAppearance === "dark" ? "Lys visning" : "M\xF8rk visning" })
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Separator, {}),
+                  /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        handleCopy();
+                        close();
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ClipboardCopy, { "aria-hidden": "true" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Kopi\xE9r" })
+                      ]
+                    }
+                  ) })
+                ] })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "pre",
+          {
+            className: [styles__default.default.codePane, styles__default.default[size], wrap ? styles__default.default.wrap : styles__default.default.noWrap].join(" "),
+            tabIndex: 0,
+            onDoubleClick: handleDoubleClick,
+            children: /* @__PURE__ */ jsxRuntime.jsx("code", { ref: codeRef, children: viewMode === "raw" ? lines : tokens.map((token, index) => {
+              const tokenClassName = TOKEN_CLASS[token.type];
+              return tokenClassName ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: tokenClassName, children: token.value }, index) : token.value;
+            }) })
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.LineViewer = LineViewer;

package/dist/components/line-viewer/LineViewer.d.ts

@@ -0,0 +1,20 @@
+import type { JSX } from 'react';
+export type LineViewerAppearance = 'dark' | 'light';
+export interface LineViewerProps {
+    lines: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /** Initial appearance. The user can toggle it via the kebab menu; defaults to 'dark'. */
+    appearance?: LineViewerAppearance;
+    /**
+     * When set, the user's appearance/view-mode/wrap choices are persisted to
+     * localStorage under `${storageKey}:appearance` etc.
+     */
+    storageKey?: string;
+    /**
+     * Removes the outer border, shadow and corner radius, so the viewer sits
+     * flush in a container that already provides its own framing (e.g. a
+     * modal).
+     */
+    borderless?: boolean;
+}
+export declare function LineViewer({ lines, size, appearance, storageKey, borderless, }: LineViewerProps): JSX.Element;