@redocly/theme 0.4.14 → 0.4.16

package/lib/utils/jsonToHtml.js

@@ -0,0 +1,180 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLines = exports.jsonToHTML = void 0;
+// Moved from reference-docs
+let level = 0;
+let line = 1;
+const ellipsis = '<span class="ellipsis"></span>';
+const colon = '<span class="colon">: </span>';
+function jsonToHTML(json, maxExpandLevel, startLine = 1) {
+    level = 0;
+    line = startLine;
+    let output = '';
+    output += '<div data-cy="json-sample" class="redoc-json">';
+    output += '<code>';
+    output += getLines(json, maxExpandLevel);
+    output += '</code>';
+    output += '</div>';
+    return output;
+}
+exports.jsonToHTML = jsonToHTML;
+function htmlEncode(t) {
+    return t !== undefined
+        ? t
+            .toString()
+            .replace(/&/g, '&amp;')
+            .replace(/"/g, '&quot;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+        : '';
+}
+function stringifyStringLiteral(str) {
+    return JSON.stringify(str).slice(1, -1);
+}
+function decorateWithSpan(value, className) {
+    return '<span class="' + className + '">' + htmlEncode(value) + '</span>';
+}
+function punctuation(val) {
+    return '<span class="token punctuation">' + val + '</span>';
+}
+function collapser(maxExpandLevel) {
+    const collapsed = level > maxExpandLevel ? 'expand' : 'collapse';
+    return `<button class="collapser" aria-label="${collapsed}"></button>`;
+}
+function getLines(json, maxExpandLevel) {
+    const collapsibleLines = [];
+    const lines = valueToHTML(json, maxExpandLevel, 'root');
+    let nextLine = lines.next();
+    while (!nextLine.done) {
+        collapsibleLines.push(nextLine.value);
+        nextLine = lines.next();
+    }
+    collapsibleLines.push(nextLine.value);
+    return collapsibleLines.join('\n');
+}
+exports.getLines = getLines;
+function* valueToHTML(value, maxExpandLevel, context) {
+    const valueType = typeof value;
+    if (value === undefined || value === null) {
+        return decorateWithSpan('null', 'token keyword');
+    }
+    else if (value && value.constructor === Array) {
+        const length = typeof value.length === 'number' ? value.length : 0;
+        if (!length) {
+            return punctuation('[ ]');
+        }
+        level++;
+        yield context === 'root'
+            ? `<span data-line="${line++}">${punctuation('[')}</span>`
+            : punctuation('[');
+        for (const line of arrayToHTML(value, length, maxExpandLevel)) {
+            yield line;
+        }
+        level--;
+        return `<span data-line="${line++}">${punctuation(']')}</span>`;
+    }
+    else if (value && value.constructor === Date) {
+        return decorateWithSpan('"' + value.toISOString() + '"', 'token string');
+    }
+    else if (valueType === 'object') {
+        const keys = Object.keys(value);
+        if (!keys.length) {
+            return punctuation('{ }');
+        }
+        level++;
+        yield context === 'root'
+            ? `<span data-line="${line++}">${punctuation('{')}</span>`
+            : punctuation('{');
+        for (const line of objectToHTML(value, keys, maxExpandLevel)) {
+            yield line;
+        }
+        level--;
+        return `<span data-line="${line++}">${punctuation('}')}</span>`;
+    }
+    else if (valueType === 'number') {
+        return decorateWithSpan(value, 'token number');
+    }
+    else if (valueType === 'string') {
+        if (/^(http|https):\/\/[^\s]+$/.test(value)) {
+            return (decorateWithSpan('"', 'token string') +
+                `<a href="${encodeURI(value)}">` +
+                htmlEncode(stringifyStringLiteral(value)) +
+                '</a>' +
+                decorateWithSpan('"', 'token string'));
+        }
+        else {
+            return decorateWithSpan('"' + stringifyStringLiteral(value) + '"', 'token string');
+        }
+    }
+    else if (valueType === 'boolean') {
+        return decorateWithSpan(value, 'token boolean');
+    }
+}
+function getLineTemplate({ isFirstKey, isLastKey, nextLine, context, lineTemplate, maxExpandLevel, }) {
+    let lineValue = isFirstKey ? `${ellipsis}<span class="${context} collapsible">` : '';
+    // Create hoverable
+    lineValue += `<span data-line="${line++}" class="${level > maxExpandLevel ? 'hoverable collapsed' : 'hoverable'}">`;
+    // Add collapser button if item has nested lines
+    lineValue += (!nextLine.done && collapser(maxExpandLevel)) || '';
+    lineValue += lineTemplate;
+    lineValue += nextLine.value;
+    // Add punctuation in case we dont have more nested lines and it is not last item
+    lineValue += nextLine.done && !isLastKey ? punctuation(',') : '';
+    // Close hoverable if we dont have nested lines
+    lineValue += nextLine.done ? '</span>' : '';
+    // Close collapsible if value is single line and we are on last item
+    lineValue += nextLine.done && isLastKey ? '</span>' : '';
+    return lineValue;
+}
+function* arrayToHTML(array, arrayLength, maxExpandLevel) {
+    for (let i = 0; i < arrayLength; i++) {
+        const lines = valueToHTML(array[i], maxExpandLevel, 'array');
+        const isFirstKey = i === 0;
+        const isLastKey = i === arrayLength - 1;
+        let nextLine = lines.next();
+        yield getLineTemplate({
+            context: 'array',
+            isFirstKey,
+            isLastKey,
+            nextLine,
+            lineTemplate: '',
+            maxExpandLevel,
+        });
+        nextLine = lines.next();
+        while (!nextLine.done) {
+            yield nextLine.value;
+            nextLine = lines.next();
+        }
+        if (nextLine.value) {
+            // Close hoverable and collapsible (if last array item)
+            yield `${nextLine.value}${i < arrayLength - 1 ? punctuation(',') : '</span>'}</span>`;
+        }
+    }
+}
+function* objectToHTML(object, keys, maxExpandLevel) {
+    for (let i = 0; i < keys.length; i++) {
+        const key = keys[i];
+        const lines = valueToHTML(object[key], maxExpandLevel, 'object');
+        const isFirstKey = i === 0;
+        const isLastKey = i === keys.length - 1;
+        let nextLine = lines.next();
+        yield getLineTemplate({
+            context: 'obj',
+            isFirstKey,
+            isLastKey,
+            nextLine,
+            lineTemplate: `<span class="property token string">"${htmlEncode(key)}"</span>${colon}`,
+            maxExpandLevel,
+        });
+        nextLine = lines.next();
+        while (!nextLine.done) {
+            yield nextLine.value;
+            nextLine = lines.next();
+        }
+        if (nextLine.value) {
+            // Close hoverable and collapsible (if last field)
+            yield `${nextLine.value}${isLastKey ? '</span>' : punctuation(',')}</span>`;
+        }
+    }
+}
+//# sourceMappingURL=jsonToHtml.js.map

package/lib/utils/media-css.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateMediaQueries = exports.breakpoints = void 0;
+exports.breakpoints = { small: '50rem', medium: '85rem', large: '105rem' };
+function generateMediaQueries(breakpoints) {
+    const result = { print: '@media print' };
+    for (const [key, value] of Object.entries(breakpoints)) {
+        result[key] = `@media screen and (min-width: ${value})`;
+    }
+    return result;
+}
+exports.generateMediaQueries = generateMediaQueries;
+//# sourceMappingURL=media-css.js.map

package/{utils → lib/utils}/replaceHashInColor.js

@@ -5,3 +5,4 @@ function replaceHashInColor(color) {
     return color.replace('#', '%23');
 }
 exports.replaceHashInColor = replaceHashInColor;
+//# sourceMappingURL=replaceHashInColor.js.map

package/lib/utils/theme-helpers.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateCodeBlockTokens = exports.typography = exports.getTypographyCssRulesByComponentName = void 0;
+const styled_components_1 = require("styled-components");
+var Token;
+(function (Token) {
+    Token["Comment"] = "comment";
+    Token["Prolog"] = "prolog";
+    Token["Doctype"] = "doctype";
+    Token["Cdata"] = "cdata";
+    Token["Punctuation"] = "punctuation";
+    Token["Property"] = "property";
+    Token["Tag"] = "tag";
+    Token["Number"] = "number";
+    Token["Constant"] = "constant";
+    Token["Symbol"] = "symbol";
+    Token["Boolean"] = "boolean";
+    Token["Selector"] = "selector";
+    Token["String"] = "string";
+    Token["Char"] = "char";
+    Token["Builtin"] = "builtin";
+    Token["Inserted"] = "inserted";
+    Token["Operator"] = "operator";
+    Token["Entity"] = "entity";
+    Token["Url"] = "url";
+    Token["Variable"] = "variable";
+    Token["Atrule"] = "atrule";
+    Token["AttrValue"] = "attr-value";
+    Token["AttrName"] = "attr-name";
+    Token["Keyword"] = "keyword";
+    Token["Regex"] = "regex";
+    Token["Important"] = "important";
+    Token["Bold"] = "bold";
+    Token["Italic"] = "italic";
+    Token["Deleted"] = "deleted";
+})(Token || (Token = {}));
+const typographyProperties = Object.entries({
+    fontSize: 'font-size',
+    fontWeight: 'font-weight',
+    fontFamily: 'font-family',
+    lineHeight: 'line-height',
+    color: 'text-color',
+    textTransform: 'text-transform',
+});
+function getTypographyCssRulesByComponentName(componentName, fallbackName) {
+    const result = {};
+    for (const [styledPropertyName, cssPropertyName] of typographyProperties) {
+        const cssVariable = `--${componentName}-${cssPropertyName}`;
+        const fallbackVariable = fallbackName ? `,var(--${fallbackName}-${cssPropertyName})` : '';
+        result[styledPropertyName] = `var(${cssVariable}${fallbackVariable})`;
+    }
+    return result;
+}
+exports.getTypographyCssRulesByComponentName = getTypographyCssRulesByComponentName;
+function typography(componentName, fallbackName) {
+    return (0, styled_components_1.css) `
+    ${getTypographyCssRulesByComponentName(componentName, fallbackName)}
+  `;
+}
+exports.typography = typography;
+function generateCodeBlockTokens() {
+    let res = '';
+    for (const token of Object.values(Token)) {
+        const cssTokenColorVariableName = `--code-block-tokens-${token}-color`;
+        res += `.token.${token} { color: var(${cssTokenColorVariableName})}; }\n`;
+    }
+    return (0, styled_components_1.css) `
+    pre& {
+      color: var(--code-block-tokens-default-color);
+    }
+    ${res}
+  `;
+}
+exports.generateCodeBlockTokens = generateCodeBlockTokens;
+//# sourceMappingURL=theme-helpers.js.map

package/package.json

@@ -1,11 +1,40 @@
 {
   "name": "@redocly/theme",
-  "version": "0.4.14",
+  "version": "0.4.16",
   "description": "Shared UI components",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",
-  "main": "index.js",
-  "typings": "index.d.ts",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "exports": {
+    ".": "./lib/index.js",
+    "./Sidebar/*": "./lib/Sidebar/*.js",
+    "./*": "./lib/*/index.js",
+    "./src/": "./src/"
+  },
+  "scripts": {
+    "start": "npm-run-all --parallel storybook generate-tokens:watch",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "npm run generate-tokens && build-storybook",
+    "generate-tokens": "ts-node scripts/generate-css-tokens.ts",
+    "generate-tokens:watch": "ts-node-dev --respawn scripts/generate-css-tokens.ts",
+    "clean": "rm -rf lib",
+    "compile": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
+    "build": "npm run clean && npm run compile",
+    "build:on-rebuild": "tsc-alias -p tsconfig.build.json",
+    "build:watch": "npm run clean && tsc-watch --project tsconfig.build.json --onSuccess \"npm run build:on-rebuild\"",
+    "lint": "eslint . --ext .ts,.tsx --cache",
+    "lint:fix": "eslint . --ext .ts,.tsx --fix",
+    "prettier-base": "prettier \"**/*.{json,js,jsx,ts,tsx,yml,yaml,html,md}\"",
+    "prettier": "npm run prettier-base -- --write",
+    "prettier:check": "npm run prettier-base -- --check",
+    "ts:check": "tsc --noEmit --skipLibCheck",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "test:updateSnapshot": "jest --updateSnapshot",
+    "chromatic": "chromatic --exit-zero-on-changes"
+  },
   "peerDependencies": {
     "lodash.throttle": "^4.1.1",
     "prismjs": "^1.28.0",
@@ -15,7 +44,85 @@
     "styled-components": "^5.3.1",
     "styled-system": "^5.1.5"
   },
+  "devDependencies": {
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-interactions": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/addon-viewport": "^6.5.9",
+    "@storybook/addons": "^6.5.9",
+    "@storybook/builder-webpack5": "^6.5.9",
+    "@storybook/core-common": "^6.5.9",
+    "@storybook/manager-webpack5": "^6.5.9",
+    "@storybook/node-logger": "^6.5.9",
+    "@storybook/preset-create-react-app": "^4.1.0",
+    "@storybook/react": "^6.5.9",
+    "@storybook/testing-library": "^0.0.11",
+    "@storybook/theming": "^6.5.9",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^12.1.4",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^29.1.2",
+    "@types/jest-when": "^3.5.2",
+    "@types/lodash.throttle": "^4.1.7",
+    "@types/node": "^16.11.26",
+    "@types/prismjs": "^1.26.0",
+    "@types/react": "^17.0.43",
+    "@types/react-dom": "^17.0.14",
+    "@types/react-router-dom": "^5.3.1",
+    "@types/styled-components": "^5.1.15",
+    "@types/styled-system": "^5.1.13",
+    "@typescript-eslint/eslint-plugin": "^5.23.0",
+    "@typescript-eslint/parser": "^5.23.0",
+    "chromatic": "^6.5.4",
+    "esbuild": "^0.14.38",
+    "jest": "^29.1.2",
+    "jest-environment-jsdom": "^29.1.2",
+    "jest-styled-components": "^7.1.1",
+    "jest-when": "^3.5.1",
+    "lint-staged": "^12.4.1",
+    "lodash": "^4.17.21",
+    "lodash.throttle": "^4.1.1",
+    "npm-run-all": "^4.1.5",
+    "prettier": "2.6.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-refresh": "^0.13.0",
+    "react-router-dom": "^5.3.0",
+    "react-scripts": "5.0.1",
+    "storybook-addon-pseudo-states": "^1.15.1",
+    "storybook-design-token": "^2.1.0",
+    "styled-components": "^5.3.5",
+    "styled-system": "^5.1.5",
+    "ts-jest": "^29.0.3",
+    "ts-node": "^10.7.0",
+    "ts-node-dev": "^1.1.8",
+    "tsc-alias": "^1.6.7",
+    "tsc-watch": "^5.0.3",
+    "tsconfig-paths-webpack-plugin": "^3.5.2",
+    "typescript": "^4.6.4",
+    "webpack": "^5.72.0"
+  },
   "dependencies": {
     "timeago.js": "^4.0.2"
+  },
+  "nx": {
+    "namedInputs": {
+      "prod": [
+        "!{projectRoot}/**/__tests__/**",
+        "!{projectRoot}/**/*.stories.{ts,tsx}"
+      ]
+    },
+    "targets": {
+      "build": {
+        "outputs": [
+          "{projectRoot}/lib"
+        ]
+      },
+      "test": {
+        "outputs": []
+      }
+    }
   }
-}
+}

package/{src/settings.yaml → settings.yaml}

@@ -2,8 +2,8 @@ search:
   hide: false
   placement: navbar
 toc:
+  hide: false
   header:
-    hide: false
     label: On this page
 navigation:
   hide: false

package/src/Button/Button.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import type { FlattenSimpleInterpolation, Keyframes } from 'styled-components';
 import styled, { css, keyframes } from 'styled-components';
 
+import type { FlattenSimpleInterpolation, Keyframes } from 'styled-components';
+
 import { Link } from '@portal/Link';
 
 export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge' | string;

package/src/Cards/Card.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { ResolvedNavItem } from '@theme/types/portal';
-
 import { Link } from '@portal/Link';
 import { H3 } from '@theme/Typography';
+import type { ResolvedNavItem } from '@theme/types/portal';
 
 export interface CardProps {
   title?: string;

package/src/CopyButton/CopyButtonWrapper.tsx

@@ -1,11 +1,10 @@
 import React, { memo } from 'react';
 
-import type { TooltipProps } from '@theme/Tooltip';
-
 import { SamplesControlButton } from '@theme/SamplesPanelControls';
 import { Tooltip } from '@theme/Tooltip';
 import { useControl } from '@theme/hooks';
 import { ClipboardService } from '@theme/utils';
+import type { TooltipProps } from '@theme/Tooltip';
 
 export interface CopyButtonWrapperProps {
   data: unknown;

package/src/Footer/CustomFooter.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { NavGroupRecord, ResolvedNavItem } from '@theme/types/portal';
-
 import { CustomFooterNavItem } from '@theme/Footer/CustomFooterNavItem';
 import { FooterCopyright } from '@theme/Footer/FooterCopyright';
+import type { NavGroupRecord, ResolvedNavItem } from '@theme/types/portal';
 
 interface FooterProps {
   data: NavGroupRecord;

package/src/Footer/CustomFooterNavItem.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { ResolvedNavItem, ResolvedNavLinkItem } from '@theme/types/portal';
-
 import { Link } from '@portal/Link';
+import type { ResolvedNavItem, ResolvedNavLinkItem } from '@theme/types/portal';
 
 interface CustomFooterNavItemProps {
   navItem: ResolvedNavItem;

package/src/Footer/Footer.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { NavGroupRecord, ResolvedNavItem } from '@theme/types/portal';
-
 import { FooterColumns } from '@theme/Footer/FooterColumns';
 import { FooterCopyright } from '@theme/Footer/FooterCopyright';
 import { isEmptyArray } from '@theme/utils';
 import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
+import type { NavGroupRecord, ResolvedNavItem } from '@theme/types/portal';
 
 interface FooterProps {
   data: NavGroupRecord;

package/src/Footer/FooterColumn.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { ResolvedNavItem } from '@theme/types/portal';
-
 import { Link } from '@portal/Link';
+import type { ResolvedNavItem } from '@theme/types/portal';
 
 interface FooterColumnProps {
   column: ResolvedNavItem;

package/src/Footer/FooterColumns.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { ResolvedNavItem } from '@theme/types/portal';
-
 import { FooterColumn } from '@theme/Footer/FooterColumn';
+import type { ResolvedNavItem } from '@theme/types/portal';
 
 interface FooterColumnsProps {
   columns: ResolvedNavItem[];

package/src/JsonViewer/JsonViewer.tsx

@@ -1,7 +1,8 @@
-import type { ReactElement } from 'react';
 import React, { memo, useRef } from 'react';
 import styled from 'styled-components';
 
+import type { ReactElement } from 'react';
+
 import { CopyButtonWrapper } from '@theme/CopyButton';
 import { SampleControls, SamplesControlButton } from '@theme/SamplesPanelControls';
 import { jsonToHTML } from '@theme/utils';

package/src/LastUpdated/LastUpdated.tsx

@@ -4,28 +4,64 @@ import { format } from 'timeago.js';
 
 import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
 
+const FORMATS = {
+  timeago: (date: Date, locale: string) => format(date, locale),
+  iso: (date: Date) => date.toISOString().split('T')[0],
+  short: (date: Date, locale: string) =>
+    date.toLocaleDateString(locale, { month: 'short', day: 'numeric', year: 'numeric' }),
+  long: (date: Date, locale: string) =>
+    date.toLocaleDateString(locale, { month: 'long', day: 'numeric', year: 'numeric' }),
+};
+
 export interface LastUpdatedProps {
-  lastModified: string | Date;
+  lastModified: Date;
+  format?: keyof typeof FORMATS;
+  locale?: string;
 }
 
-export function LastUpdated({ lastModified }: LastUpdatedProps): JSX.Element | null {
+export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
   const { lastUpdatedBlock } = useDefaultThemeSettings();
 
   if (lastUpdatedBlock?.hide) {
     return null;
   }
 
+  const lastModified = props.lastModified;
+  const format = props.format || lastUpdatedBlock?.format || 'timeago';
+  const locale = props.locale || lastUpdatedBlock?.locale || 'en-US';
+  const isoDate = lastModified.toISOString().split('T')[0];
+
+  const lastUpdatedString = FORMATS[format](lastModified, locale);
+  const separator = format === 'timeago' ? ' ' : ' on ';
+
   return (
-    <Wrapper data-component-name="LastUpdated/LastUpdated">
-      Last updated {format(lastModified)}
+    <Wrapper
+      data-component-name="LastUpdated/LastUpdated"
+      rawOnPrint={format === 'timeago'}
+      data-print-datetime={isoDate}
+    >
+      Last updated{separator}
+      <time dateTime={isoDate}>{lastUpdatedString}</time>
     </Wrapper>
   );
 }
 
-const Wrapper = styled.div`
+const Wrapper = styled.div<{ rawOnPrint?: boolean }>`
   color: var(--last-updated-text-color);
   font-size: var(--last-updated-font-size);
   font-family: var(--last-updated-font-family);
   line-height: var(--last-updated-line-height);
   padding-bottom: 30px;
+
+  ${({ rawOnPrint }) =>
+    rawOnPrint &&
+    `@media print {
+      time {
+        display: none;
+      }
+      &::after {
+        content: attr(data-print-datetime);
+      }
+    }
+  `}
 `;

package/src/Markdown/Heading.tsx

@@ -1,6 +1,7 @@
-import type { PropsWithChildren } from 'react';
 import React, { createElement } from 'react';
 
+import type { PropsWithChildren } from 'react';
+
 import { concatClassNames } from '@theme/utils';
 
 /**

package/src/Markdown/MarkdownLayout.tsx

@@ -10,21 +10,18 @@ import { LastUpdated } from '@theme/LastUpdated/LastUpdated';
 type MarkdownLayoutProps = {
   tableOfContent: React.ReactNode;
   markdownWrapper: React.ReactNode;
-  showPrevButton?: boolean;
-  showNextButton?: boolean;
   editPage?: {
     to: string;
     text: string;
     icon: string;
   };
+  /** String in ISO format */
   lastModified?: string | null;
 };
 
 export function MarkdownLayout({
   tableOfContent,
   markdownWrapper,
-  showPrevButton,
-  showNextButton,
   editPage,
   lastModified,
 }: MarkdownLayoutProps): JSX.Element {
@@ -32,13 +29,13 @@ export function MarkdownLayout({
     <PageWrapper data-component-name="Markdown/MarkdownLayout">
       <ContainerWrapper withToc={true}>
         <LayoutTop>
-          {lastModified && <LastUpdated lastModified={lastModified} />}
+          {lastModified && <LastUpdated lastModified={new Date(lastModified)} />}
           {editPage && (
             <EditPageButton text={editPage.text} to={editPage.to} icon={editPage.icon} />
           )}
         </LayoutTop>
         {markdownWrapper}
-        <PageNavigation showPrevButton={showPrevButton} showNextButton={showNextButton} />
+        <PageNavigation />
       </ContainerWrapper>
       {tableOfContent}
     </PageWrapper>

package/src/Markdown/MarkdownWrapper.tsx

@@ -1,6 +1,7 @@
-import type { FlattenSimpleInterpolation } from 'styled-components';
 import styled, { css } from 'styled-components';
 
+import type { FlattenSimpleInterpolation } from 'styled-components';
+
 import { typography } from '@theme/utils';
 
 export const baseTable = css`