@redocly/theme 0.52.0-next.2 → 0.52.0-next.3

package/lib/components/Catalog/Catalog.js

@@ -10,13 +10,12 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../core/utils");
 const hooks_1 = require("../../core/hooks");
 const H2_1 = require("../../components/Typography/H2");
-const CatalogCard_1 = require("../../components/Catalog/CatalogCard");
 const FilterContent_1 = require("../../components/Filter/FilterContent");
 const FilterPopover_1 = require("../../components/Filter/FilterPopover");
 const CatalogHighlight_1 = require("../../components/Catalog/CatalogHighlight");
 const CatalogActions_1 = require("../../components/Catalog/CatalogActions");
 const Sidebar_1 = require("../../components/Sidebar/Sidebar");
-const CounterTag_1 = require("../../components/Tags/CounterTag");
+const CatalogVirtualizedGroups_1 = require("../../components/Catalog/CatalogVirtualizedGroups");
 function Catalog(props) {
     const { catalogConfig } = props.pageProps;
     const { useTranslate, useCatalog } = (0, hooks_1.useThemeHooks)();
@@ -39,25 +38,8 @@ function Catalog(props) {
                         ' ',
                         translate(catalogConfig.descriptionTranslationKey, catalogConfig.description),
                         ' ')) : null),
-                groups.map((group) => (react_1.default.createElement(react_1.default.Fragment, { key: group.title },
-                    react_1.default.createElement(CatalogSeparator, { "data-testid": "catalog-separator" },
-                        react_1.default.createElement(CatalogSeparatorLabel, null, group.title),
-                        react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, group.items.length)),
-                    react_1.default.createElement(CatalogCards, null, group.items.map((item) => (react_1.default.createElement(CatalogCard_1.CatalogCard, { item: item, key: item.link })))))))))));
+                react_1.default.createElement(CatalogVirtualizedGroups_1.CatalogVirtualizedGroups, { groups: groups, filters: filters, filterTerm: filterTerm })))));
 }
-const CatalogSeparator = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-  color: var(--catalog-separator-color);
-  font-size: var(--catalog-separator-font-size);
-  font-weight: var(--catalog-separator-font-weight);
-  border-top: 1px solid var(--catalog-separator-border-color);
-  margin: var(--catalog-separator-margin);
-  padding: var(--catalog-separator-padding);
-`;
-const CatalogSeparatorLabel = styled_components_1.default.div `
-  margin: var(--catalog-separator-label-margin);
-`;
 exports.CatalogPageContent = styled_components_1.default.main `
   flex: 1;
   width: 90%;
@@ -68,12 +50,6 @@ exports.CatalogPageContent = styled_components_1.default.main `
     padding: var(--catalog-page-padding);
   }
 `;
-const CatalogCards = styled_components_1.default.div `
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(var(--api-catalog-card-min-width), 1fr));
-  gap: 32px;
-  margin: var(--catalog-cards-group-margin);
-`;
 exports.CatalogTitle = (0, styled_components_1.default)(H2_1.H2) `
   color: var(--catalog-title-text-color);
   font-weight: var(--catalog-title-font-weight);

package/lib/components/Catalog/CatalogCard.js

@@ -110,6 +110,7 @@ const CardDescription = styled_components_1.default.div `
   font-size: var(--catalog-card-description-font-size);
   font-weight: var(--catalog-card-description-font-weight);
   line-height: var(--catalog-card-description-line-height);
+  height: var(--catalog-card-description-height);
 `;
 const CardContent = styled_components_1.default.div `
   flex: 1;

package/lib/components/Catalog/CatalogVirtualizedGroups.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { CatalogItem, ResolvedFilter } from '../../core/types';
+export type Group = {
+    title: string;
+    items: CatalogItem[];
+};
+export type VirtualRowData = {
+    type: 'header';
+    groupTitle: string;
+    groupCount: number;
+    key: string;
+} | {
+    type: 'cardRow';
+    groupTitle: string;
+    items: CatalogItem[];
+    key: string;
+};
+export type CatalogVirtualizedGroupsProps = {
+    groups: Group[];
+    filters: (ResolvedFilter & {
+        isFilterUsed?: boolean;
+    })[];
+    filterTerm: string;
+};
+export declare function CatalogVirtualizedGroups({ groups, filters, filterTerm, }: CatalogVirtualizedGroupsProps): React.JSX.Element;

package/lib/components/Catalog/CatalogVirtualizedGroups.js

@@ -0,0 +1,183 @@
+"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.CatalogVirtualizedGroups = CatalogVirtualizedGroups;
+const react_1 = __importStar(require("react"));
+const react_virtual_1 = require("@tanstack/react-virtual");
+const styled_components_1 = __importDefault(require("styled-components"));
+const hooks_1 = require("../../core/hooks");
+const CatalogCard_1 = require("../../components/Catalog/CatalogCard");
+const CounterTag_1 = require("../../components/Tags/CounterTag");
+const SpinnerLoader_1 = require("../../components/Loaders/SpinnerLoader");
+const GAP_SIZE = 32;
+const ESTIMATED_HEADER_HEIGHT = 43;
+const ESTIMATED_CARD_HEIGHT = 194 + GAP_SIZE;
+const CARD_MIN_WIDTH_VAR = '--catalog-card-min-width';
+function CatalogVirtualizedGroups({ groups, filters, filterTerm, }) {
+    const [isClient, setIsClient] = (0, react_1.useState)(false);
+    const [size, parentRef] = (0, hooks_1.useElementSize)({ delay: 50, detectSizes: 'width' });
+    (0, react_1.useEffect)(() => {
+        setIsClient(true);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!size.width) {
+            return;
+        }
+        virtualizer.measure();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [filters, filterTerm, size.width]);
+    const columnCount = (0, react_1.useMemo)(() => {
+        if (!size.width)
+            return 4;
+        const cardMinWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue(CARD_MIN_WIDTH_VAR), 10);
+        return Math.max(1, Math.floor((size.width + GAP_SIZE) / (cardMinWidth + GAP_SIZE)));
+    }, [size.width]);
+    const flatRows = (0, react_1.useMemo)(() => {
+        if (!isClient) {
+            return groups.flatMap((group) => [
+                {
+                    type: 'header',
+                    groupTitle: group.title,
+                    groupCount: group.items.length,
+                    key: `header-${group.title}`,
+                },
+                {
+                    type: 'cardRow',
+                    groupTitle: group.title,
+                    items: group.items,
+                    key: `${group.title}-cards`,
+                },
+            ]);
+        }
+        const rows = [];
+        groups.forEach((group) => {
+            rows.push({
+                type: 'header',
+                groupTitle: group.title,
+                groupCount: group.items.length,
+                key: `header-${group.title}`,
+            });
+            const numRows = Math.ceil(group.items.length / columnCount);
+            for (let rowIndex = 0; rowIndex < numRows; rowIndex++) {
+                const startIndex = rowIndex * columnCount;
+                const rowItems = group.items.slice(startIndex, startIndex + columnCount);
+                rows.push({
+                    type: 'cardRow',
+                    groupTitle: group.title,
+                    items: rowItems,
+                    key: `${group.title}-row-${rowIndex}`,
+                });
+            }
+        });
+        return rows;
+    }, [groups, columnCount, isClient]);
+    const virtualizer = (0, react_virtual_1.useWindowVirtualizer)({
+        count: flatRows.length,
+        estimateSize: (index) => {
+            const row = flatRows[index];
+            if (row.type === 'header')
+                return ESTIMATED_HEADER_HEIGHT;
+            return ESTIMATED_CARD_HEIGHT;
+        },
+        overscan: 5,
+    });
+    if (!isClient) {
+        return (react_1.default.createElement("div", { ref: parentRef, "data-component-name": "Catalog/CatalogVirtualizedGroups" },
+            flatRows.slice(0, 15).map((rowData) => {
+                if (rowData.type === 'header') {
+                    return (react_1.default.createElement(SSRHeaderRow, { key: rowData.key },
+                        react_1.default.createElement(CatalogSeparatorLabel, null, rowData.groupTitle),
+                        react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, rowData.groupCount)));
+                }
+                return (react_1.default.createElement(SSRRow, { key: rowData.key }, rowData.items.map((item) => (react_1.default.createElement(CardWrapper, { key: item.link },
+                    react_1.default.createElement(CatalogCard_1.CatalogCard, { item: item }))))));
+            }),
+            react_1.default.createElement(LoadingWrapper, null,
+                react_1.default.createElement(SpinnerLoader_1.SpinnerLoader, { color: "var(--catalog-description-text-color)", size: "20px" }))));
+    }
+    return (react_1.default.createElement("div", { ref: parentRef, "data-component-name": "Catalog/CatalogVirtualizedGroups" },
+        react_1.default.createElement("div", { style: {
+                position: 'relative',
+                height: `${virtualizer.getTotalSize()}px`,
+            } }, virtualizer.getVirtualItems().map((virtualRow) => {
+            const rowData = flatRows[virtualRow.index];
+            if (rowData.type === 'header') {
+                return (react_1.default.createElement(HeaderRow, { key: rowData.key, ref: virtualizer.measureElement, "data-index": virtualRow.index, style: { transform: `translateY(${virtualRow.start}px)` } },
+                    react_1.default.createElement(CatalogSeparatorLabel, null, rowData.groupTitle),
+                    react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, rowData.groupCount)));
+            }
+            return (react_1.default.createElement(GridRow, { key: rowData.key, ref: virtualizer.measureElement, "data-index": virtualRow.index, style: { transform: `translateY(${virtualRow.start}px)` } }, rowData.items.map((item) => (react_1.default.createElement(CatalogCard_1.CatalogCard, { key: item.link, item: item })))));
+        }))));
+}
+const SSRHeaderRow = styled_components_1.default.div `
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: var(--catalog-separator-padding);
+  border-top: 1px solid var(--catalog-separator-border-color);
+  padding-bottom: calc(4px * 4);
+  color: var(--catalog-separator-color);
+  font-size: var(--catalog-separator-font-size);
+  font-weight: var(--catalog-separator-font-weight);
+`;
+const SSRRow = styled_components_1.default.div `
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--catalog-cards-group-gap, 32px);
+  padding-bottom: var(--catalog-cards-group-gap, 32px);
+`;
+const HeaderRow = (0, styled_components_1.default)(SSRHeaderRow) `
+  position: absolute;
+  left: 0;
+  will-change: transform;
+`;
+const GridRow = styled_components_1.default.div `
+  position: absolute;
+  left: 0;
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--catalog-card-min-width), 1fr));
+  gap: var(--catalog-cards-group-gap, 32px);
+  padding-bottom: var(--catalog-cards-group-gap, 32px);
+  will-change: transform;
+`;
+const CardWrapper = styled_components_1.default.div `
+  flex: 1 0 var(--catalog-card-min-width);
+  max-width: 100%;
+  min-width: var(--catalog-card-min-width);
+`;
+const CatalogSeparatorLabel = styled_components_1.default.div `
+  margin: var(--catalog-separator-label-margin);
+`;
+const LoadingWrapper = styled_components_1.default.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+//# sourceMappingURL=CatalogVirtualizedGroups.js.map

package/lib/components/Catalog/variables.js

@@ -47,6 +47,7 @@ exports.catalog = (0, styled_components_1.css) `
     * @tokens Catalog card
     */
   --catalog-card-min-height: 194px;
+  --catalog-card-min-width: 260px;
   --catalog-card-padding-vertical: var(--spacing-base);
   --catalog-card-padding-horizontal: var(--spacing-md);
   --catalog-card-gap: var(--spacing-sm);
@@ -60,6 +61,7 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-card-border-color-hover: var(--border-color-primary);
   --catalog-card-border-radius: var(--border-radius-xxl);
   --catalog-cards-group-margin: 0 0 var(--spacing-base) 0;
+  --catalog-cards-group-gap: var(--spacing-xl);
 
   /**
     * @tokens Catalog card title
@@ -79,6 +81,7 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-card-description-font-size: var(--font-size-base);
   --catalog-card-description-line-height: var(--line-height-base);
   --catalog-card-description-font-weight: var(--font-weight-regular);
+  --catalog-card-description-height: 62px;
 
   --catalog-card-content-gap: var(--spacing-xxs);
 

package/lib/components/Menu/MenuItem.js

@@ -62,7 +62,7 @@ function MenuItem(props) {
     };
     const chevron = hasChevron ? (isExpanded ? (react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { size: "var(--menu-item-label-chevron-size)", color: "--tree-content-color-default" })) : (react_1.default.createElement(ChevronRightIcon_1.ChevronRightIcon, { size: "var(--menu-item-label-chevron-size)", color: "--tree-content-color-default" }))) : null;
     const httpColor = item.deprecated ? 'http-deprecated' : item.httpVerb;
-    const label = item.label && (react_1.default.createElement(MenuItemLabelWrapper, { active: item.active, deprecated: item.deprecated, depth: depth, withChevron: hasChevron, onClick: handleOnClick, ref: labelRef, role: item.link ? 'none' : 'link' },
+    const label = item.label && (react_1.default.createElement(MenuItemLabelWrapper, { active: item.active, deprecated: item.deprecated, depth: depth, withChevron: hasChevron, onClick: handleOnClick, ref: labelRef, role: item.link ? 'none' : 'link', "data-testid": "menu-item-label" },
         chevron,
         item.icon ? react_1.default.createElement(MenuItemIcon, { src: item.icon }) : null,
         react_1.default.createElement(MenuItemLabelTextWrapper, null,

package/lib/components/Navbar/NavbarItem.js

@@ -59,7 +59,10 @@ function NavbarItem({ navItem, className }) {
         const groupItemsComponents = groupItems.map((item, index) => {
             if (item.type !== 'link' && item.type !== 'separator')
                 return null;
-            return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: `${item.label}_${index}`, to: item.link, separator: item.type === 'separator', separatorLine: item.separatorLine, "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label)));
+            return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: `${item.label}_${index}`, to: item.link, separator: item.type === 'separator', separatorLine: item.separatorLine, "data-translation-key": item.labelTranslationKey },
+                react_1.default.createElement(NavbarIcon, { url: item.icon }),
+                react_1.default.createElement(NavbarLabel, { "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label)),
+                item.external ? react_1.default.createElement(ExternalLinkIcon, { size: "10px" }) : null));
         });
         return (react_1.default.createElement("div", { "data-component-name": "Navbar/NavbarItem" },
             react_1.default.createElement(NavbarMenuItemDropdown, { trigger: itemContent, triggerEvent: "hover" },

package/lib/components/Search/SearchAiMessage.js

@@ -24,9 +24,11 @@ function SearchAiMessage({ role, content, isThinking, resources, className, }) {
                 react_1.default.createElement(ResponseText, { as: "div", children: markDownContent, "data-testid": "response-text" }),
                 !isThinking && resources && resources.length > 0 && (react_1.default.createElement(ResourcesWrapper, { "data-testid": "resources-wrapper" },
                     react_1.default.createElement(ResourcesTitle, { "data-translation-key": "search.ai.resourcesFound" },
-                        resources.length,
+                        translate('search.ai.resourcesFound.basedOn', 'Based on'),
                         " ",
-                        translate('search.ai.resourcesFound', 'resources found')),
+                        resources.length,
+                        ' ',
+                        translate('search.ai.resourcesFound.resources', 'resources')),
                     react_1.default.createElement(ResourceTagsWrapper, null, resources.map((resource, idx) => (react_1.default.createElement(Link_1.Link, { key: idx, to: resource.url, target: "_blank" },
                         react_1.default.createElement(ResourceTag, { borderless: true, icon: react_1.default.createElement(DocumentIcon_1.DocumentIcon, { color: "--search-ai-resource-tag-icon-color" }) }, resource.title))))))))) : (content),
             isThinking && content.length === 0 && (react_1.default.createElement(ThinkingDotsWrapper, { "data-testid": "thinking-dots-wrapper" },
@@ -93,7 +95,6 @@ const ResourceTag = (0, styled_components_1.default)(Tag_1.Tag) `
     --tag-color: var(--search-ai-resource-tag-text-color);
     max-width: 100%;
     overflow: hidden;
-    white-space: nowrap;
     display: inline-block;
   }
   svg {
@@ -103,8 +104,8 @@ const ResourceTag = (0, styled_components_1.default)(Tag_1.Tag) `
   }
   > div {
     overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    word-break: break-word;
+    white-space: normal;
     max-width: 100%;
   }
 `;

package/lib/components/Search/SearchDialog.js

@@ -163,7 +163,7 @@ function SearchDialog({ onClose, className }) {
                             react_1.default.createElement(SearchGroupTitle, { "data-testid": "search-group-title" }, key), (_b = items[key]) === null || _b === void 0 ? void 0 :
                             _b.map(mapItem),
                             showLoadMore(key, ((_c = items[key]) === null || _c === void 0 ? void 0 : _c.length) || 0) && (react_1.default.createElement(SearchGroupFooter, { "data-translation-key": "search.showMore", onClick: () => { var _a; return setLoadMore({ groupKey: key, offset: ((_a = items[key]) === null || _a === void 0 ? void 0 : _a.length) || 0 }); } }, translate('search.showMore', 'Show more'))))) : null;
-                    })) : isSearchLoading ? (react_1.default.createElement(SearchMessage, null,
+                    })) : isSearchLoading ? (react_1.default.createElement(SearchMessage, { "data-translation-key": "search.loading" },
                         react_1.default.createElement(SpinnerLoader_1.SpinnerLoader, { size: "26px", color: "var(--search-input-icon-color)" }),
                         translate('search.loading', 'Loading...'))) : (react_1.default.createElement(SearchMessage, { "data-translation-key": "search.noResults" },
                         react_1.default.createElement("b", null, translate('search.noResults.title', 'No results'))))) : (react_1.default.createElement(react_1.default.Fragment, null,

package/lib/core/hooks/__mocks__/index.d.ts

@@ -23,3 +23,4 @@ export * from '../../../core/hooks/feedback/use-report-dialog';
 export * from '../../../core/hooks/use-product-picker';
 export * from '../../../core/hooks/search/use-search-dialog';
 export * from '../../../core/hooks/use-language-picker';
+export * from '../../../core/hooks/__mocks__/use-element-size';

package/lib/core/hooks/__mocks__/index.js

@@ -39,4 +39,5 @@ __exportStar(require("../../../core/hooks/feedback/use-report-dialog"), exports)
 __exportStar(require("../../../core/hooks/use-product-picker"), exports);
 __exportStar(require("../../../core/hooks/search/use-search-dialog"), exports);
 __exportStar(require("../../../core/hooks/use-language-picker"), exports);
+__exportStar(require("../../../core/hooks/__mocks__/use-element-size"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/__mocks__/use-element-size.d.ts

@@ -0,0 +1,4 @@
+export declare function useElementSize(): (import("react").MutableRefObject<null> | {
+    width: number;
+    height: number;
+})[];

package/lib/core/hooks/__mocks__/use-element-size.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useElementSize = useElementSize;
+const react_1 = require("react");
+function useElementSize() {
+    // Return mock size and a ref
+    return [{ width: 1024, height: 768 }, (0, react_1.useRef)(null)];
+}
+//# sourceMappingURL=use-element-size.js.map

package/lib/core/hooks/index.d.ts

@@ -33,3 +33,4 @@ export * from '../../core/hooks/code-walkthrough/use-code-walkthrough-steps';
 export * from '../../core/hooks/code-walkthrough/use-code-walkthrough-controls';
 export * from '../../core/hooks/code-walkthrough/use-code-panel';
 export * from '../../core/hooks/code-walkthrough/use-renderable-files';
+export * from '../../core/hooks/use-element-size';

package/lib/core/hooks/index.js

@@ -49,4 +49,5 @@ __exportStar(require("../../core/hooks/code-walkthrough/use-code-walkthrough-ste
 __exportStar(require("../../core/hooks/code-walkthrough/use-code-walkthrough-controls"), exports);
 __exportStar(require("../../core/hooks/code-walkthrough/use-code-panel"), exports);
 __exportStar(require("../../core/hooks/code-walkthrough/use-renderable-files"), exports);
+__exportStar(require("../../core/hooks/use-element-size"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/menu/use-nested-menu.js

@@ -24,12 +24,17 @@ function useNestedMenu({ item, labelRef, nestedMenuRef }) {
         isExpanded,
         collapseElRef: nestedMenuRef || { current: null },
         onTransitionStateChange: (state) => {
+            var _a;
             if (state === 'collapseEnd') {
                 setCanUnmount(true);
             }
             if (state === 'expandStart') {
                 setCanUnmount(false);
             }
+            // signal that used in e2e tests to wait for the item to be expanded
+            if (state === 'expandEnd') {
+                (_a = labelRef === null || labelRef === void 0 ? void 0 : labelRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('menu:expand-end', { bubbles: true }));
+            }
         },
     });
     function scrollIfNeeded(el, centerIfNeeded = false) {

package/lib/core/hooks/use-element-size.d.ts

@@ -0,0 +1,13 @@
+import { MutableRefObject } from 'react';
+type Size = {
+    width: number;
+    height: number;
+};
+export declare function useElementSize<T extends HTMLElement = HTMLElement>({ delay, detectSizes, }?: {
+    delay?: number;
+    detectSizes?: 'width' | 'height' | 'both';
+}): [
+    Size,
+    MutableRefObject<T | null>
+];
+export {};

package/lib/core/hooks/use-element-size.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useElementSize = useElementSize;
+const react_1 = require("react");
+const getInitialSize = (ref) => {
+    if (ref === null || ref === void 0 ? void 0 : ref.current) {
+        return {
+            width: ref.current.offsetWidth,
+            height: ref.current.offsetHeight,
+        };
+    }
+    if ((ref === null || ref === void 0 ? void 0 : ref.current) === null) {
+        return {
+            width: 0,
+            height: 0,
+        };
+    }
+    return {
+        width: typeof window !== 'undefined' ? window.innerWidth : 0,
+        height: typeof window !== 'undefined' ? window.innerHeight : 0,
+    };
+};
+function useElementSize({ delay = 50, detectSizes = 'both', } = {}) {
+    const ref = (0, react_1.useRef)(null);
+    const previousSize = (0, react_1.useRef)(getInitialSize(ref));
+    const [size, setSize] = (0, react_1.useState)(getInitialSize(ref));
+    const isFirstUpdate = (0, react_1.useRef)(true);
+    const updateSize = (0, react_1.useCallback)((newSize) => {
+        const shouldUpdateWidth = detectSizes === 'both' || detectSizes === 'width';
+        const shouldUpdateHeight = detectSizes === 'both' || detectSizes === 'height';
+        const widthChanged = shouldUpdateWidth && newSize.width !== previousSize.current.width;
+        const heightChanged = shouldUpdateHeight && newSize.height !== previousSize.current.height;
+        if (widthChanged || heightChanged) {
+            const updatedSize = {
+                width: shouldUpdateWidth ? newSize.width : previousSize.current.width,
+                height: shouldUpdateHeight ? newSize.height : previousSize.current.height,
+            };
+            setSize(updatedSize);
+            previousSize.current = updatedSize;
+        }
+    }, [detectSizes]);
+    (0, react_1.useLayoutEffect)(() => {
+        let timeoutId = null;
+        const triggerUpdateWithThrottling = (newSize) => {
+            if (isFirstUpdate.current) {
+                updateSize(newSize);
+                isFirstUpdate.current = false;
+                return;
+            }
+            if (timeoutId !== null)
+                return;
+            timeoutId = window.setTimeout(() => {
+                updateSize(newSize);
+                timeoutId = null;
+            }, delay);
+        };
+        if ((ref === null || ref === void 0 ? void 0 : ref.current) && typeof ResizeObserver !== 'undefined') {
+            const observer = new ResizeObserver((entries) => {
+                for (const entry of entries) {
+                    const { width, height } = entry.contentRect;
+                    triggerUpdateWithThrottling({ width, height });
+                }
+            });
+            observer.observe(ref.current);
+            return () => {
+                observer.disconnect();
+                if (timeoutId !== null) {
+                    clearTimeout(timeoutId);
+                }
+            };
+        }
+    }, [ref, updateSize, delay]);
+    return [size, ref];
+}
+//# sourceMappingURL=use-element-size.js.map

package/lib/core/styles/global.js

@@ -1237,7 +1237,6 @@ exports.styles = (0, styled_components_1.css) `
     ${variables_2.scorecard}
     ${variables_33.datePicker}
     ${replay}
-    --api-catalog-card-min-width: 250px;
 
     background-color: var(--bg-color);
     color: var(--text-color-primary);

package/lib/core/types/l10n.d.ts

@@ -1,5 +1,5 @@
 import type { TOptions } from 'i18next';
-export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeLayout' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.settings.reasons.send' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'page.nextButton' | 'page.previousButton' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.deprecated' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.noResponseExample' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.scopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'codeWalkthrough.download' | 'codeWalkthrough.preview';
+export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeLayout' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.settings.reasons.send' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'page.nextButton' | 'page.previousButton' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.deprecated' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.noResponseExample' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.scopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'codeWalkthrough.download' | 'codeWalkthrough.preview';
 export type Locale = {
     code: string;
     name: string;

package/lib/icons/CheckboxFilledIcon/CheckboxFilledIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const CheckboxFilledIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/CheckboxFilledIcon/CheckboxFilledIcon.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxFilledIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M13 2.51172H3C2.73478 2.51172 2.48043 2.61708 2.29289 2.80461C2.10536 2.99215 2 3.2465 2 3.51172V13.5117C2 13.7769 2.10536 14.0313 2.29289 14.2188C2.48043 14.4064 2.73478 14.5117 3 14.5117H13C13.2652 14.5117 13.5196 14.4064 13.7071 14.2188C13.8946 14.0313 14 13.7769 14 13.5117V3.51172C14 3.2465 13.8946 2.99215 13.7071 2.80461C13.5196 2.61708 13.2652 2.51172 13 2.51172ZM7 11.2617L4.5 8.78307L5.2954 8.01172L7 9.68452L10.7044 6.01172L11.5002 6.80032L7 11.2617Z" })));
+exports.CheckboxFilledIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/CheckboxFilledIcon/CheckboxFilledIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=CheckboxFilledIcon.js.map

package/lib/icons/WarningAltFilled/WarningAltFilled.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const WarningAltFilled: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;