@redocly/theme 0.67.0-next.0 → 0.67.0-next.2

package/lib/components/Admonition/Admonition.js

@@ -53,10 +53,10 @@ const IconsMap = {
 };
 function Admonition({ type = 'info', name, children, className, 'data-source': dataSource, 'data-hash': dataHash, }) {
     const Icon = IconsMap[type] || IconsMap['info'];
-    return (react_1.default.createElement(AdmonitionWrapper, { type: type, className: className, "data-component-name": "Admonition/Admonition", "data-source": dataSource, "data-hash": dataHash },
+    return (react_1.default.createElement(AdmonitionWrapper, { $type: type, className: className, "data-component-name": "Admonition/Admonition", "data-source": dataSource, "data-hash": dataHash },
         react_1.default.createElement(Icon, { color: `--admonition-${type}-icon-color` }),
         react_1.default.createElement(TextContainer, null,
-            name ? react_1.default.createElement(Heading, { type: type }, name) : null,
+            name ? react_1.default.createElement(Heading, { $type: type }, name) : null,
             children ? react_1.default.createElement(Content, null, children) : null)));
 }
 const Content = styled_components_1.default.div `
@@ -82,10 +82,10 @@ const AdmonitionWrapper = styled_components_1.default.div `
   print-color-adjust: exact;
   -webkit-print-color-adjust: exact;
 
-  ${({ type }) => (0, styled_components_1.css) `
-    background-color: var(--admonition-${type}-bg-color);
-    color: var(--admonition-${type}-text-color);
-    border: var(--admonition-${type}-border);
+  ${({ $type }) => (0, styled_components_1.css) `
+    background-color: var(--admonition-${$type}-bg-color);
+    color: var(--admonition-${$type}-text-color);
+    border: var(--admonition-${$type}-border);
   `};
 
   &:not(:has(${Content})) {
@@ -102,9 +102,9 @@ const AdmonitionWrapper = styled_components_1.default.div `
     flex-shrink: 0;
     margin: var(--admonition-icon-margin);
 
-    fill: ${({ type }) => `var(--admonition-${type}-icon-color)`};
+    fill: ${({ $type }) => `var(--admonition-${$type}-icon-color)`};
 
-    background-image: ${({ type }) => `var(--admonition-${type}-icon)`};
+    background-image: ${({ $type }) => `var(--admonition-${$type}-icon)`};
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
@@ -118,7 +118,7 @@ const TextContainer = styled_components_1.default.div `
 `;
 const Heading = styled_components_1.default.div `
   letter-spacing: var(--admonition-heading-letter-spacing);
-  color: ${({ type }) => `var(--admonition-${type}-heading-text-color)`};
+  color: ${({ $type }) => `var(--admonition-${$type}-heading-text-color)`};
 
   && {
     font-size: var(--admonition-heading-font-size);

package/lib/components/Badge/Badge.d.ts

@@ -6,4 +6,4 @@ export type BadgeProps = PropsWithChildren<{
     className?: string;
     icon?: string;
 }>;
-export declare function Badge({ icon, children, ...props }: BadgeProps): JSX.Element;
+export declare function Badge({ icon, children, deprecated, color, ...props }: BadgeProps): JSX.Element;

package/lib/components/Badge/Badge.js

@@ -52,8 +52,8 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const GenericIcon_1 = require("../../icons/GenericIcon/GenericIcon");
 function Badge(_a) {
-    var { icon, children } = _a, props = __rest(_a, ["icon", "children"]);
-    return (react_1.default.createElement(BadgeComponent, Object.assign({}, props, { "data-component-name": "Badge/Badge" }),
+    var { icon, children, deprecated, color } = _a, props = __rest(_a, ["icon", "children", "deprecated", "color"]);
+    return (react_1.default.createElement(BadgeComponent, Object.assign({}, props, { $color: color, $deprecated: deprecated, "data-component-name": "Badge/Badge" }),
         icon ? react_1.default.createElement(BadgeIcon, { icon: icon }) : null,
         children));
 }
@@ -63,13 +63,13 @@ const BadgeComponent = styled_components_1.default.span `
   vertical-align: middle;
   line-height: var(--line-height-base);
   color: var(--badge-text-color);
-  background-color: ${({ color }) => color || 'var(--badge-bg-color)'};
+  background-color: ${({ $color }) => $color || 'var(--badge-bg-color)'};
   border-radius: var(--badge-border-radius);
   margin: 0 0 0 0.5em;
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-regular);
 
-  ${({ deprecated }) => deprecated &&
+  ${({ $deprecated }) => $deprecated &&
     (0, styled_components_1.css) `
       color: var(--badge-deprecated-text-color);
       background-color: var(--badge-deprecated-bg-color);

package/lib/components/Button/Button.d.ts

@@ -22,6 +22,6 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     onClick?: (e?: any) => void;
     ref?: React.Ref<HTMLButtonElement>;
 }
-export declare function generateClassName({ variant, tone, size, extraClass }: ButtonProps): string;
+export declare function generateClassName({ variant, tone, size, extraClass, className }: ButtonProps): string;
 export declare const Button: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<ButtonProps, keyof ButtonProps> & ButtonProps, never> & Partial<Pick<import("styled-components").FastOmit<ButtonProps, keyof ButtonProps> & ButtonProps, never>>> & string & Omit<React.FC<ButtonProps>, keyof React.Component<any, {}, any>>;
 export {};

package/lib/components/Button/Button.js

@@ -74,23 +74,22 @@ const StyledButtonLink = (0, styled_components_1.default)(Link_1.Link) `
   }
   border-radius: var(--button-border-radius);
 `;
-function generateClassName({ variant = 'secondary', tone = 'default', size = 'medium', extraClass = '', }) {
+function generateClassName({ variant = 'secondary', tone = 'default', size = 'medium', extraClass = '', className = '', }) {
     const classNames = [
         'button',
         extraClass,
         `button-tone-${tone}`,
         `button-variant-${variant}`,
         `button-size-${size}`,
+        className,
     ];
     return classNames
         .filter((className) => className)
         .join(' ')
         .trim();
 }
-const StyledButton = styled_components_1.default.button.attrs((props) => ({
-    className: generateClassName(props),
-})) `
-  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+const StyledButton = styled_components_1.default.button `
+  width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};
 
   display: inline-flex;
   align-items: center;
@@ -109,8 +108,8 @@ const StyledButton = styled_components_1.default.button.attrs((props) => ({
   font-weight: var(--button-font-weight);
   font-size: var(--button-font-size);
   line-height: var(--button-line-height);
-  padding: ${({ icon, iconPosition, iconOnly }) => icon
-    ? `var(--button-icon-${iconOnly ? '' : `${iconPosition || 'left'}-`}padding)`
+  padding: ${({ $icon, $iconPosition, $iconOnly }) => $icon
+    ? `var(--button-icon-${$iconOnly ? '' : `${$iconPosition || 'left'}-`}padding)`
     : 'var(--button-padding)'};
   border-radius: var(--button-border-radius);
 
@@ -162,29 +161,29 @@ const StyledButton = styled_components_1.default.button.attrs((props) => ({
     border-width: var(--button-border-width-disabled);
   }
 
-  ${({ variant, size }) => (variant === 'link' || variant === 'ghost') &&
-    size === 'small' &&
+  ${({ $variant, $size }) => ($variant === 'link' || $variant === 'ghost') &&
+    $size === 'small' &&
     (0, styled_components_1.css) `
       --button-font-size: var(--font-size-sm);
       --button-line-height: var(--line-height-sm);
       --button-icon-padding: var(--button-icon-padding-small) !important;
     `}
 
-  ${({ blinking }) => blinking &&
+  ${({ $blinking }) => $blinking &&
     (0, styled_components_1.css) `
       pointer-events: none;
       animation: ${getBlink()} 1.2s infinite;
     `}
 `;
 const ButtonComponent = (props) => {
-    const { languageInsensitive } = props, buttonProps = __rest(props, ["languageInsensitive"]);
+    const { languageInsensitive, fullWidth, blinking, iconPosition, icon, children, variant, tone, size, extraClass, to, external, className } = props, rest = __rest(props, ["languageInsensitive", "fullWidth", "blinking", "iconPosition", "icon", "children", "variant", "tone", "size", "extraClass", "to", "external", "className"]);
     const tabIndex = 'tabIndex' in props ? props.tabIndex : props.to ? -1 : undefined;
-    const button = (react_1.default.createElement(StyledButton, Object.assign({ "data-component-name": "Button/Button" }, buttonProps, { iconOnly: !props.children && props.icon !== null, tabIndex: tabIndex }),
-        props.icon && props.iconPosition !== 'right' && props.icon,
-        props.children,
-        props.icon && props.iconPosition === 'right' && props.icon));
-    if (props.to) {
-        return (react_1.default.createElement(StyledButtonLink, { to: props.to, external: props.external, languageInsensitive: languageInsensitive, onClick: props.onClick }, button));
+    const button = (react_1.default.createElement(StyledButton, Object.assign({ "data-component-name": "Button/Button" }, rest, { className: generateClassName({ variant, tone, size, extraClass, className }), $fullWidth: fullWidth, $blinking: blinking, $iconPosition: iconPosition, $icon: icon, $iconOnly: !children && icon != null, $variant: variant, $size: size, tabIndex: tabIndex }),
+        icon && iconPosition !== 'right' && icon,
+        children,
+        icon && iconPosition === 'right' && icon));
+    if (to) {
+        return (react_1.default.createElement(StyledButtonLink, { to: to, external: external, languageInsensitive: languageInsensitive, onClick: props.onClick }, button));
     }
     else {
         return button;

package/lib/components/Buttons/AIAssistantButton.js

@@ -89,7 +89,9 @@ function AIAssistantButton() {
         setIsOpen(true);
         telemetry.sendSearchAiOpenedMessage([
             {
+                id: 'aiAssistantTriggerButton',
                 object: 'search',
+                uri: 'urn:redocly:realm:ui:search:aiAssistantTriggerButton',
                 method: 'ai_trigger_button',
             },
         ]);

package/lib/components/Catalog/CatalogActionsRow.js

@@ -52,7 +52,9 @@ function CatalogActionsRow({ searchQuery, setSearchQuery, sortOption, setSortOpt
             viewMode === 'cards' && (react_1.default.createElement(CatalogSortButton_1.CatalogSortButton, { onSortChange: setSortOption, currentSort: sortOption })),
             viewMode && onViewModeChange && (react_1.default.createElement(CatalogViewModeToggle_1.CatalogViewModeToggle, { viewMode: viewMode, onViewModeChange: onViewModeChange })))));
 }
-exports.CatalogActionsRowWrapper = styled_components_1.default.div `
+exports.CatalogActionsRowWrapper = styled_components_1.default.div.withConfig({
+    shouldForwardProp: (prop) => prop !== 'isDetailsPage',
+}) `
   display: flex;
   align-items: center;
 

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

@@ -1,5 +1,7 @@
 import React from 'react';
+type CatalogAvatarSize = 'small' | 'medium' | 'large';
 export declare function CatalogAvatar({ value, size }: {
     value: string;
-    size: 'small' | 'medium' | 'large';
+    size: CatalogAvatarSize;
 }): React.JSX.Element;
+export {};

package/lib/components/Catalog/CatalogAvatar.js

@@ -58,8 +58,8 @@ const extractInitials = (value) => {
     }
     return initials[0] + initials[initials.length - 1];
 };
-function CatalogAvatar({ value, size, }) {
-    return (react_1.default.createElement(CatalogAvatarWrapper, { "data-component-name": "Catalog/CatalogAvatar", size: size }, extractInitials(value)));
+function CatalogAvatar({ value, size }) {
+    return (react_1.default.createElement(CatalogAvatarWrapper, { "data-component-name": "Catalog/CatalogAvatar", $size: size }, extractInitials(value)));
 }
 const CatalogAvatarWrapper = styled_components_1.default.div `
   display: flex;
@@ -70,7 +70,7 @@ const CatalogAvatarWrapper = styled_components_1.default.div `
   flex-shrink: 0;
   font-weight: var(--catalog-avatar-font-weight);
   line-height: var(--catalog-avatar-line-height);
-  ${({ size }) => SIZES[size]};
+  ${({ $size }) => SIZES[$size]};
 `;
 const SIZES = {
     small: (0, styled_components_1.css) `

package/lib/components/Catalog/CatalogCardView/CatalogCard.js

@@ -29,7 +29,7 @@ function CatalogCard({ entity, catalogConfig }) {
             react_1.default.createElement(CardHeader, null,
                 react_1.default.createElement(HeaderIconWrapper, null,
                     react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entity.type })),
-                react_1.default.createElement(HeaderIconText, { entityType: entity.type }, entity.type)),
+                react_1.default.createElement(HeaderIconText, { $entityType: entity.type }, entity.type)),
             react_1.default.createElement(CardDescription, null,
                 react_1.default.createElement(CardTitle, null,
                     react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, entity.title)),
@@ -59,7 +59,7 @@ function CatalogCard({ entity, catalogConfig }) {
                             variant: 'outline',
                         } })))),
         react_1.default.createElement(Divider, null),
-        react_1.default.createElement(CardFooter, { hasTags: !!((_c = entity.tags) === null || _c === void 0 ? void 0 : _c.length) },
+        react_1.default.createElement(CardFooter, { $hasTags: !!((_c = entity.tags) === null || _c === void 0 ? void 0 : _c.length) },
             react_1.default.createElement(CatalogTags_1.CatalogTags, { items: entity.tags || [], tagProps: {
                     style: {
                         fontSize: 'var(--catalog-card-font-size)',
@@ -86,7 +86,7 @@ const HeaderIconWrapper = styled_components_1.default.div `
   margin-right: var(--catalog-card-icon-margin-right);
 `;
 const HeaderIconText = styled_components_1.default.div `
-  color: ${({ entityType }) => `var(--catalog-entity-icon-color-${entityType})`};
+  color: ${({ $entityType }) => `var(--catalog-entity-icon-color-${$entityType})`};
 `;
 const CardHeader = styled_components_1.default.div `
   display: flex;
@@ -134,7 +134,7 @@ const CardFooter = styled_components_1.default.div `
   height: var(--catalog-card-footer-height);
   display: flex;
   align-items: center;
-  justify-content: ${({ hasTags }) => (hasTags ? 'space-between' : 'flex-end')};
+  justify-content: ${({ $hasTags }) => ($hasTags ? 'space-between' : 'flex-end')};
   padding: var(--catalog-card-padding-vertical) var(--catalog-card-padding-horizontal);
 `;
 const Divider = styled_components_1.default.div `

package/lib/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsNodeContent.js

@@ -10,11 +10,11 @@ const CatalogEntityIcon_1 = require("../../../../components/Catalog/CatalogEntit
 const utils_1 = require("../../../../core/utils");
 function CatalogEntityRelationsNodeContent({ entityType, label, isRoot, }) {
     const formattedEntityType = (0, utils_1.customCatalogOptionsCasing)(entityType);
-    return (react_1.default.createElement(CatalogEntityRelationsNodeContentWrapper, { isRoot: isRoot, "data-component-name": "Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsNodeContent" },
-        react_1.default.createElement(CatalogEntityRelationsNodeTypeRow, { isRoot: isRoot },
+    return (react_1.default.createElement(CatalogEntityRelationsNodeContentWrapper, { $isRoot: isRoot, "data-component-name": "Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsNodeContent" },
+        react_1.default.createElement(CatalogEntityRelationsNodeTypeRow, { $isRoot: isRoot },
             isRoot ? (react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entityType, forceColor: "var(--catalog-entity-relations-node-root-icon-color)" })) : (react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entityType, defaultColor: false })),
             react_1.default.createElement("span", null, formattedEntityType)),
-        react_1.default.createElement(CatalogEntityRelationsNodeLabelRow, { isRoot: isRoot }, label)));
+        react_1.default.createElement(CatalogEntityRelationsNodeLabelRow, { $isRoot: isRoot }, label)));
 }
 const CatalogEntityRelationsNodeTypeRow = styled_components_1.default.div `
   display: flex;
@@ -22,7 +22,7 @@ const CatalogEntityRelationsNodeTypeRow = styled_components_1.default.div `
   gap: var(--catalog-entity-relations-node-gap);
   line-height: var(--line-height-sm);
   font-size: var(--font-size-sm);
-  color: ${({ isRoot }) => isRoot
+  color: ${({ $isRoot }) => $isRoot
     ? 'var(--catalog-entity-relations-node-root-text-color)'
     : 'var(--text-color-description)'};
 `;
@@ -32,7 +32,7 @@ const CatalogEntityRelationsNodeLabelRow = styled_components_1.default.div `
   gap: var(--catalog-entity-relations-node-gap);
   line-height: var(--line-height-lg);
   font-size: var(--font-size-lg);
-  color: ${({ isRoot }) => isRoot ? 'var(--catalog-entity-relations-node-root-text-color)' : 'var(--text-color-primary)'};
+  color: ${({ $isRoot }) => $isRoot ? 'var(--catalog-entity-relations-node-root-text-color)' : 'var(--text-color-primary)'};
 `;
 const CatalogEntityRelationsNodeContentWrapper = styled_components_1.default.div `
   display: flex;
@@ -43,10 +43,10 @@ const CatalogEntityRelationsNodeContentWrapper = styled_components_1.default.div
   border-radius: var(--catalog-entity-relations-node-border-radius);
   font-style: normal;
   font-weight: var(--catalog-entity-relations-node-font-weight);
-  background: ${({ isRoot }) => isRoot
+  background: ${({ $isRoot }) => $isRoot
     ? 'var(--catalog-entity-relations-node-root-bg-color)'
     : 'var(--catalog-entity-relations-node-bg-color)'};
-  border: ${({ isRoot }) => isRoot
+  border: ${({ $isRoot }) => $isRoot
     ? 'none'
     : `var(--catalog-entity-relations-node-border-width) var(--catalog-entity-relations-node-border-style) var(--catalog-entity-relations-node-border-color)`};
 `;

package/lib/components/Catalog/CatalogEntity/CatalogEntityInfoBar.js

@@ -7,9 +7,9 @@ exports.CatalogEntityInfoBar = CatalogEntityInfoBar;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 function CatalogEntityInfoBar({ leftContent, rightContent, withSeparator = true, hoverEffect = true, isCodeBlock = false, }) {
-    return (react_1.default.createElement(InfoBarWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityInfoBar", hoverEffect: hoverEffect },
-        react_1.default.createElement(LeftColumn, { withSeparator: withSeparator }, leftContent),
-        rightContent && react_1.default.createElement(RightColumn, { isCodeBlock: isCodeBlock }, rightContent)));
+    return (react_1.default.createElement(InfoBarWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityInfoBar", $hoverEffect: hoverEffect },
+        react_1.default.createElement(LeftColumn, { $withSeparator: withSeparator }, leftContent),
+        rightContent && react_1.default.createElement(RightColumn, { $isCodeBlock: isCodeBlock }, rightContent)));
 }
 const InfoBarWrapper = styled_components_1.default.div `
   display: grid;
@@ -27,7 +27,7 @@ const InfoBarWrapper = styled_components_1.default.div `
   padding: var(--catalog-card-gap);
   margin-bottom: var(--spacing-xs);
 
-  ${({ hoverEffect }) => hoverEffect &&
+  ${({ $hoverEffect }) => $hoverEffect &&
     `
     &:hover {
       border-color: var(--catalog-card-border-color-hover);
@@ -42,7 +42,7 @@ const LeftColumn = styled_components_1.default.div `
   grid-area: left;
   justify-self: start;
   text-align: left;
-  border-right: ${({ withSeparator }) => withSeparator ? '1px solid var(--border-color-primary)' : 'none'};
+  border-right: ${({ $withSeparator }) => $withSeparator ? '1px solid var(--border-color-primary)' : 'none'};
   height: 100%;
   display: flex;
   align-items: center;
@@ -53,6 +53,6 @@ const RightColumn = styled_components_1.default.div `
   grid-area: right;
   justify-self: end;
   text-align: right;
-  width: ${({ isCodeBlock }) => (isCodeBlock ? '100%' : 'auto')};
+  width: ${({ $isCodeBlock }) => ($isCodeBlock ? '100%' : 'auto')};
 `;
 //# sourceMappingURL=CatalogEntityInfoBar.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard.js

@@ -7,7 +7,7 @@ exports.CatalogEntityPropertyCard = CatalogEntityPropertyCard;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 function CatalogEntityPropertyCard({ header, content, onClick, hoverEffect = true, }) {
-    return (react_1.default.createElement(CatalogEntityPropertyWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard", onClick: onClick, hoverEffect: hoverEffect },
+    return (react_1.default.createElement(CatalogEntityPropertyWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard", onClick: onClick, $hoverEffect: hoverEffect },
         react_1.default.createElement(CardHeader, null, header),
         react_1.default.createElement(CardContent, null, content)));
 }
@@ -24,7 +24,7 @@ const CatalogEntityPropertyWrapper = styled_components_1.default.div `
   padding: var(--catalog-card-padding-vertical) var(--catalog-card-padding-horizontal);
   gap: var(--catalog-card-content-gap-vertical);
 
-  ${({ hoverEffect }) => hoverEffect &&
+  ${({ $hoverEffect }) => $hoverEffect &&
     `
     &:hover {
       border-color: var(--catalog-card-border-color-hover);

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations.js

@@ -7,6 +7,7 @@ exports.CatalogEntityApiDescriptionRelations = CatalogEntityApiDescriptionRelati
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Tabs_1 = require("../../../../markdoc/components/Tabs/Tabs");
+const TabItemFragment_1 = require("../../../../markdoc/components/Tabs/TabItemFragment");
 const EntityTypeIcon_1 = require("../../../../icons/EntityTypeIcon/EntityTypeIcon");
 const CatalogEntityDefaultRelations_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations");
 const MoleculesIcon_1 = require("../../../../icons/MoleculesIcon/MoleculesIcon");
@@ -14,16 +15,13 @@ const NetworkIcon_1 = require("../../../../icons/NetworkIcon/NetworkIcon");
 function CatalogEntityApiDescriptionRelations({ entity, relations, query, searchQuery, setSearchQuery, setFilter, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }) {
     return (react_1.default.createElement(TabsWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations" },
         react_1.default.createElement(Tabs_1.Tabs, { key: entity.id, size: Tabs_1.TabsSize.MEDIUM },
-            react_1.default.createElement(TabItem, { label: "Operations", icon: react_1.default.createElement(MoleculesIcon_1.MoleculesIcon, null), onClick: () => setFilter('type:api-operation') },
+            react_1.default.createElement(TabItemFragment_1.TabItemFragment, { label: "Operations", icon: react_1.default.createElement(MoleculesIcon_1.MoleculesIcon, null), onClick: () => setFilter('type:api-operation') },
                 react_1.default.createElement(CatalogEntityDefaultRelations_1.CatalogEntityDefaultRelations, { key: "operations-table", entity: entity, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, shouldShowHeading: false, listType: "api-operation" })),
-            react_1.default.createElement(TabItem, { label: "Schemas", icon: react_1.default.createElement(NetworkIcon_1.NetworkIcon, null), onClick: () => setFilter('type:data-schema') },
+            react_1.default.createElement(TabItemFragment_1.TabItemFragment, { label: "Schemas", icon: react_1.default.createElement(NetworkIcon_1.NetworkIcon, null), onClick: () => setFilter('type:data-schema') },
                 react_1.default.createElement(CatalogEntityDefaultRelations_1.CatalogEntityDefaultRelations, { key: "schemas-table", entity: entity, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, shouldShowHeading: false, listType: "data-schema" })),
-            react_1.default.createElement(TabItem, { label: "Related entities", icon: react_1.default.createElement(EntityTypeIcon_1.EntityTypeIcon, null), onClick: () => setFilter('-type:api-operation,data-schema') },
+            react_1.default.createElement(TabItemFragment_1.TabItemFragment, { label: "Related entities", icon: react_1.default.createElement(EntityTypeIcon_1.EntityTypeIcon, null), onClick: () => setFilter('-type:api-operation,data-schema') },
                 react_1.default.createElement(CatalogEntityDefaultRelations_1.CatalogEntityDefaultRelations, { key: "related-entities-table", entity: entity, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, shouldShowHeading: false })))));
 }
-const TabItem = styled_components_1.default.div `
-  padding: var(--spacing-sm);
-`;
 const TabsWrapper = styled_components_1.default.div `
   --md-tabs-container-margin: none;
 `;

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations.js

@@ -7,6 +7,7 @@ exports.CatalogEntityTeamRelations = CatalogEntityTeamRelations;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Tabs_1 = require("../../../../markdoc/components/Tabs/Tabs");
+const TabItemFragment_1 = require("../../../../markdoc/components/Tabs/TabItemFragment");
 const PeopleIcon_1 = require("../../../../icons/PeopleIcon/PeopleIcon");
 const EntityTypeIcon_1 = require("../../../../icons/EntityTypeIcon/EntityTypeIcon");
 const Tag_1 = require("../../../../components/Tag/Tag");
@@ -48,14 +49,11 @@ const teamColumns = [
 function CatalogEntityTeamRelations({ entity, relations, query, searchQuery, setSearchQuery, setFilter, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations" },
         react_1.default.createElement(Tabs_1.Tabs, { size: Tabs_1.TabsSize.MEDIUM },
-            react_1.default.createElement(TabItem, { label: "Members", icon: react_1.default.createElement(PeopleIcon_1.PeopleIcon, null), onClick: () => setFilter('type:user') },
+            react_1.default.createElement(TabItemFragment_1.TabItemFragment, { label: "Members", icon: react_1.default.createElement(PeopleIcon_1.PeopleIcon, null), onClick: () => setFilter('type:user') },
                 react_1.default.createElement(CatalogEntityRelationsTable_1.CatalogEntityRelationsTable, { key: "members-table", entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, columns: teamColumns, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, listType: "team" })),
-            react_1.default.createElement(TabItem, { label: "Related entities", icon: react_1.default.createElement(EntityTypeIcon_1.EntityTypeIcon, null), onClick: () => setFilter('-type:user') },
+            react_1.default.createElement(TabItemFragment_1.TabItemFragment, { label: "Related entities", icon: react_1.default.createElement(EntityTypeIcon_1.EntityTypeIcon, null), onClick: () => setFilter('-type:user') },
                 react_1.default.createElement(CatalogEntityDefaultRelations_1.CatalogEntityDefaultRelations, { key: "related-entities-table", entity: entity, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, shouldShowHeading: false })))));
 }
-const TabItem = styled_components_1.default.div `
-  padding: var(--spacing-sm);
-`;
 const EntityDescription = styled_components_1.default.div `
   font-size: var(--catalog-table-entity-summary-font-size);
   line-height: var(--catalog-table-entity-summary-line-height);

package/lib/components/Catalog/CatalogEntityTypeIcon.js

@@ -9,33 +9,37 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const CatalogEntityIcon_1 = require("../../components/Catalog/CatalogEntityIcon");
 const core_1 = require("../../core");
 function CatalogEntityTypeIcon({ entityType, defaultColors = false, size = 'medium', }) {
-    return (react_1.default.createElement(IconContainer, { "data-component-name": "Catalog/CatalogEntityTypeIcon", entityType: entityType, defaultColors: defaultColors, size: size },
+    return (react_1.default.createElement(IconContainer, { "data-component-name": "Catalog/CatalogEntityTypeIcon", $entityType: entityType, $defaultColors: defaultColors, $size: size },
         react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entityType, defaultColor: false })));
 }
 const IconContainer = styled_components_1.default.div `
   display: flex;
   align-items: center;
   justify-content: center;
-  width: ${({ size }) => (size === 'large' ? 'var(--catalog-table-icon-width-large)' : 'var(--catalog-table-icon-width-medium)')};
-  height: ${({ size }) => (size === 'large' ? 'var(--catalog-table-icon-height-large)' : 'var(--catalog-table-icon-height-medium)')};
+  width: ${({ $size }) => $size === 'large'
+    ? 'var(--catalog-table-icon-width-large)'
+    : 'var(--catalog-table-icon-width-medium)'};
+  height: ${({ $size }) => $size === 'large'
+    ? 'var(--catalog-table-icon-height-large)'
+    : 'var(--catalog-table-icon-height-medium)'};
   border-radius: var(--catalog-table-icon-border-radius);
-  background-color: ${({ defaultColors, entityType }) => {
-    if (defaultColors) {
+  background-color: ${({ $defaultColors, $entityType }) => {
+    if ($defaultColors) {
         return 'var(--catalog-entity-bg-color)';
     }
-    if (core_1.PREDEFINED_ENTITY_TYPES.includes(entityType)) {
-        return `var(--catalog-entity-bg-color-${entityType})`;
+    if (core_1.PREDEFINED_ENTITY_TYPES.includes($entityType)) {
+        return `var(--catalog-entity-bg-color-${$entityType})`;
     }
     return 'var(--catalog-entity-bg-color-custom)';
 }};
   flex-shrink: 0;
   border: 1px solid
-    ${({ defaultColors, entityType }) => {
-    if (defaultColors) {
+    ${({ $defaultColors, $entityType }) => {
+    if ($defaultColors) {
         return 'var(--catalog-entity-border-color)';
     }
-    if (core_1.PREDEFINED_ENTITY_TYPES.includes(entityType)) {
-        return `var(--catalog-entity-border-color-${entityType})`;
+    if (core_1.PREDEFINED_ENTITY_TYPES.includes($entityType)) {
+        return `var(--catalog-entity-border-color-${$entityType})`;
     }
     return 'var(--catalog-entity-border-color-custom)';
 }};

package/lib/components/Catalog/CatalogEntityTypeTag.js

@@ -28,7 +28,7 @@ const getEntityTagColor = (type) => {
 };
 exports.getEntityTagColor = getEntityTagColor;
 function CatalogEntityTypeTag({ entityType }) {
-    return (react_1.default.createElement(EntityTypeTagWrapper, { entityType: entityType, "data-component-name": "Catalog/CatalogEntityTypeTag" },
+    return (react_1.default.createElement(EntityTypeTagWrapper, { $entityType: entityType, "data-component-name": "Catalog/CatalogEntityTypeTag" },
         react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, entityType)));
 }
 const EntityTypeTagWrapper = (0, styled_components_1.default)(Tag_1.Tag) `
@@ -36,11 +36,11 @@ const EntityTypeTagWrapper = (0, styled_components_1.default)(Tag_1.Tag) `
   background-color: transparent;
   text-transform: none;
   border: 1px solid
-    ${({ entityType }) => !core_1.PREDEFINED_ENTITY_TYPES.includes(entityType)
+    ${({ $entityType }) => !core_1.PREDEFINED_ENTITY_TYPES.includes($entityType)
     ? 'var(--catalog-entity-border-color-custom)'
-    : `var(--catalog-entity-border-color-${entityType})`};
-  color: ${({ entityType }) => !core_1.PREDEFINED_ENTITY_TYPES.includes(entityType)
+    : `var(--catalog-entity-border-color-${$entityType})`};
+  color: ${({ $entityType }) => !core_1.PREDEFINED_ENTITY_TYPES.includes($entityType)
     ? 'var(--catalog-entity-icon-color-custom)'
-    : `var(--catalog-entity-icon-color-${entityType})`};
+    : `var(--catalog-entity-icon-color-${$entityType})`};
 `;
 //# sourceMappingURL=CatalogEntityTypeTag.js.map

package/lib/components/Catalog/CatalogTableView/CatalogTableView.js

@@ -67,7 +67,7 @@ const baseColumns = [
 ];
 const CatalogTableView = ({ entities, entitiesCatalogConfig, catalogConfig, columns = baseColumns, currentSortOption, onRowClick, handleSortClick, isColumnSorted, style, contentMinWidth, }) => {
     const tableContent = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(CatalogTableHeader, { columnsWidths: columns.map((column) => column.width || '1fr'), columnsMinWidths: columns.map((column) => column.minWidth || 'auto') }, columns.map((column) => (react_1.default.createElement(CatalogTableHeaderCell_1.CatalogTableHeaderCell, { key: column.key, column: column, currentSortOption: currentSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted })))),
+        react_1.default.createElement(CatalogTableHeader, { $columnsWidths: columns.map((column) => column.width || '1fr'), $columnsMinWidths: columns.map((column) => column.minWidth || 'auto') }, columns.map((column) => (react_1.default.createElement(CatalogTableHeaderCell_1.CatalogTableHeaderCell, { key: column.key, column: column, currentSortOption: currentSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted })))),
         react_1.default.createElement(CatalogTableBody, null, entities.map((entity) => (react_1.default.createElement(CatalogTableViewRow_1.CatalogTableViewRow, { key: entity.id, entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, columns: columns, onRowClick: onRowClick }))))));
     return (react_1.default.createElement(CatalogTableWrapper, { "data-component-name": "Catalog/CatalogTableView", style: style }, contentMinWidth != null ? (react_1.default.createElement(CatalogTableContentInner, { $contentMinWidth: contentMinWidth }, tableContent)) : (react_1.default.createElement(CatalogTableScrollContent, null, tableContent))));
 };
@@ -89,8 +89,10 @@ const CatalogTableContentInner = styled_components_1.default.div `
 `;
 const CatalogTableHeader = styled_components_1.default.div `
   display: grid;
-  grid-template-columns: ${({ columnsWidths, columnsMinWidths }) => columnsWidths
-    .map((width, index) => columnsMinWidths[index] !== 'auto' ? `minmax(${columnsMinWidths[index]}, ${width})` : width)
+  grid-template-columns: ${({ $columnsWidths, $columnsMinWidths }) => $columnsWidths
+    .map((width, index) => $columnsMinWidths[index] !== 'auto'
+    ? `minmax(${$columnsMinWidths[index]}, ${width})`
+    : width)
     .join(' ')};
   background: var(--catalog-table-header-bg-color);
   font-weight: var(--catalog-table-header-font-weight);

package/lib/components/CatalogClassic/CatalogClassic.d.ts

@@ -25,9 +25,11 @@ export declare const CatalogTitle: import("styled-components/dist/types").IStyle
     forwardedAs?: import("styled-components").WebTarget | undefined;
 }, never>>> & string;
 export declare const CatalogDescription: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>> & string;
-export declare const CatalogPageWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "withoutFilters"> & {
+export declare const CatalogPageWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "className" | "withoutFilters"> & {
     withoutFilters?: boolean;
-}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "withoutFilters"> & {
+    className?: string;
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "className" | "withoutFilters"> & {
     withoutFilters?: boolean;
+    className?: string;
 }, never>>> & string;
 export declare const CatalogPageDescriptionWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;

package/lib/components/CatalogClassic/CatalogClassic.js

@@ -65,7 +65,9 @@ exports.CatalogDescription = styled_components_1.default.p `
   font-size: var(--catalog-classic-description-font-size);
   margin: var(--catalog-classic-description-margin);
 `;
-exports.CatalogPageWrapper = styled_components_1.default.div `
+exports.CatalogPageWrapper = styled_components_1.default.div.withConfig({
+    shouldForwardProp: (prop) => prop !== 'withoutFilters',
+}) `
   --sidebar-width: var(--catalog-classic-sidebar-width, 285px);
 
   display: flex;

package/lib/components/CodeBlock/CodeBlockContainer.js

@@ -32,6 +32,17 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -41,7 +52,8 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const utils_1 = require("../../core/utils");
 function CodeBlockContainer(props) {
-    return (react_1.default.createElement(CodeBlockContainerComponent, Object.assign({}, props, { "data-component-name": "CodeBlock/CodeBlockContainer" })));
+    const { hideCodeColors, wrapContents, maxHeight } = props, rest = __rest(props, ["hideCodeColors", "wrapContents", "maxHeight"]);
+    return (react_1.default.createElement(CodeBlockContainerComponent, Object.assign({}, rest, { $hideCodeColors: hideCodeColors, $wrapContents: wrapContents, $maxHeight: maxHeight, "data-component-name": "CodeBlock/CodeBlockContainer" })));
 }
 const CodeBlockContainerComponent = styled_components_1.default.pre `
   && {
@@ -53,8 +65,8 @@ const CodeBlockContainerComponent = styled_components_1.default.pre `
     margin: var(--code-block-margin);
     color: var(--code-block-text-color);
     font-size: var(--code-block-font-size);
-    white-space: ${({ wrapContents }) => (wrapContents ? 'pre-wrap' : 'var(--code-wrap, pre)')};
-    max-height: ${({ maxHeight }) => maxHeight ? maxHeight : 'var(--code-block-max-height, 600px);'};
+    white-space: ${({ $wrapContents }) => ($wrapContents ? 'pre-wrap' : 'var(--code-wrap, pre)')};
+    max-height: ${({ $maxHeight }) => $maxHeight ? $maxHeight : 'var(--code-block-max-height, 600px);'};
     word-break: var(--code-block-word-break, initial);
 
     pre,
@@ -338,7 +350,7 @@ const CodeBlockContainerComponent = styled_components_1.default.pre `
 
   ${(0, utils_1.generateCodeBlockTokens)()}
 
-  ${({ hideCodeColors }) => hideCodeColors &&
+  ${({ $hideCodeColors }) => $hideCodeColors &&
     (0, styled_components_1.css) `
       .line-number:not(.highlighted),
       .line-number:not(.highlighted) > span,