@redocly/theme 0.74.2-pingfed.3 → 0.81.2-rc.2

package/lib/components/JsonViewer/JsonViewer.js

@@ -26,86 +26,51 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.JsonViewerWrap = exports.JsonViewer = exports.Json = void 0;
+exports.JsonViewerWrap = exports.JsonViewer = void 0;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const utils_1 = require("../../utils");
-const hooks_1 = require("../../hooks");
-const CodeBlock_1 = require("../../components/CodeBlock");
-function JsonComponent({ data, jsonSampleExpandLevel, className, withLineNumbers, startLineNumber, onCopyClick, }) {
-    const node = (0, react_1.useRef)(null);
-    (0, hooks_1.useMount)(() => {
-        var _a;
-        (_a = node === null || node === void 0 ? void 0 : node.current) === null || _a === void 0 ? void 0 : _a.addEventListener('click', clickListener);
-    });
-    (0, hooks_1.useUnmount)(() => {
-        var _a;
-        (_a = node === null || node === void 0 ? void 0 : node.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', clickListener);
-    });
-    const setRef = (instance) => {
-        if (instance)
-            node.current = instance;
-    };
+const CodeBlock_1 = require("../../components/CodeBlock/CodeBlock");
+const helpers_1 = require("./helpers");
+function JsonComponent({ data, expandLevel = 1, className, onCopyClick }) {
     const showFoldingButtons = data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
+    const [expandAllSignal, setExpandAllSignal] = react_1.default.useState(undefined);
     const expandAll = () => {
-        var _a, _b;
-        const elements = (_a = node === null || node === void 0 ? void 0 : node.current) === null || _a === void 0 ? void 0 : _a.getElementsByClassName('collapsible');
-        for (const collapsed of Array.prototype.slice.call(elements)) {
-            const parentNode = collapsed.parentNode;
-            if (!parentNode)
-                continue;
-            parentNode.classList.remove('collapsed');
-            (_b = parentNode.querySelector('.collapser')) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-label', 'collapse');
-        }
+        setExpandAllSignal(true);
+        setTimeout(() => {
+            setExpandAllSignal(undefined);
+        });
     };
     const collapseAll = () => {
-        var _a, _b;
-        const elements = (_a = node === null || node === void 0 ? void 0 : node.current) === null || _a === void 0 ? void 0 : _a.getElementsByClassName('collapsible');
-        // skip first item to avoid collapsing whole object/array
-        const elementsArr = Array.prototype.slice.call(elements, 1);
-        for (const expanded of elementsArr) {
-            const parentNode = expanded.parentNode;
-            if (!parentNode)
-                continue;
-            parentNode.classList.add('collapsed');
-            (_b = parentNode.querySelector('.collapser')) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-label', 'expand');
-        }
-    };
-    const collapseElement = (target) => {
-        var _a, _b;
-        if (target.parentElement && target.className === 'collapser') {
-            const collapsed = target.parentElement.getElementsByClassName('collapsible')[0];
-            if ((_a = collapsed === null || collapsed === void 0 ? void 0 : collapsed.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains('collapsed')) {
-                collapsed.parentElement.classList.remove('collapsed');
-                target.setAttribute('aria-label', 'collapse');
-            }
-            else {
-                (_b = collapsed === null || collapsed === void 0 ? void 0 : collapsed.parentElement) === null || _b === void 0 ? void 0 : _b.classList.add('collapsed');
-                target.setAttribute('aria-label', 'expand');
-            }
-        }
-    };
-    const clickListener = (event) => {
-        collapseElement(event.target);
+        setExpandAllSignal(false);
+        setTimeout(() => {
+            setExpandAllSignal(undefined);
+        });
     };
-    return (react_1.default.createElement(exports.JsonViewerWrap, { "data-cy": "json-viewer", "data-component-name": "JsonViewer/JsonViewer", className: className },
+    const source = JSON.stringify(data, null, 2);
+    return (react_1.default.createElement(exports.JsonViewerWrap, { "data-testid": "json-viewer", "data-component-name": "JsonViewer/JsonViewer", className: className },
         react_1.default.createElement(CodeBlock_1.CodeBlock, { header: {
+                className: 'code-block-header',
                 controls: {
                     copy: { data, onClick: onCopyClick, handleOutside: true },
                     expand: showFoldingButtons ? { onClick: expandAll } : undefined,
                     collapse: showFoldingButtons ? { onClick: collapseAll } : undefined,
                 },
-            }, codeBlockRef: setRef, withLineNumbers: withLineNumbers, highlightedHtml: (0, utils_1.jsonToHTML)(data, jsonSampleExpandLevel, startLineNumber) })));
+            }, source: source },
+            react_1.default.createElement(FoldingWrap, null,
+                react_1.default.createElement(helpers_1.JsonValue, { value: data, level: 0, standalone: true, expandAllSignal: expandAllSignal, defaultExpandLevel: Math.max(1, expandLevel) })))));
 }
-exports.Json = (0, react_1.memo)(JsonComponent);
-exports.JsonViewer = (0, styled_components_1.default)(exports.Json).attrs(() => ({
-    'data-component-name': 'JsonViewer/JsonViewer',
-})) `
-  .redoc-json code {
-    background-color: var(--panel-samples-code-block-background-color);
-    color: var(--text-secondary);
-    padding: inherit;
+exports.JsonViewer = (0, react_1.memo)(JsonComponent);
+const FoldingWrap = styled_components_1.default.div `
+  position: relative;
+`;
+exports.JsonViewerWrap = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+
+  & > div {
     border: none;
+    margin: 0;
   }
 
   pre {
@@ -113,109 +78,11 @@ exports.JsonViewer = (0, styled_components_1.default)(exports.Json).attrs(() =>
     overflow-x: auto;
     position: relative;
     border-radius: 0 0 var(--border-radius) var(--border-radius);
+  }
 
-    &.line-numbers {
-      padding: 20px 20px 20px 3em;
-
-      *[data-line]:not(.collapsed *[data-line]) {
-        &:before {
-          content: attr(data-line);
-          position: absolute;
-          left: 0;
-          min-width: 2em;
-          text-align: right;
-          pointer-events: none;
-          user-select: none;
-          padding: 0 0.5em;
-          font-size: 13px;
-        }
-      }
-    }
-
-    .callback-function {
-      color: gray;
-    }
-
-    .ellipsis:after {
-      content: ' … ';
-    }
-
-    .collapsible {
-      padding-left: 2ch;
-      display: inline-block;
-    }
-
-    .hoverable {
-      padding: 1px 2px;
-      display: inline-block;
-    }
-
-    .collapsed {
-      white-space: nowrap;
-
-      & > .collapser:after {
-        content: '+';
-      }
-    }
-
-    .hovered {
-      background-color: rgba(235, 238, 249, 1);
-    }
-
-    .collapser {
-      --size: 15px;
-      --margin-right: 3px;
-
-      display: inline-block;
-      background-color: transparent;
-      border: 0;
-      padding: 1px;
-      color: var(--text-secondary);
-      width: var(--size);
-      height: var(--size);
-      margin-left: calc((var(--size) + var(--margin-right)) * -1);
-      margin-right: var(--margin-right);
-      cursor: pointer;
-      user-select: none;
-      -webkit-user-select: none;
-      font-family: var(--code-font-family);
-      font-size: var(--code-font-size);
-
-      &:after {
-        content: '-';
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        width: 100%;
-      }
-
-      &:focus {
-        outline: #fff dotted 1px;
-      }
-    }
-
-    .selected {
-      outline-width: 1px;
-      outline-style: dotted;
-    }
-
-    .collapsed > .collapsible {
-      display: none;
-    }
-
-    .ellipsis {
-      display: none;
-    }
-
-    .collapsed > .ellipsis {
-      display: inline;
-    }
+  .code-block-header {
+    border-bottom: 0;
+    padding-right: var(--spacing-sm);
   }
 `;
-exports.JsonViewerWrap = styled_components_1.default.div `
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-`;
 //# sourceMappingURL=JsonViewer.js.map

package/lib/components/JsonViewer/helpers.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare function JsonValue(props: {
+    value: any;
+    level: number;
+    standalone?: boolean;
+    defaultExpandLevel: number;
+    expandAllSignal: boolean | undefined;
+}): React.ReactNode;

package/lib/components/JsonViewer/helpers.js

@@ -0,0 +1,131 @@
+"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.JsonValue = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Button_1 = require("../../components/Button/Button");
+const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon");
+function JsonValue(props) {
+    const { standalone, defaultExpandLevel, level, value, expandAllSignal } = props;
+    const indent = ' '.repeat(level * 2);
+    const [isExpandedState, setExpanded] = react_1.default.useState(expandAllSignal !== null && expandAllSignal !== void 0 ? expandAllSignal : level < defaultExpandLevel);
+    const isExpanded = expandAllSignal !== undefined && level > 0 ? expandAllSignal : isExpandedState;
+    (0, react_1.useEffect)(() => {
+        if (expandAllSignal !== undefined) {
+            if (expandAllSignal === false && level === 0) {
+                return;
+            }
+            setExpanded(expandAllSignal);
+        }
+    }, [expandAllSignal, level]);
+    const keys = (value && Object.keys(value).filter((key) => value[key] !== undefined)) || []; // filter out undefined properties
+    const valueType = typeof value;
+    const isPrimitive = (valueType !== 'object' && value !== null) || keys.length === 0;
+    if (isPrimitive) {
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            standalone ? indent : null,
+            react_1.default.createElement("span", { className: 'token ' + valueType }, JSON.stringify(value))));
+    }
+    const openingPunctuation = Array.isArray(value) ? '[' : '{';
+    const closingPunctuation = Array.isArray(value) ? ']' : '}';
+    const valueElement = Array.isArray(value)
+        ? value.map((item, index) => (react_1.default.createElement(react_1.default.Fragment, { key: index },
+            react_1.default.createElement(JsonValue, { value: item, level: level + 1, standalone: true, defaultExpandLevel: defaultExpandLevel, expandAllSignal: expandAllSignal }),
+            index < value.length - 1 ? ',\n' : null)))
+        : keys.map((key, index) => (react_1.default.createElement(react_1.default.Fragment, { key: key },
+            react_1.default.createElement(JsonKeyValue, { name: key, value: value[key], level: level + 1, defaultExpandLevel: defaultExpandLevel, expandAllSignal: expandAllSignal }),
+            index < keys.length - 1 ? ',\n' : null)));
+    const openingPunctuationElement = standalone ? (react_1.default.createElement(react_1.default.Fragment, null,
+        indent,
+        level > 0 ? (react_1.default.createElement(ExpandIcon, { onClick: () => setExpanded((v) => !v), isExpanded: isExpanded })) : null,
+        openingPunctuation,
+        isExpanded ? '\n' : null)) : null;
+    const closingPunctuationElement = standalone ? (react_1.default.createElement(react_1.default.Fragment, null,
+        isExpanded ? '\n' : '',
+        isExpanded ? indent : '',
+        closingPunctuation)) : null;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        openingPunctuationElement,
+        isExpanded || !standalone ? valueElement : ' … ',
+        closingPunctuationElement));
+}
+exports.JsonValue = JsonValue;
+function JsonKeyValue(props) {
+    const { defaultExpandLevel, level, name, value, expandAllSignal } = props;
+    const indent = ' '.repeat(level * 2);
+    const keys = (value && Object.keys(value).filter((key) => value[key] !== undefined)) || []; // filter out undefined properties
+    const isCollapsible = typeof value === 'object' && value !== null && keys.length > 0;
+    const [isExpandedState, setExpanded] = react_1.default.useState(expandAllSignal !== null && expandAllSignal !== void 0 ? expandAllSignal : level < defaultExpandLevel);
+    const isExpanded = expandAllSignal !== undefined ? expandAllSignal : isExpandedState;
+    (0, react_1.useEffect)(() => {
+        if (expandAllSignal !== undefined) {
+            setExpanded(expandAllSignal);
+        }
+    }, [expandAllSignal]);
+    const openingPunctuation = Array.isArray(value) ? '[' : '{';
+    const closingPunctuation = Array.isArray(value) ? ']' : '}';
+    const valueElement = isCollapsible ? (react_1.default.createElement(react_1.default.Fragment, null,
+        openingPunctuation,
+        isExpanded ? (react_1.default.createElement(react_1.default.Fragment, null,
+            '\n',
+            react_1.default.createElement(JsonValue, { value: value, level: level, defaultExpandLevel: defaultExpandLevel, expandAllSignal: expandAllSignal }),
+            '\n')) : (' … '),
+        isExpanded ? indent : null,
+        closingPunctuation)) : (react_1.default.createElement(JsonValue, { value: value, level: level, defaultExpandLevel: defaultExpandLevel, expandAllSignal: expandAllSignal }));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        indent,
+        isCollapsible ? (react_1.default.createElement(ExpandIcon, { onClick: () => setExpanded((v) => !v), isExpanded: isExpanded })) : null,
+        react_1.default.createElement("span", { className: "property token string" }, `"${name}"`),
+        ": ",
+        valueElement));
+}
+function ExpandIcon({ isExpanded, onClick, }) {
+    return (react_1.default.createElement(ExpandButton, { "aria-label": "collapse", className: isExpanded ? 'expanded' : '', size: "small", variant: "text", onClick: onClick, icon: react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { color: "var(--text-color-helper)" }) }));
+}
+const ExpandButton = (0, styled_components_1.default)(Button_1.Button) `
+  position: absolute;
+  left: -10px;
+  user-select: none;
+
+  & > svg {
+    transform: rotate(270deg);
+  }
+
+  &.expanded > svg {
+    transform: none;
+  }
+
+  &&.button-size-small {
+    --button-icon-size: 14px;
+    --button-icon-padding: 3px;
+
+    margin-left: 0;
+  }
+`;
+//# sourceMappingURL=helpers.js.map

package/lib/components/LanguagePicker/LanguagePicker.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+type LanguagePickerProps = {
+    onChangeLanguage: (newLang: string) => void;
+    onlyIcon?: boolean;
+    placement?: 'top' | 'bottom';
+    alignment?: 'start' | 'end';
+};
+export declare function LanguagePicker(props: LanguagePickerProps): JSX.Element | null;
+export {};

package/lib/components/LanguagePicker/LanguagePicker.js

@@ -0,0 +1,79 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LanguagePicker = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
+const utils_1 = require("../../core/utils");
+const hooks_1 = require("../../core/hooks");
+const GlobalOutlinedIcon_1 = require("../../icons/GlobalOutlinedIcon/GlobalOutlinedIcon");
+const Button_1 = require("../../components/Button/Button");
+const Dropdown_1 = require("../../components/Dropdown/Dropdown");
+const CheckmarkIcon_1 = require("../../icons/CheckmarkIcon/CheckmarkIcon");
+function LanguagePicker(props) {
+    const { currentLocale, locales, setLocale } = (0, hooks_1.useLanguagePicker)();
+    const { useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const telemetry = useTelemetry();
+    if (locales.length < 2 || !currentLocale) {
+        return null;
+    }
+    const languagePickerButton = (react_1.default.createElement(Button_1.Button, { icon: react_1.default.createElement(GlobalOutlinedIcon_1.GlobalOutlinedIcon, { color: "--button-content-color" }), variant: "text", size: "medium" }));
+    const languageItems = locales.map((locale) => ({
+        content: locale.name || locale.code || '',
+        onAction: () => {
+            setLocale(locale.code);
+            props.onChangeLanguage(locale.code);
+            telemetry.send('language_picker_locale_changed', { locale: locale.code });
+        },
+        active: locale.code === currentLocale.code,
+        suffix: locale.code === currentLocale.code && react_1.default.createElement(CheckmarkIcon_1.CheckmarkIcon, null),
+    }));
+    return (react_1.default.createElement(LanguageDropdown, { triggerEvent: "click", placement: props.placement, alignment: props.alignment, trigger: languagePickerButton },
+        react_1.default.createElement(DropdownMenu_1.DropdownMenu, { items: languageItems })));
+}
+exports.LanguagePicker = LanguagePicker;
+const LanguageDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown).attrs(() => ({
+    dataAttributes: {
+        'data-component-name': 'LanguagePicker/LanguagePicker',
+    },
+})) `
+  display: none;
+  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
+    display: block;
+  }
+
+  --dropdown-menu-item-justify-content: space-between;
+
+  --dropdown-menu-font-size: var(--language-picker-dropdown-font-size);
+  --dropdown-menu-font-weight: var(--language-picker-dropdown-font-weight);
+  --dropdown-menu-line-height: var(--language-picker-dropdown-line-height);
+  --dropdown-menu-text-color: var(--language-picker-dropdown-text-color);
+  --dropdown-menu-min-width: var(--language-picker-dropdown-min-width);
+  --dropdown-menu-max-width: var(--language-picker-dropdown-max-width);
+  --dropdown-menu-max-height: var(--language-picker-dropdown-max-height);
+  --dropdown-menu-padding: var(--language-picker-dropdown-padding);
+  --dropdown-menu-border-radius: var(--language-picker-dropdown-border-radius);
+  --dropdown-menu-box-shadow: var(--language-picker-dropdown-box-shadow);
+  --dropdown-menu-color-disabled: var(--language-picker-dropdown-color-disabled);
+  --dropdown-menu-border-color: var(--language-picker-dropdown-border-color);
+  --dropdown-menu-bg-color: var(--language-picker-dropdown-bg-color);
+  --dropdown-menu-item-padding-horizontal: var(--language-picker-dropdown-item-padding-horizontal);
+  --dropdown-menu-item-padding-vertical: var(--language-picker-dropdown-item-padding-vertical);
+  --dropdown-menu-item-separator-padding-top: var(
+    --language-picker-dropdown-item-separator-padding-top
+  );
+  --dropdown-menu-item-separator-padding-bottom: var(
+    --language-picker-dropdown-item-separator-padding-bottom
+  );
+  --dropdown-menu-item-border-radius: var(--language-picker-dropdown-item-border-radius);
+  --dropdown-menu-item-bg-color-active: var(--language-picker-dropdown-item-bg-color-active);
+  --dropdown-menu-item-bg-color-hover: var(--language-picker-dropdown-item-bg-color-hover);
+  --dropdown-menu-item-separator-border-color: var(
+    --language-picker-dropdown-item-separator-border-color
+  );
+  --dropdown-menu-item-color-dangerous: var(--language-picker-dropdown-item-color-dangerous);
+`;
+//# sourceMappingURL=LanguagePicker.js.map

package/lib/components/LanguagePicker/variables.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.languagePicker = void 0;
+const styled_components_1 = require("styled-components");
+exports.languagePicker = (0, styled_components_1.css) `
+  /**
+    * @tokens Language picker
+    * */
+  --language-picker-dropdown-font-size: var(--dropdown-menu-font-size); // @presenter FontSize
+  --language-picker-dropdown-font-weight: var(--dropdown-menu-font-weight); // @presenter FontWeight
+  --language-picker-dropdown-line-height: var(--dropdown-menu-line-height); // @presenter LineHeight
+  --language-picker-dropdown-text-color: var(--dropdown-menu-text-color); // @presenter Color
+
+  --language-picker-dropdown-min-width: var(--dropdown-menu-min-width);
+  --language-picker-dropdown-max-width: var(--dropdown-menu-max-width);
+  --language-picker-dropdown-max-height: var(--dropdown-menu-max-height);
+  --language-picker-dropdown-padding: var(--dropdown-menu-padding ); // @presenter Spacing
+  --language-picker-dropdown-border-radius: var(--dropdown-menu-border-radius); // @presenter BorderRadius
+  --language-picker-dropdown-box-shadow: var(--dropdown-menu-box-shadow); // @presenter Shadow
+  --language-picker-dropdown-color-disabled: var(--dropdown-menu-color-disabled); // @presenter Color
+  --language-picker-dropdown-border-color: var(--dropdown-menu-border-color); // @presenter Color
+  --language-picker-dropdown-bg-color: var(--dropdown-menu-bg-color); // @presenter Color
+
+  --language-picker-dropdown-item-padding-horizontal: 20px; // @presenter Spacing
+  --language-picker-dropdown-item-padding-vertical: var(--dropdown-menu-item-padding-vertical); // @presenter Spacing
+  --language-picker-dropdown-item-separator-padding-top: var(--dropdown-menu-item-separator-padding-top ); // @presenter Spacing
+  --language-picker-dropdown-item-separator-padding-bottom: var(--dropdown-menu-item-separator-padding-bottom ); // @presenter Spacing
+  --language-picker-dropdown-item-border-radius: var(--dropdown-menu-item-border-radius ); // @presenter BorderRadius
+  --language-picker-dropdown-item-bg-color-active: var(--dropdown-menu-item-bg-color-active); // @presenter Color
+  --language-picker-dropdown-item-bg-color-hover: var(--dropdown-menu-item-bg-color-hover); // @presenter Color
+  --language-picker-dropdown-item-separator-border-color: var(--dropdown-menu-item-separator-border-color); // @presenter Color
+  --language-picker-dropdown-item-color-dangerous: var(--dropdown-menu-item-color-dangerous);
+  --language-picker-dropdown-item-border-color-focused: var(--dropdown-menu-item-border-color-focused);
+
+  // @tokens End
+`;
+//# sourceMappingURL=variables.js.map

package/lib/components/LastUpdated/LastUpdated.d.ts

@@ -5,11 +5,11 @@ declare const FORMATS: {
     short: (date: Date, locale: string) => string;
     long: (date: Date, locale: string) => string;
 };
-export interface LastUpdatedProps {
+type LastUpdatedProps = {
     lastModified: Date;
     format?: keyof typeof FORMATS;
     locale?: string;
     className?: string;
-}
+};
 export declare function LastUpdated(props: LastUpdatedProps): JSX.Element | null;
 export {};

package/lib/components/LastUpdated/LastUpdated.js

@@ -30,9 +30,8 @@ exports.LastUpdated = void 0;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const timeago_js_1 = require("timeago.js");
-const useThemeConfig_1 = require("../../hooks/useThemeConfig");
-const hooks_1 = require("../../mocks/hooks");
-const constants_1 = require("../../types/portal/src/shared/constants");
+const hooks_1 = require("../../core/hooks");
+const constants_1 = require("../../core/constants");
 const FORMATS = {
     timeago: (date, locale) => (0, timeago_js_1.format)(date, locale),
     iso: (date) => date.toISOString().split('T')[0],
@@ -40,9 +39,10 @@ const FORMATS = {
     long: (date, locale) => date.toLocaleDateString(locale, { month: 'long', day: 'numeric', year: 'numeric' }),
 };
 function LastUpdated(props) {
-    const { markdown: { lastUpdatedBlock = {} } = {} } = (0, useThemeConfig_1.useThemeConfig)();
-    const { translate } = (0, hooks_1.useTranslate)();
-    const { currentLocale } = (0, hooks_1.useI18nConfig)();
+    const { markdown: { lastUpdatedBlock = {} } = {} } = (0, hooks_1.useThemeConfig)();
+    const { useTranslate, useI18nConfig } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const { currentLocale } = useI18nConfig();
     if (lastUpdatedBlock === null || lastUpdatedBlock === void 0 ? void 0 : lastUpdatedBlock.hide) {
         return null;
     }
@@ -57,13 +57,13 @@ function LastUpdated(props) {
     const text = format === 'timeago'
         ? translate(translationKey, 'Last updated') + ' '
         : translate(translationKey, 'Last updated on');
-    return (React.createElement(Wrapper, { className: props.className, "data-component-name": "LastUpdated/LastUpdated", rawOnPrint: format === 'timeago', "data-print-datetime": isoDate, "data-translation-key": translationKey },
+    return (React.createElement(LastUpdatedWrapper, { className: props.className, "data-component-name": "LastUpdated/LastUpdated", rawOnPrint: format === 'timeago', "data-print-datetime": isoDate, "data-translation-key": translationKey },
         text,
         " ",
         React.createElement("time", { dateTime: isoDate }, lastUpdatedString)));
 }
 exports.LastUpdated = LastUpdated;
-const Wrapper = styled_components_1.default.div `
+const LastUpdatedWrapper = styled_components_1.default.div `
   color: var(--last-updated-text-color);
   font-size: var(--last-updated-font-size);
   font-family: var(--last-updated-font-family);

package/lib/components/LastUpdated/variables.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.lastUpdated = void 0;
+const styled_components_1 = require("styled-components");
+exports.lastUpdated = (0, styled_components_1.css) `
+  --last-updated-text-color: var(--text-color-secondary);
+  --last-updated-font-size: var(--font-size-sm);
+  --last-updated-font-family: var(--font-family-base);
+  --last-updated-line-height: var(--line-height-base);
+`;
+//# sourceMappingURL=variables.js.map

package/lib/components/Link/Link.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export type LinkProps = {
+    to: string;
+    target?: '_self' | '_blank';
+    external?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    innerRef?: React.Ref<HTMLAnchorElement>;
+    languageInsensitive?: boolean;
+    onClick?: () => void;
+    [key: string]: unknown;
+};
+export declare function Link(props: React.PropsWithChildren<LinkProps>): React.JSX.Element;

package/lib/components/Link/Link.js

@@ -0,0 +1,55 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Link = void 0;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const react_router_dom_1 = require("react-router-dom");
+const contexts_1 = require("../../core/contexts");
+function Link(props) {
+    const context = (0, react_1.useContext)(contexts_1.ThemeDataContext);
+    if (context) {
+        const { LinkComponent } = context.components;
+        return React.createElement(LinkComponent, Object.assign({}, props));
+    }
+    else {
+        const { active: _, httpVerb: _1, hasActiveSubItem: _2, routeSlug: _3, external: _4 } = props, filteredProps = __rest(props, ["active", "httpVerb", "hasActiveSubItem", "routeSlug", "external"]);
+        // We omit "active" property to avoid "Warning: Received `false` for a non-boolean attribute `active`."
+        return React.createElement(react_router_dom_1.Link, Object.assign({ ref: filteredProps.innerRef }, filteredProps));
+    }
+}
+exports.Link = Link;
+//# sourceMappingURL=Link.js.map

package/lib/components/Loading/Loading.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface LoadingProps {
+    color: string;
+}
+export declare function Loading({ color }: LoadingProps): JSX.Element;