@redocly/theme 0.53.0-next.2 → 0.53.0-next.4

package/lib/components/CodeBlock/CodeBlockControls.js

@@ -8,6 +8,7 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const CodeBlockTabs_1 = require("../../components/CodeBlock/CodeBlockTabs");
 const CopyButton_1 = require("../../components/Buttons/CopyButton");
+const TooltipWrapper_1 = require("../../components/Tooltip/TooltipWrapper");
 const hooks_1 = require("../../core/hooks");
 const DeselectIcon_1 = require("../../icons/DeselectIcon/DeselectIcon");
 const MaximizeIcon_1 = require("../../icons/MaximizeIcon/MaximizeIcon");
@@ -33,16 +34,18 @@ function CodeBlockControls({ children, className, title, controls, tabs, }) {
         title && react_1.default.createElement(Title, null, title),
         tabs && react_1.default.createElement(CodeBlockTabs_1.CodeBlockTabs, { tabs: tabs }),
         react_1.default.createElement(ControlsWrapper, null,
-            report && !((_a = report === null || report === void 0 ? void 0 : report.props) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(ControlButton, Object.assign({ variant: "text", size: "small", "data-testid": "report-button", icon: controlsType === 'icon' ? react_1.default.createElement(WarningSquareIcon_1.WarningSquareIcon, { size: "18px" }) : undefined }, report.props), controlsType != 'icon' && (((_b = report.props) === null || _b === void 0 ? void 0 : _b.buttonText) || 'Report'))) : null,
+            report && !((_a = report === null || report === void 0 ? void 0 : report.props) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tooltipKey: "codeSnippet.report.tooltipText", placement: "top" },
+                react_1.default.createElement(ControlButton, Object.assign({ variant: "text", size: "small", "data-testid": "report-button", icon: controlsType === 'icon' ? react_1.default.createElement(WarningSquareIcon_1.WarningSquareIcon, { size: "18px" }) : undefined }, report.props), controlsType != 'icon' && (((_b = report.props) === null || _b === void 0 ? void 0 : _b.buttonText) || 'Report')))) : null,
             expand && !((_c = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.expand) === null || _c === void 0 ? void 0 : _c.hide) ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "expand-all", icon: controlsType === 'icon' ? react_1.default.createElement(MaximizeIcon_1.MaximizeIcon, null) : undefined, onClick: expand === null || expand === void 0 ? void 0 : expand.onClick }, controlsType !== 'icon' && ((expand === null || expand === void 0 ? void 0 : expand.label) || 'Expand all'))) : null,
             collapse && !((_d = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.collapse) === null || _d === void 0 ? void 0 : _d.hide) ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "collapse-all", icon: controlsType === 'icon' ? react_1.default.createElement(MinimizeIcon_1.MinimizeIcon, null) : undefined, onClick: collapse === null || collapse === void 0 ? void 0 : collapse.onClick }, controlsType !== 'icon' && ((expand === null || expand === void 0 ? void 0 : expand.label) || 'Collapse all'))) : null,
             select ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "select-all", icon: controlsType === 'icon' ? react_1.default.createElement(SelectIcon_1.SelectIcon, null) : undefined, onClick: select === null || select === void 0 ? void 0 : select.onClick }, controlsType !== 'icon' && (select === null || select === void 0 ? void 0 : select.label) ? select.label : 'Select all')) : null,
             deselect ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "clear-all", icon: controlsType === 'icon' ? react_1.default.createElement(DeselectIcon_1.DeselectIcon, null) : undefined, onClick: deselect === null || deselect === void 0 ? void 0 : deselect.onClick }, controlsType !== 'icon' && (deselect === null || deselect === void 0 ? void 0 : deselect.label) ? deselect.label : 'Clear all')) : null,
-            copy && !((_e = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.copy) === null || _e === void 0 ? void 0 : _e.hide) ? (react_1.default.createElement(CopyButton_1.CopyButton, { data: copy.data, "data-source": copy.dataSource, "data-hash": copy.dataHash, type: controlsType, toasterPlacement: copy.toasterPlacement, toasterDuration: copy.toasterDuration, buttonText: copy.label, onCopyClick: () => {
-                    var _a, _b;
-                    (_a = copy === null || copy === void 0 ? void 0 : copy.onClick) === null || _a === void 0 ? void 0 : _a.call(copy);
-                    (_b = telemetry === null || telemetry === void 0 ? void 0 : telemetry.send) === null || _b === void 0 ? void 0 : _b.call(telemetry, 'code_snippet_copied', {});
-                } })) : null))) : null;
+            copy && !((_e = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.copy) === null || _e === void 0 ? void 0 : _e.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tooltipKey: "codeSnippet.copy.tooltipText", placement: "top" },
+                react_1.default.createElement(CopyButton_1.CopyButton, { data: copy.data, "data-source": copy.dataSource, "data-hash": copy.dataHash, type: controlsType, toasterPlacement: copy.toasterPlacement, toasterDuration: copy.toasterDuration, buttonText: copy.label, onCopyClick: () => {
+                        var _a, _b;
+                        (_a = copy === null || copy === void 0 ? void 0 : copy.onClick) === null || _a === void 0 ? void 0 : _a.call(copy);
+                        (_b = telemetry === null || telemetry === void 0 ? void 0 : telemetry.send) === null || _b === void 0 ? void 0 : _b.call(telemetry, 'code_snippet_copied', {});
+                    } }))) : null))) : null;
     return children || controls ? (react_1.default.createElement(ContainerWrapper, { "data-component-name": "CodeBlock/CodeBlockControls", className: className }, children ? children : defaultControls)) : null;
 }
 const ContainerWrapper = styled_components_1.default.div `

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

@@ -6,6 +6,7 @@ export type JsonProps = {
     className?: string;
     expandLevel: number;
     startLineNumber?: number;
+    hideHeader?: boolean;
     onCopyClick?: () => void;
 };
 export declare const JsonViewer: React.NamedExoticComponent<JsonProps>;

package/lib/components/JsonViewer/JsonViewer.js

@@ -31,7 +31,7 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const CodeBlock_1 = require("../../components/CodeBlock/CodeBlock");
 const helpers_1 = require("./helpers");
-function JsonComponent({ data, expandLevel = 1, className, onCopyClick, title, }) {
+function JsonComponent({ data, expandLevel = 1, className, onCopyClick, title, hideHeader, }) {
     const showFoldingButtons = data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
     const [expandAllSignal, setExpandAllSignal] = react_1.default.useState(undefined);
     const expandAll = () => {
@@ -48,15 +48,17 @@ function JsonComponent({ data, expandLevel = 1, className, onCopyClick, title, }
     };
     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: {
-                title,
-                className: 'code-block-header',
-                controls: {
-                    copy: { data, onClick: onCopyClick, handleOutside: true },
-                    expand: showFoldingButtons ? { onClick: expandAll } : undefined,
-                    collapse: showFoldingButtons ? { onClick: collapseAll } : undefined,
-                },
-            }, source: source },
+        react_1.default.createElement(CodeBlock_1.CodeBlock, { header: hideHeader
+                ? undefined
+                : {
+                    title,
+                    className: 'code-block-header',
+                    controls: {
+                        copy: { data, onClick: onCopyClick, handleOutside: true },
+                        expand: showFoldingButtons ? { onClick: expandAll } : undefined,
+                        collapse: showFoldingButtons ? { onClick: collapseAll } : undefined,
+                    },
+                }, 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) })))));
 }

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

@@ -1,12 +1,7 @@
-declare const FORMATS: {
-    timeago: (date: Date, locale: string) => string;
-    iso: (date: Date) => string;
-    short: (date: Date, locale: string) => string;
-    long: (date: Date, locale: string) => string;
-};
+type Formats = 'timeago' | 'iso' | 'short' | 'long';
 export type LastUpdatedProps = {
     lastModified: Date;
-    format?: keyof typeof FORMATS;
+    format?: Formats;
     locale?: string;
     className?: string;
 };

package/lib/components/LastUpdated/LastUpdated.js

@@ -27,22 +27,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LastUpdated = LastUpdated;
-const React = __importStar(require("react"));
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const timeago_js_1 = require("timeago.js");
-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],
-    short: (date, locale) => date.toLocaleDateString(locale, { month: 'short', day: 'numeric', year: 'numeric' }),
-    long: (date, locale) => date.toLocaleDateString(locale, { month: 'long', day: 'numeric', year: 'numeric' }),
-};
+const hooks_1 = require("../../core/hooks");
 function LastUpdated(props) {
     const { markdown: { lastUpdatedBlock = {} } = {} } = (0, hooks_1.useThemeConfig)();
     const { useTranslate, useL10nConfig } = (0, hooks_1.useThemeHooks)();
+    const { format: timeagoFormat } = (0, hooks_1.useTimeAgo)();
     const { translate } = useTranslate();
     const { currentLocale } = useL10nConfig();
+    const formats = (0, react_1.useMemo)(() => ({
+        timeago: (date) => timeagoFormat(date),
+        iso: (date) => date.toISOString().split('T')[0],
+        short: (date, locale) => date.toLocaleDateString(locale, { month: 'short', day: 'numeric', year: 'numeric' }),
+        long: (date, locale) => date.toLocaleDateString(locale, { month: 'long', day: 'numeric', year: 'numeric' }),
+    }), [timeagoFormat]);
     if (lastUpdatedBlock === null || lastUpdatedBlock === void 0 ? void 0 : lastUpdatedBlock.hide) {
         return null;
     }
@@ -52,15 +52,15 @@ function LastUpdated(props) {
         lastUpdatedBlock.locale ||
         (currentLocale !== constants_1.DEFAULT_LOCALE_PLACEHOLDER ? currentLocale || 'en-US' : 'en-US');
     const isoDate = lastModified.toISOString().split('T')[0];
-    const lastUpdatedString = FORMATS[format](lastModified, locale);
+    const lastUpdatedString = formats[format](lastModified, locale);
     const translationKey = format === 'timeago' ? 'page.lastUpdated.timeago' : 'page.lastUpdated.on';
     const text = format === 'timeago'
         ? translate(translationKey, 'Last updated') + ' '
         : translate(translationKey, 'Last updated on');
-    return (React.createElement(LastUpdatedWrapper, { className: props.className, "data-component-name": "LastUpdated/LastUpdated", rawOnPrint: format === 'timeago', "data-print-datetime": isoDate, "data-translation-key": translationKey },
+    return (react_1.default.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)));
+        react_1.default.createElement("time", { dateTime: isoDate }, lastUpdatedString)));
 }
 const LastUpdatedWrapper = styled_components_1.default.div `
   color: var(--last-updated-text-color);

package/lib/components/Menu/MenuItem.js

@@ -51,7 +51,7 @@ function MenuItem(props) {
     const isDrilldown = type === constants_1.MenuItemType.DrillDown;
     const isNested = type === constants_1.MenuItemType.Group;
     const hasChevron = isNested && !isDrilldown;
-    const isOperation = type === constants_1.MenuItemType.Operation;
+    const hasHttpTag = !!item.httpVerb || type === constants_1.MenuItemType.Operation;
     const handleOnClick = () => {
         var _a;
         (_a = telemetry.send) === null || _a === void 0 ? void 0 : _a.call(telemetry, 'sidebar_item_clicked', { label: item.label, type: item.type });
@@ -72,7 +72,7 @@ function MenuItem(props) {
                 item.external ? react_1.default.createElement(LaunchIcon_1.LaunchIcon, { size: "var(--menu-item-external-icon-size)" }) : null),
             item.sublabel ? (react_1.default.createElement(MenuItemSubLabel, null, translate(item.subLabelTranslationKey, item.sublabel))) : null),
         isDrilldown ? react_1.default.createElement(ArrowRightIcon_1.ArrowRightIcon, { size: "12px" }) : null,
-        isOperation ? (react_1.default.createElement(HttpTag_1.HttpTag, { color: httpColor || '' }, item.httpVerb === 'hook' ? 'event' : item.httpVerb)) : null));
+        hasHttpTag ? (react_1.default.createElement(HttpTag_1.HttpTag, { color: httpColor || '' }, item.httpVerb === 'hook' ? 'event' : item.httpVerb)) : null));
     return (react_1.default.createElement(MenuItemWrapper, { "data-component-name": "Menu/MenuItem", className: generateClassName({ type, item, className }) },
         item.link ? (react_1.default.createElement(MenuItemLink, { to: item.link, external: item.external, target: item.target, languageInsensitive: item.languageInsensitive }, label)) : (label),
         isNested ? (react_1.default.createElement(MenuItemNestedWrapper, { depth: depth, ref: nestedMenuRef, style: style }, isExpanded || !canUnmount ? props.children : null)) : null,

package/lib/components/Panel/variables.js

@@ -333,6 +333,7 @@ exports.apiReferencePanels = (0, styled_components_1.css) `
   .panel-servers-list,
   .panel-request-samples,
   .panel-response-samples,
+  .panel-messages-samples,
   .panel-callback-samples {
     --text-color: var(--panel-samples-text-color);
     --panel-text-color: var(--panel-samples-text-color); // @presenter Color

package/lib/components/SidebarActions/SidebarActions.d.ts

@@ -4,11 +4,11 @@ export { LayoutVariant };
 export type SidebarActionsProps = {
     layout: LayoutVariant;
     collapsedSidebar: boolean;
-    isOpenapiDocs: boolean;
+    isApiDocs: boolean;
     hideCollapseSidebarButton?: boolean;
     onChangeViewClick: () => void;
     onChangeCollapseSidebarClick: () => void;
     requestAccessButton?: React.ReactElement | null;
     className?: string;
 };
-export declare const SidebarActions: ({ layout, hideCollapseSidebarButton, collapsedSidebar, isOpenapiDocs, onChangeViewClick, onChangeCollapseSidebarClick, requestAccessButton, className, }: SidebarActionsProps) => React.JSX.Element;
+export declare const SidebarActions: ({ layout, hideCollapseSidebarButton, collapsedSidebar, isApiDocs, onChangeViewClick, onChangeCollapseSidebarClick, requestAccessButton, className, }: SidebarActionsProps) => React.JSX.Element;

package/lib/components/SidebarActions/SidebarActions.js

@@ -13,7 +13,7 @@ const Button_1 = require("../../components/Button/Button");
 const SidePanelCloseIcon_1 = require("../../icons/SidePanelCloseIcon/SidePanelCloseIcon");
 const SidePanelOpenIcon_1 = require("../../icons/SidePanelOpenIcon/SidePanelOpenIcon");
 const styled_1 = require("../../components/SidebarActions/styled");
-const SidebarActions = ({ layout, hideCollapseSidebarButton = false, collapsedSidebar, isOpenapiDocs, onChangeViewClick, onChangeCollapseSidebarClick, requestAccessButton, className, }) => {
+const SidebarActions = ({ layout, hideCollapseSidebarButton = false, collapsedSidebar, isApiDocs, onChangeViewClick, onChangeCollapseSidebarClick, requestAccessButton, className, }) => {
     const { useTelemetry, useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const telemetry = useTelemetry();
@@ -30,7 +30,7 @@ const SidebarActions = ({ layout, hideCollapseSidebarButton = false, collapsedSi
             }, title: collapsedSidebar
                 ? translate('sidebar.actions.show', 'Show sidebar')
                 : translate('sidebar.actions.hide', 'Hide sidebar'), size: "small", variant: "outlined", icon: collapsedSidebar ? react_1.default.createElement(SidePanelOpenIcon_1.SidePanelOpenIcon, null) : react_1.default.createElement(SidePanelCloseIcon_1.SidePanelCloseIcon, null) })),
-        isOpenapiDocs && (react_1.default.createElement(styled_1.ControlsWrapChangeLayoutButtons, { isCollapsed: collapsedSidebar },
+        isApiDocs && (react_1.default.createElement(styled_1.ControlsWrapChangeLayoutButtons, { isCollapsed: collapsedSidebar },
             react_1.default.createElement(ChangeViewButton_1.ChangeViewButton, { collapsedSidebar: collapsedSidebar, layout: layout, onClick: () => {
                     var _a;
                     onChangeViewClick();

package/lib/components/Tag/Tag.d.ts

@@ -3,8 +3,10 @@ type DefaultStatusColor = 'success' | 'processing' | 'error' | 'warning' | 'defa
 type ActionStatusColor = 'approved' | 'declined' | 'pending';
 type SubjectStatusColor = 'active' | 'draft' | 'deprecated' | 'product';
 type HttpColor = 'get' | 'post' | 'put' | 'delete' | 'option' | 'patch' | 'head' | 'hook' | 'link';
+type ActionColor = 'receive' | 'send';
+type ChannelColor = 'channel';
 type HttpStatusColor = 'http-deprecated';
-type StatusColor = DefaultStatusColor | ActionStatusColor | SubjectStatusColor | HttpColor | HttpStatusColor;
+type StatusColor = DefaultStatusColor | ActionStatusColor | SubjectStatusColor | HttpColor | ActionColor | ChannelColor | HttpStatusColor;
 type Color = 'red' | 'green' | 'blue' | 'grey' | 'gold' | 'cyan' | 'magenta' | 'purple' | 'lime' | 'geekblue' | 'yellow';
 export type TagProps = {
     className?: string;

package/lib/components/Tag/variables.dark.js

@@ -24,6 +24,19 @@ exports.tagDarkMode = (0, styled_components_1.css) `
   --tag-operation-color-options: #1a1c21; // @presenter Color
   --tag-operation-bg-color-options: #2a2b33; // @presenter Color
 
+  --tag-action-color-receive: #4db144; // @presenter Color
+  --tag-action-color-sub: #4db144; // @presenter Color
+  --tag-action-color-consume: #4db144; // @presenter Color
+
+  --tag-action-color-send: #4144F6; // @presenter Color
+  --tag-action-color-pub: #4144F6; // @presenter Color
+  --tag-action-color-publish: #4144f6; // @presenter Color
+
+  --tag-action-color-channel: #F0870E; // @presenter Color
+  --tag-action-color-topic: #F0870E; // @presenter Color
+  --tag-action-color-queue: #D72E81; // @presenter Color
+  --tag-action-color-exchange: #C79CF2; // @presenter Color
+
   .tag-grey,
   .tag-draft,
   .tag-schema,

package/lib/components/Tag/variables.js

@@ -197,9 +197,23 @@ exports.tag = (0, styled_components_1.css) `
   
   --tag-operation-color-deprecated: var(--text-color-disabled); // @presenter Color
 
+  --tag-action-color-receive: #4db144; // @presenter Color
+  --tag-action-color-sub: #4db144; // @presenter Color
+  --tag-action-color-consume: #4db144; // @presenter Color
+
+  --tag-action-color-send: #4144f6; // @presenter Color
+  --tag-action-color-pub: #4144f6; // @presenter Color
+  --tag-action-color-publish: #4144f6; // @presenter Color
+
+  --tag-action-color-channel: #F0870E; // @presenter Color
+  --tag-action-color-topic: #F0870E; // @presenter Color
+  --tag-action-color-queue: #D72E81; // @presenter Color
+  --tag-action-color-exchange: #9B51E0; // @presenter Color
+
   .tag-delete {
       --tag-color: var(--tag-operation-color-delete); // @presenter Color
   }
+
   .tag-get {
       --tag-color: var(--tag-operation-color-get); // @presenter Color
   }
@@ -219,7 +233,52 @@ exports.tag = (0, styled_components_1.css) `
   .tag-http-deprecated {
       --tag-color: var(--tag-operation-color-deprecated) // @presenter Color
   }
+  
+  .tag-receive {
+      --tag-color: var(--tag-action-color-receive); // @presenter Color
+  }
+
+  .tag-send {
+      --tag-color: var(--tag-action-color-send); // @presenter Color
+  }
+
+  .tag-pub {
+      --tag-color: var(--tag-action-color-pub); // @presenter Color
+  }
+
+  .tag-sub {
+      --tag-color: var(--tag-action-color-sub); // @presenter Color
+  }
 
+  .tag-consume {
+      --tag-color: var(--tag-action-color-consume); // @presenter Color
+  }
+
+  .tag-publish {
+      --tag-color: var(--tag-action-color-publish); // @presenter Color
+  }
+
+  .tag-channel {
+      --tag-color: var(--tag-action-color-channel); // @presenter Color
+  }
+
+  .tag-topic {
+      --tag-color: var(--tag-action-color-channel); // @presenter Color
+  }
+
+  .tag-queue {
+      --tag-color: var(--tag-action-color-queue); // @presenter Color
+  }
+
+  .tag-exchange {
+      --tag-color: var(--tag-action-color-exchange); // @presenter Color
+  }
+      
+  // shorten alias for exchange tag:
+  .tag-exch {
+      --tag-color: var(--tag-action-color-exchange); // @presenter Color
+  }
+      
   // @tokens End
 `;
 //# sourceMappingURL=variables.js.map

package/lib/components/Tooltip/TooltipWrapper.d.ts

@@ -0,0 +1,12 @@
+import { ReactElement } from 'react';
+import type { TooltipProps } from '../../components/Tooltip/Tooltip';
+export type TooltipWrapperProps = {
+    children: ReactElement;
+    tooltipKey: string;
+    placement?: TooltipProps['placement'];
+    width?: string;
+    className?: string;
+    showOnHover?: boolean;
+    disabled?: boolean;
+};
+export declare function TooltipWrapper({ children, tooltipKey, placement, width, className, showOnHover, disabled, }: TooltipWrapperProps): JSX.Element;

package/lib/components/Tooltip/TooltipWrapper.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipWrapper = TooltipWrapper;
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../../core/hooks");
+const Tooltip_1 = require("../../components/Tooltip/Tooltip");
+function TooltipWrapper({ children, tooltipKey, placement = 'top', width = 'max-content', className = '', showOnHover = true, disabled = false, }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const tooltip = (0, hooks_1.useControl)();
+    const { translate } = useTranslate();
+    const handleMouseEnter = () => {
+        if (showOnHover && !disabled) {
+            tooltip.handleOpen();
+        }
+    };
+    const handleMouseLeave = () => {
+        if (showOnHover) {
+            tooltip.handleClose();
+        }
+    };
+    const handleClick = () => {
+        if (showOnHover) {
+            tooltip.handleClose();
+        }
+    };
+    return (react_1.default.createElement(Tooltip_1.Tooltip, { className: className, tip: translate(tooltipKey), isOpen: tooltip.isOpened, placement: placement, width: width },
+        react_1.default.createElement(TooltipEventWrapper, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick }, children)));
+}
+const TooltipEventWrapper = styled_components_1.default.div `
+  display: contents;
+`;
+//# sourceMappingURL=TooltipWrapper.js.map

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

@@ -24,3 +24,4 @@ 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';
+export * from '../../../core/hooks/__mocks__/use-time-ago';

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

@@ -40,4 +40,5 @@ __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);
+__exportStar(require("../../../core/hooks/__mocks__/use-time-ago"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/__mocks__/use-time-ago.d.ts

@@ -0,0 +1,3 @@
+export declare const useTimeAgo: jest.Mock<{
+    format: () => "5 days ago";
+}, [], any>;

package/lib/core/hooks/__mocks__/use-time-ago.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTimeAgo = void 0;
+exports.useTimeAgo = jest.fn(() => ({
+    format: () => '5 days ago',
+}));
+//# sourceMappingURL=use-time-ago.js.map

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

@@ -34,3 +34,4 @@ 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';
+export * from '../../core/hooks/use-time-ago';

package/lib/core/hooks/index.js

@@ -50,4 +50,5 @@ __exportStar(require("../../core/hooks/code-walkthrough/use-code-walkthrough-con
 __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);
+__exportStar(require("../../core/hooks/use-time-ago"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/use-time-ago.d.ts

@@ -0,0 +1,3 @@
+export declare function useTimeAgo(): {
+    format: (date: Date) => string;
+};

package/lib/core/hooks/use-time-ago.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTimeAgo = useTimeAgo;
+const react_1 = require("react");
+const hooks_1 = require("../../core/hooks");
+const timeUnits = ['second', 'minute', 'hour', 'day', 'week', 'month', 'year'];
+const timeUnitConversions = [
+    60, // 60 seconds in 1 min
+    60, // 60 mins in 1 hour
+    24, // 24 hours in 1 day
+    7, // 7 days in 1 week
+    365 / 7 / 12, // 4.345238095238096 weeks in 1 month
+    12, // 12 months in 1 year
+];
+function useTimeAgo() {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const format = (0, react_1.useCallback)((date) => {
+        let timeUnitIndex = 0;
+        let elapsedTime = (Date.now() - date.getTime()) / 1000;
+        for (; elapsedTime >= timeUnitConversions[timeUnitIndex] &&
+            timeUnitIndex < timeUnitConversions.length; timeUnitIndex++) {
+            elapsedTime /= timeUnitConversions[timeUnitIndex];
+        }
+        elapsedTime = Math.floor(elapsedTime);
+        if (timeUnitIndex === 0)
+            return translate('time.justNow', 'just now');
+        let timeUnit = timeUnits[timeUnitIndex];
+        if (elapsedTime > 1)
+            timeUnit = `${timeUnit}s`;
+        const translationKey = `time.past.${timeUnit}`;
+        return translate(translationKey, {
+            defaultValue: `${elapsedTime} ${timeUnit} ago`,
+            count: elapsedTime,
+            replace: { value: elapsedTime },
+        });
+    }, [translate]);
+    return { format };
+}
+//# sourceMappingURL=use-time-ago.js.map

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

@@ -0,0 +1 @@
+export type Plural<T extends string> = `${T}s`;

package/lib/core/types/common.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=common.js.map

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

@@ -130,5 +130,5 @@ export type L10nConfig = {
     }[];
 };
 type TelemetryEvent = 'search_opened' | 'client_error_caught' | 'breadcrumb_clicked' | 'color_mode_switched' | 'sidebar_item_clicked' | 'sidebar_item_expanded' | 'sidebar_item_collapsed' | 'edit_page_link_clicked' | 'code_snippet_copied' | 'code_snippet_reported' | 'feedback_sent' | 'navbar_menu_item_clicked' | 'login_button_clicked' | 'login_provider_button_clicked' | 'logout_menu_item_clicked' | 'logo_clicked' | 'toc_item_clicked' | 'version_switched' | 'catalog_filter_changed' | 'catalog_item_clicked' | 'scorecard_link_clicked' | 'markdown_anchor_link_clicked' | 'back_to_catalog_button_clicked' | 'sidebar_drilldown_back_button_clicked' | 'footer_item_clicked' | 'request_api_access_button_clicked' | 'sidebar_samples_button_clicked' | 'change_layout_button_clicked' | 'version_picker_selection_change' | 'openapi_docs' | 'replay' | 'catalog_actions_button_clicked' | 'catalog_item_clicked' | 'filter_checkbox_toggled' | 'language_picker_locale_changed' | 'mobile_menu_button_close_clicked' | 'mobile_menu_button_open_clicked' | 'search_input_reset_button_clicked' | 'search_recent_remove_button_clicked' | 'product_picked';
-type OtelTelemetryEvent = 'page.viewed' | 'error' | 'search.ai.query' | 'search.query' | 'search.result.clicked' | 'openapi_docs.viewed' | 'openapi_docs.performance_metrics' | 'openapi_docs.download_definition.clicked' | 'openapi_docs.select_language.clicked' | 'openapi_docs.expand_collapse_all.clicked' | 'openapi_docs.copy_code_snippet.clicked' | 'openapi_docs.switch_servers.clicked' | 'openapi_docs.examples_switcher.clicked' | 'openapi_docs.try_it.opened';
+type OtelTelemetryEvent = 'page.viewed' | 'error' | 'search.ai.query' | 'search.query' | 'search.result.clicked' | 'openapi_docs.viewed' | 'openapi_docs.performance_metrics' | 'openapi_docs.download_definition.clicked' | 'openapi_docs.select_language.clicked' | 'openapi_docs.expand_collapse_all.clicked' | 'openapi_docs.copy_code_snippet.clicked' | 'openapi_docs.switch_servers.clicked' | 'openapi_docs.examples_switcher.clicked' | 'openapi_docs.try_it.opened' | 'asyncapi_docs.performance_metrics' | 'asyncapi_docs.viewed' | 'asyncapi_docs.switch_message.clicked' | 'asyncapi_docs.switch_example.clicked' | 'asyncapi_docs.message.clicked';
 export {};

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

@@ -11,3 +11,4 @@ export * from '../../core/types/sidebar';
 export * from '../../core/types/filter';
 export * from '../../core/types/user-menu';
 export * from '../../core/types/user-claims';
+export * from '../../core/types/common';

package/lib/core/types/index.js

@@ -27,4 +27,5 @@ __exportStar(require("../../core/types/sidebar"), exports);
 __exportStar(require("../../core/types/filter"), exports);
 __exportStar(require("../../core/types/user-menu"), exports);
 __exportStar(require("../../core/types/user-claims"), exports);
+__exportStar(require("../../core/types/common"), exports);
 //# sourceMappingURL=index.js.map

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.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 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' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | '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' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years';
 export type Locale = {
     code: string;
     name: string;

package/lib/icons/ArrowDownIcon/ArrowDownIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const ArrowDownIcon: 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/ArrowDownIcon/ArrowDownIcon.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.ArrowDownIcon = 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({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M12.295 8.295L8.5 12.085V2H7.5V12.085L3.705 8.295L3 9L8 14L13 9L12.295 8.295Z", fill: "#1A1C21" })));
+exports.ArrowDownIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/ArrowDownIcon/ArrowDownIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=ArrowDownIcon.js.map

package/lib/icons/CurveAutoColonIcon/CurveAutoColonIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const CurveAutoColonIcon: 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">;