@redocly/theme 0.4.15 → 0.5.0

package/lib/ui/Tiles/TileText.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TileText = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.TileText = styled_components_1.default.span.attrs(() => ({
+    'data-component-name': 'ui/Tiles/TileText',
+})) `
+  display: inline-block;
+  font-weight: var(--font-weight-regular);
+  overflow: hidden;
+  color: ${(props) => props.color || 'var(--text-color)'};
+  line-height: 1.25;
+  font-family: var(--font-family-base);
+`;
+//# sourceMappingURL=TileText.js.map

package/lib/ui/Tiles/WideTile.js

@@ -0,0 +1,114 @@
+"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.WideTile = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Link_1 = require("../../mocks/Link");
+const TileText_1 = require("../../ui/Tiles/TileText");
+const TileHeader_1 = require("../../ui/Tiles/TileHeader");
+// prettier-ignore
+const WideTileWrapper = (0, styled_components_1.default)(Link_1.Link) `
+  display: inline-flex;
+  flex-direction: ${({ withIcon }) => (withIcon ? 'column' : 'row')};
+  border-radius: 10px;
+  box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.1);
+  background-color: ${({ bgColor }) => bgColor || 'var(--wide-tile-background-color)'};
+  background-image: ${({ bgImage }) => (bgImage ? `url(${bgImage})` : 'none')};
+  background-repeat: no-repeat;
+  padding: 24px;
+  padding-right: ${({ disableArrow }) => (disableArrow ? '24px' : '56px')};
+  margin-bottom: 32px;
+  box-sizing: border-box;
+  position: relative;
+  text-decoration: none;
+  width: 100%;
+  transition: box-shadow 0.25s ease;
+  :hover {
+    box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.2);
+  }
+  :before {
+    content: ${({ disableArrow }) => (disableArrow ? 'none' : '""')};
+    display: inline-block;
+    width: 9px;
+    min-height: 18px;
+    background-size: 9px 18px;
+    background-repeat: no-repeat;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 30px;
+  }
+  &.external-url::after {
+    content: none;
+  }
+  
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: calc(50% - 2em);
+    padding: 32px;
+    padding-right: ${({ disableArrow }) => (disableArrow ? '32px' : '64px')};
+    flex-direction: row;
+    max-width: ${({ maxWidth }) => maxWidth};
+  }
+`;
+const WideTileHeader = (0, styled_components_1.default)(TileHeader_1.TileHeader) `
+  font-size: 24px;
+  text-align: ${({ align }) => align || 'left'};
+`;
+const WideTileText = (0, styled_components_1.default)(TileText_1.TileText) `
+  font-size: 18px;
+  text-align: ${({ align }) => align || 'left'};
+`;
+const WideTileIcon = styled_components_1.default.div `
+  margin-bottom: 24px;
+  flex-shrink: 0;
+  width: 70px;
+  img {
+    display: block;
+    height: auto;
+    max-width: 100%;
+  }
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    margin-right: 24px;
+    margin-bottom: 0;
+  }
+`;
+class WideTile extends react_1.Component {
+    render() {
+        const { to, header, children, target, disableArrow, textAlign, headerAlign, icon, bgColor, bgImage, color, className, style, maxWidth, } = this.props;
+        return (react_1.default.createElement(WideTileWrapper, { to: to, target: target, disableArrow: disableArrow, withIcon: !!icon, bgColor: bgColor, bgImage: bgImage, color: color, className: className, style: style, maxWidth: maxWidth, "data-component-name": "ui/Tiles/WideTile" },
+            icon && (react_1.default.createElement(WideTileIcon, null,
+                react_1.default.createElement("img", { src: icon, alt: "" }))),
+            react_1.default.createElement("div", null,
+                header && (react_1.default.createElement(WideTileHeader, { align: textAlign, color: color, "data-cy": `Wide-${header}` }, header)),
+                children && (react_1.default.createElement(WideTileText, { align: headerAlign, color: color }, children)))));
+    }
+}
+exports.WideTile = WideTile;
+//# sourceMappingURL=WideTile.js.map

package/{ui → lib/ui}/Tiles/index.js

@@ -18,3 +18,4 @@ __exportStar(require("../../ui/Tiles/ThinTile"), exports);
 __exportStar(require("../../ui/Tiles/TileHeader"), exports);
 __exportStar(require("../../ui/Tiles/TileText"), exports);
 __exportStar(require("../../ui/Tiles/WideTile"), exports);
+//# sourceMappingURL=index.js.map

package/lib/ui/darkColors.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.darkMode = void 0;
+const styled_components_1 = require("styled-components");
+exports.darkMode = (0, styled_components_1.css) `
+  /**
+     * @tokens Dark Colors
+     * @presenter Color
+     */
+  --background-color: #0d1117;
+  --footer-background-color: #16202e;
+  --navbar-background-color: #16202e;
+  --color-primary-500: #57a5fd;
+  --color-primary-300: #15396e;
+  --color-secondary-300: #22262e;
+  --colors-translucent: rgb(50 63 75 / 40%);
+  --inline-code-text-color: #f76663;
+  --color-emphasis-400: #fff;
+  --link-hover-text-color: #57a5fd;
+  --link-text-color: #57a5fd;
+  --code-block-background-color: #1e2633;
+  --admonition-attention-background-color: var(--color-primary-300);
+  --admonition-attention-icon-color: var(--color-emphasis-700);
+  --admonition-warning-background-color: #614b17;
+  --admonition-warning-icon-color: #4c3b12;
+  --admonition-success-background-color: #267e74;
+  --admonition-success-icon-color: #38b9a5;
+  --admonition-danger-background-color: #d6524c;
+  --admonition-danger-icon-color: #d13e37;
+  --admonition-info-background-color: #696969;
+  --admonition-info-icon-color: #505050;
+  --inline-code-background-color: #1e2633;
+  --toc-item-active-background-color: #1e2633;
+  --sidebar-item-active-background-color: #1e2633;
+  --panel-response-success-heading-background-color: #38b9a5;
+  --panel-response-success-border-color: #38b9a5;
+  --panel-response-error-heading-background-color: #d6524c;
+  --panel-response-error-border-color: #d6524c;
+  --panel-samples-heading-background-color: #1e2633;
+  --panel-samples-body-background-color: #263041;
+  --panel-samples-tabs-hover-background-color: #1e2633;
+  --panel-samples-tabs-hover-border-color: #3f4f68;
+  --panel-try-it-action-button-hover-border-color: #2b4cc4;
+  --panel-try-it-action-button-hover-background-color: #2b4cc4;
+  --panel-try-it-action-button-background-color: #0065fb;
+  --button-background-color: #0065fb;
+  --button-border-color: #0065fb;
+  --button-hover-background-color: #2b4cc4;
+  --button-hover-border-color: #2b4cc4;
+  --search-popover-background-color: #1b2738;
+  --search-highlight-text-color: #57a5fd;
+  --search-item-active-background-color: #1f3559;
+  --panel-try-it-nested-body-background-color: #263041;
+  --panel-try-it-tabs-active-background-color: #11151d;
+  --panel-try-it-tabs-hover-background-color: #141a26;
+  --color-emphasis-100: #0065fb;
+  --color-secondary-400: #696969;
+  --color-emphasis-700: #fff;
+  --color-emphasis-800: #fff;
+  --copy-button-tooltip-text-color: #fff;
+  --copy-button-tooltip-background-color: var(--tooltip-background-color);
+  --tooltip-text-color: #fff;
+  --md-table-head-background-color: var(--color-secondary-300);
+  --wide-tile-background-color: #000000;
+  --thin-tile-background-color: #000000;
+
+  background-color: var(--background-color);
+  color: var(--text-color);
+`;
+//# sourceMappingURL=darkColors.js.map

package/{ui → lib/ui}/index.d.ts

@@ -5,6 +5,5 @@ export * from '../ui/Box';
 export * from '../ui/Dropdown';
 export * from '../ui/Flex';
 export * from '../ui/Jumbotron';
-export * from '../ui/UniversalLink';
 export declare const LandingLayout: ({ children }: React.PropsWithChildren<object>) => React.ReactNode;
 export declare const EmptyLayout: ({ children }: React.PropsWithChildren<object>) => React.ReactNode;

package/{ui → lib/ui}/index.js

@@ -21,10 +21,7 @@ __exportStar(require("../ui/Box"), exports);
 __exportStar(require("../ui/Dropdown"), exports);
 __exportStar(require("../ui/Flex"), exports);
 __exportStar(require("../ui/Jumbotron"), exports);
-__exportStar(require("../ui/UniversalLink"), exports);
-var LandingLayout = function (_a) {
-    var children = _a.children;
-    return children;
-};
+const LandingLayout = ({ children }) => children;
 exports.LandingLayout = LandingLayout;
 exports.EmptyLayout = exports.LandingLayout;
+//# sourceMappingURL=index.js.map

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

@@ -1,21 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ClipboardService = void 0;
-var ClipboardService = /** @class */ (function () {
-    function ClipboardService() {
-    }
-    ClipboardService.isSupported = function () {
+class ClipboardService {
+    static isSupported() {
         return typeof navigator !== 'undefined' && !!navigator.clipboard;
-    };
-    ClipboardService.copyCustom = function (text) {
+    }
+    static copyCustom(text) {
         return navigator.clipboard.writeText(text);
-    };
-    ClipboardService.selectElement = function (element) {
+    }
+    static selectElement(element) {
         if (!element) {
             return;
         }
-        var range;
-        var selection;
+        let range;
+        let selection;
         if (document.body.createTextRange) {
             range = document.body.createTextRange();
             range.moveToElementText(element);
@@ -28,7 +26,7 @@ var ClipboardService = /** @class */ (function () {
             selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
             selection === null || selection === void 0 ? void 0 : selection.addRange(range);
         }
-    };
-    return ClipboardService;
-}());
+    }
+}
 exports.ClipboardService = ClipboardService;
+//# sourceMappingURL=ClipboardService.js.map

package/{utils → lib/utils}/args-typecheck.js

@@ -11,3 +11,4 @@ function isPrimitive(arg) {
     return ['string', 'boolean', 'number'].includes(typeof arg);
 }
 exports.isPrimitive = isPrimitive;
+//# sourceMappingURL=args-typecheck.js.map

package/lib/utils/class-names.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.concatClassNames = void 0;
+const SPACE_DELIMITER = ' ';
+function concatClassNames(...args) {
+    return args
+        .map((className) => (className ? className.trim() : className))
+        .filter(Boolean)
+        .join(SPACE_DELIMITER);
+}
+exports.concatClassNames = concatClassNames;
+//# sourceMappingURL=class-names.js.map

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

@@ -2,13 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.stringToHslColor = void 0;
 function stringToHslColor(value) {
-    var s = 30;
-    var l = 80;
-    var hash = 0;
-    for (var i = 0; i < value.length; i++) {
+    const s = 30;
+    const l = 80;
+    let hash = 0;
+    for (let i = 0; i < value.length; i++) {
         hash = value.charCodeAt(i) + ((hash << 5) - hash);
     }
-    var h = hash % 360;
-    return "hsl(".concat(h, ", ").concat(s, "%, ").concat(l, "%)");
+    const h = hash % 360;
+    return `hsl(${h}, ${s}%, ${l}%)`;
 }
 exports.stringToHslColor = stringToHslColor;
+//# sourceMappingURL=color.js.map

package/lib/utils/css-variables.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCssColorVariable = void 0;
+const getCssColorVariable = (color, defaultValue = 'inherit') => (color === null || color === void 0 ? void 0 : color.startsWith('--')) ? `var(${color})` : color || defaultValue;
+exports.getCssColorVariable = getCssColorVariable;
+//# sourceMappingURL=css-variables.js.map

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

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getNavbarElement = void 0;
 function getNavbarElement() {
-    var navElements = (typeof document !== 'undefined' && document.querySelectorAll('nav')) || [];
+    const navElements = (typeof document !== 'undefined' && document.querySelectorAll('nav')) || [];
     // there can be multiple nav elements (e.g. mobile and non-mobile), let's use the first one with non-zero height
-    for (var i = 0; i < navElements.length; i++) {
+    for (let i = 0; i < navElements.length; i++) {
         if (navElements[i].getBoundingClientRect().height > 1) {
             return navElements[i];
         }
@@ -12,3 +12,4 @@ function getNavbarElement() {
     return navElements[0] || null;
 }
 exports.getNavbarElement = getNavbarElement;
+//# sourceMappingURL=getNavbarElement.js.map

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

@@ -24,7 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addLineNumbers = exports.highlight = exports.mapLang = void 0;
-var Prism = __importStar(require("prismjs"));
+const Prism = __importStar(require("prismjs"));
 require("prismjs/components/prism-bash.js");
 require("prismjs/components/prism-c.js");
 require("prismjs/components/prism-clike.js");
@@ -46,8 +46,8 @@ require("prismjs/components/prism-scala.js");
 require("prismjs/components/prism-sql.js");
 require("prismjs/components/prism-swift.js");
 require("prismjs/components/prism-graphql.js");
-var DEFAULT_LANG = 'clike';
-var NEW_LINE_EXP = /\n(?!$)/g;
+const DEFAULT_LANG = 'clike';
+const NEW_LINE_EXP = /\n(?!$)/g;
 Prism.languages.insertBefore('javascript', 'string', {
     'property string': {
         pattern: /([{,]\s*)"(?:\\.|[^\\"\r\n])*"(?=\s*:)/i,
@@ -82,23 +82,22 @@ exports.mapLang = mapLang;
  * @param lang highlight language
  * @return highlighted source code as **html string**
  */
-function highlight(source, lang) {
-    if (lang === void 0) { lang = DEFAULT_LANG; }
+function highlight(source, lang = DEFAULT_LANG) {
     lang = lang.toLowerCase();
-    var grammar = Prism.languages[lang];
+    let grammar = Prism.languages[lang];
     if (!grammar) {
         grammar = Prism.languages[mapLang(lang)];
     }
     return Prism.highlight(source.toString(), grammar, lang);
 }
 exports.highlight = highlight;
-function addLineNumbers(highlightedCode, start) {
-    if (start === void 0) { start = 1; }
-    var codeLines = highlightedCode.split(NEW_LINE_EXP);
+function addLineNumbers(highlightedCode, start = 1) {
+    const codeLines = highlightedCode.split(NEW_LINE_EXP);
     return codeLines
-        .map(function (line, i) {
-        return "<span class=\"code-line\" data-line-number=".concat(start + i, ">").concat(line, "</span>");
+        .map((line, i) => {
+        return `<span class="code-line" data-line-number=${start + i}>${line}</span>`;
     })
         .join('\n');
 }
 exports.addLineNumbers = addLineNumbers;
+//# sourceMappingURL=highlight.js.map

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

@@ -23,3 +23,4 @@ __exportStar(require("./theme-helpers"), exports);
 __exportStar(require("./class-names"), exports);
 __exportStar(require("./args-typecheck"), exports);
 __exportStar(require("./color"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -6,9 +6,9 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isUrl = void 0;
-var protocolAndDomainRE = /^(?:\w+:)?\/\/(\S+)$/;
-var localhostDomainRE = /^localhost[:?\d]*(?:[^:?\d]\S*)?$/;
-var nonLocalhostDomainRE = /^[^\s.]+\.\S{2,}$/;
+const protocolAndDomainRE = /^(?:\w+:)?\/\/(\S+)$/;
+const localhostDomainRE = /^localhost[:?\d]*(?:[^:?\d]\S*)?$/;
+const nonLocalhostDomainRE = /^[^\s.]+\.\S{2,}$/;
 /**
  * Loosely validate a URL `string`.
  *
@@ -19,11 +19,11 @@ function isUrl(input) {
     if (typeof input !== 'string') {
         return false;
     }
-    var match = input.match(protocolAndDomainRE);
+    const match = input.match(protocolAndDomainRE);
     if (!match) {
         return false;
     }
-    var everythingAfterProtocol = match[1];
+    const everythingAfterProtocol = match[1];
     if (!everythingAfterProtocol) {
         return false;
     }
@@ -34,3 +34,4 @@ function isUrl(input) {
     return false;
 }
 exports.isUrl = isUrl;
+//# sourceMappingURL=isUrl.js.map

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