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

package/lib/layouts/ThreePanelLayout.js

@@ -47,16 +47,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wrapper = void 0;
 exports.ThreePanelLayout = ThreePanelLayout;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const config_1 = require("@redocly/config");
 const utils_1 = require("../core/utils");
 function ThreePanelLayout(_a) {
-    var { children } = _a, props = __rest(_a, ["children"]);
-    return (react_1.default.createElement(Wrapper, Object.assign({ "data-component-name": "Layout/ThreePanelLayout" }, props), children));
+    var { layout, collapsedSidebar, children } = _a, props = __rest(_a, ["layout", "collapsedSidebar", "children"]);
+    return (react_1.default.createElement(exports.Wrapper, Object.assign({ "data-component-name": "Layout/ThreePanelLayout" }, props, { $layout: layout, $collapsedSidebar: collapsedSidebar }), children));
 }
-const Wrapper = styled_components_1.default.div `
+exports.Wrapper = styled_components_1.default.div.attrs({
+    'data-component-name': 'Layout/ThreePanelLayout',
+}) `
   position: relative;
   display: flex;
   flex-direction: column;
@@ -64,20 +67,20 @@ const Wrapper = styled_components_1.default.div `
   margin: 0 auto;
   width: 100%;
 
-  ${({ layout = config_1.LayoutVariant.THREE_PANEL }) => {
+  ${({ $layout = config_1.LayoutVariant.THREE_PANEL }) => {
     return (0, styled_components_1.css) `
-      max-width: ${layout === config_1.LayoutVariant.THREE_PANEL ? '100%' : ''};
+      max-width: ${$layout === config_1.LayoutVariant.THREE_PANEL ? '100%' : ''};
 
       @media screen and (min-width: ${utils_1.breakpoints.small}) {
-        max-width: var(--layout-${layout}-small-max-width);
+        max-width: var(--layout-${$layout}-small-max-width);
       }
 
       @media screen and (min-width: ${utils_1.breakpoints.medium}) {
-        max-width: var(--layout-${layout}-medium-max-width);
+        max-width: var(--layout-${$layout}-medium-max-width);
       }
 
       @media screen and (min-width: ${utils_1.breakpoints.large}) {
-        max-width: var(--layout-${layout}-large-max-width);
+        max-width: var(--layout-${$layout}-large-max-width);
       }
 
       @media print {

package/lib/markdoc/components/CodeWalkthrough/CodeContainer.js

@@ -74,7 +74,7 @@ function CodeContainer({ highlightedCode, toolbar, }) {
             }
         }, 200);
     }, [activeStep]);
-    return (react_1.default.createElement(CodeContainerWrapper, { "data-component-name": "Markdoc/CodeWalkthrough/CodeContainer", ref: compRef, hideCodeColors: !isHovered, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false) },
+    return (react_1.default.createElement(CodeContainerWrapper, { "data-component-name": "Markdoc/CodeWalkthrough/CodeContainer", ref: compRef, $hideCodeColors: !isHovered, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false) },
         react_1.default.createElement(CodeBlockContainer_1.CodeBlockContainer, { dangerouslySetInnerHTML: { __html: highlightedCode } }),
         toolbar));
 }
@@ -98,7 +98,7 @@ const CodeContainerWrapper = styled_components_1.default.div `
     span.line::before {
       color: var(--code-panel-line-numbering-color);
     }
-    ${({ hideCodeColors }) => hideCodeColors &&
+    ${({ $hideCodeColors }) => $hideCodeColors &&
     (0, styled_components_1.css) `
         .line.greyed-out {
           color: var(--text-color-helper) !important;

package/lib/markdoc/components/CodeWalkthrough/CodePanelHeader.js

@@ -87,7 +87,7 @@ function CodePanelHeader({ files, handleTabSwitch, activeTabName, onDownloadCode
             react_1.default.createElement(Tabs, null, renderableFiles.map(({ path, basename, fileIcon, parentFolder, isNameDuplicate, inRootDir }, i) => {
                 return (react_1.default.createElement(Tab, { ref: (el) => {
                         tabRefs.current[i] = el;
-                    }, "data-name": path, active: path === activeTabName, key: i, onClick: () => handleTabSwitch(path) },
+                    }, "data-name": path, $active: path === activeTabName, key: i, onClick: () => handleTabSwitch(path) },
                     fileIcon,
                     basename,
                     isNameDuplicate && !inRootDir ? react_1.default.createElement(Dirname, null, parentFolder) : null));
@@ -151,7 +151,7 @@ const Tab = styled_components_1.default.button `
   color: var(--text-color-secondary);
   white-space: nowrap;
   scroll-margin-right: var(--spacing-base);
-  ${({ active }) => active
+  ${({ $active }) => $active
     ? (0, styled_components_1.css) `
           color: var(--text-color-primary);
           background-color: var(--tab-bg-color-filled);

package/lib/markdoc/components/CodeWalkthrough/CodePanelPreview.js

@@ -50,7 +50,7 @@ function CodePanelPreview({ children }) {
         react_1.default.createElement(PreviewDropdown, { onClick: () => setIsOpen(!isOpen) },
             translate('codeWalkthrough.preview', 'Preview'),
             isOpen ? react_1.default.createElement(ChevronUpIcon_1.ChevronUpIcon, null) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, null)),
-        react_1.default.createElement(PreviewContentWrapper, { isOpen: isOpen }, children)));
+        react_1.default.createElement(PreviewContentWrapper, { $isOpen: isOpen }, children)));
 }
 const CodePanelPreviewWrapper = styled_components_1.default.div `
   width: 100%;
@@ -69,7 +69,7 @@ const PreviewDropdown = styled_components_1.default.div `
   cursor: pointer;
 `;
 const PreviewContentWrapper = styled_components_1.default.div `
-  display: ${({ isOpen }) => (isOpen ? 'grid' : 'none')};
+  display: ${({ $isOpen }) => ($isOpen ? 'grid' : 'none')};
   place-items: center;
 
   margin: auto 0;

package/lib/markdoc/components/CodeWalkthrough/CodeStep.d.ts

@@ -5,10 +5,12 @@ export type CodeStepProps = WithConditions<{
     heading?: string;
 }>;
 export declare function CodeStep({ id, heading, when, unless, children }: PropsWithChildren<CodeStepProps>): React.JSX.Element | null;
-export declare const StepWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "isActive" | "scrollMarginTop"> & {
+export declare const StepWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "className" | "isActive" | "scrollMarginTop"> & {
     isActive: boolean;
     scrollMarginTop: number;
-}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "isActive" | "scrollMarginTop"> & {
+    className?: string;
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "className" | "isActive" | "scrollMarginTop"> & {
     isActive: boolean;
     scrollMarginTop: number;
+    className?: string;
 }, never>>> & string;

package/lib/markdoc/components/CodeWalkthrough/CodeStep.js

@@ -107,7 +107,9 @@ function CodeStep({ id, heading, when, unless, children, }) {
                 heading ? react_1.default.createElement(StepHeading, null, heading) : null,
                 children))));
 }
-const StepContent = styled_components_1.default.div `
+const StepContent = styled_components_1.default.div.withConfig({
+    shouldForwardProp: (prop) => prop !== 'isActive',
+}) `
   margin: var(--spacing-xs) 0px var(--spacing-xs) calc(var(--spacing-unit) * 3.5);
   padding: var(--spacing-md) var(--spacing-lg);
   background: ${({ isActive }) => (isActive ? 'var(--layer-color)' : 'none')};
@@ -120,7 +122,9 @@ const StepContent = styled_components_1.default.div `
 const StepHeading = styled_components_1.default.p `
   font-weight: var(--font-weight-semibold);
 `;
-exports.StepWrapper = styled_components_1.default.div `
+exports.StepWrapper = styled_components_1.default.div.withConfig({
+    shouldForwardProp: (prop) => !['isActive', 'scrollMarginTop'].includes(prop),
+}) `
   position: relative;
   scroll-margin-top: ${({ scrollMarginTop }) => scrollMarginTop}px;
 

package/lib/markdoc/components/Image/Image.js

@@ -20,16 +20,16 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const Image_1 = require("../../../components/Image/Image");
 function Image(props) {
     const { align } = props, rest = __rest(props, ["align"]);
-    return align ? (react_1.default.createElement(ImageWrapper, { align: align },
+    return align ? (react_1.default.createElement(ImageWrapper, { $align: align },
         react_1.default.createElement(Image_1.Image, Object.assign({}, rest)))) : (react_1.default.createElement(Image_1.Image, Object.assign({}, rest)));
 }
 const ImageWrapper = styled_components_1.default.div `
-  text-align: ${(props) => props.align || 'initial'};
+  text-align: ${(props) => props.$align || 'initial'};
 
   img {
     display: block;
     ${(props) => {
-    switch (props.align) {
+    switch (props.$align) {
         case 'left':
             return 'margin-right: auto; margin-left: 0;';
         case 'right':

package/lib/markdoc/components/Tabs/TabItemFragment.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { JSX, PropsWithChildren } from 'react';
+export type TabItemProps = PropsWithChildren<{
+    label: string;
+    disable?: boolean;
+    onClick?: () => void;
+    icon?: React.ReactNode | string;
+}>;
+export declare function TabItemFragment({ children }: TabItemProps): JSX.Element;

package/lib/markdoc/components/Tabs/TabItemFragment.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabItemFragment = TabItemFragment;
+const react_1 = __importDefault(require("react"));
+function TabItemFragment({ children }) {
+    return react_1.default.createElement("div", null, children);
+}
+//# sourceMappingURL=TabItemFragment.js.map

package/lib/markdoc/components/Tabs/TabList.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { JSX } from 'react';
-import { TabItemProps, TabsSize } from '../../../markdoc/components/Tabs/Tabs';
+import type { TabItemProps } from '../../../markdoc/components/Tabs/TabItemFragment';
+import { TabsSize } from '../../../markdoc/components/Tabs/Tabs';
 type TabListProps = {
     childrenArray: React.ReactElement<TabItemProps>[];
     size: TabsSize;
@@ -11,14 +12,16 @@ type TabListProps = {
 };
 export declare function TabList({ childrenArray, size, activeTab, onTabChange, containerRef, onReadyChange }: TabListProps): JSX.Element;
 export declare const TabListContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>>> & string;
-export declare const TabItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "active" | "size" | "tabIndex"> & {
+export declare const TabItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "active" | "className" | "size" | "tabIndex"> & {
+    tabIndex?: number;
+    className?: string;
     active?: boolean;
     size: TabsSize;
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "active" | "className" | "size" | "tabIndex"> & {
     tabIndex?: number;
-}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "active" | "size" | "tabIndex"> & {
+    className?: string;
     active?: boolean;
     size: TabsSize;
-    tabIndex?: number;
 }, never>>> & string;
 export declare const TabButtonLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("../../../index.js").ButtonProps, keyof import("../../../index.js").ButtonProps> & import("../../../index.js").ButtonProps, never> & Partial<Pick<import("styled-components").FastOmit<import("../../../index.js").ButtonProps, keyof import("../../../index.js").ButtonProps> & import("../../../index.js").ButtonProps, never>>, "as" | "forwardedAs"> & {
     as?: import("styled-components").WebTarget | undefined;

package/lib/markdoc/components/Tabs/TabList.js

@@ -153,7 +153,7 @@ function TabList({ childrenArray, size, activeTab, onTabChange, containerRef, on
     const showAsSelector = visibleTabs.length === 0 && hasOverflow;
     const { dropdownPosition, setIsDropdownOpen, setDropdownPosition } = useDropdownPosition(hasOverflow, dropdownRef);
     return (react_1.default.createElement(exports.TabListContainer, { role: "tablist", ref: containerRef },
-        react_1.default.createElement(HighlightBar, { size: size, style: highlightStyle },
+        react_1.default.createElement(HighlightBar, { $size: size, style: highlightStyle },
             react_1.default.createElement("div", null)),
         childrenArray.map((child, index) => {
             // Show all tabs before ready (for measurement), then only visible ones
@@ -258,7 +258,9 @@ exports.TabListContainer = styled_components_1.default.ul `
     }
   }
 `;
-exports.TabItem = styled_components_1.default.li `
+exports.TabItem = styled_components_1.default.li.withConfig({
+    shouldForwardProp: (prop) => !['active', 'size'].includes(prop),
+}) `
   display: inline-flex;
   list-style: none;
   cursor: pointer;
@@ -346,7 +348,7 @@ const HighlightBar = styled_components_1.default.div `
   top: 0;
   bottom: 0;
   border: solid var(--md-tabs-active-tab-border-color);
-  border-width: var(--md-tabs-${({ size }) => size}-active-tab-border-width);
+  border-width: var(--md-tabs-${({ $size }) => $size}-active-tab-border-width);
   transition:
     left 300ms ease-in-out,
     width 300ms ease-in-out;
@@ -357,7 +359,7 @@ const HighlightBar = styled_components_1.default.div `
     width: 100%;
     height: 100%;
     background-color: var(--md-tabs-active-tab-bg-color);
-    border-radius: var(--md-tabs-${({ size }) => size}-active-tab-border-radius);
+    border-radius: var(--md-tabs-${({ $size }) => $size}-active-tab-border-radius);
   }
 `;
 const TabButtonText = styled_components_1.default.span `

package/lib/markdoc/components/Tabs/Tabs.d.ts

@@ -1,16 +1,11 @@
 import React from 'react';
 import type { JSX } from 'react';
+import { type TabItemProps } from '../../../markdoc/components/Tabs/TabItemFragment';
+export type { TabItemProps } from '../../../markdoc/components/Tabs/TabItemFragment';
 export declare enum TabsSize {
     SMALL = "small",
     MEDIUM = "medium"
 }
-export type TabItemProps = {
-    label: string;
-    disable?: boolean;
-    onClick?: () => void;
-    children: React.ReactNode;
-    icon?: React.ReactNode | string;
-};
 type TabsProps = {
     id?: string;
     children: React.ReactElement<TabItemProps>[];
@@ -19,6 +14,5 @@ type TabsProps = {
     initialTab?: string;
     activeTab?: string;
 };
-export declare function Tabs({ id, children, className, size, initialTab: propInitialTab, activeTab: controlledActiveTab }: TabsProps): JSX.Element;
+export declare function Tabs({ id, children, className, size, initialTab: propInitialTab, activeTab: controlledActiveTab }: TabsProps): JSX.Element | null;
 export declare const TabContent: 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;
-export {};

package/lib/markdoc/components/Tabs/Tabs.js

@@ -42,6 +42,7 @@ const react_1 = __importStar(require("react"));
 const react_router_dom_1 = require("react-router-dom");
 const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../../core/hooks");
+const TabItemFragment_1 = require("../../../markdoc/components/Tabs/TabItemFragment");
 const TabList_1 = require("../../../markdoc/components/Tabs/TabList");
 const utils_1 = require("../../../core/utils");
 var TabsSize;
@@ -50,13 +51,14 @@ var TabsSize;
     TabsSize["MEDIUM"] = "medium";
 })(TabsSize || (exports.TabsSize = TabsSize = {}));
 function Tabs({ id, children, className, size, initialTab: propInitialTab, activeTab: controlledActiveTab, }) {
-    var _a;
-    var _b;
-    const childrenArray = react_1.default.Children.toArray(children);
+    const inRouter = (0, react_router_dom_1.useInRouterContext)();
+    const childrenArray = react_1.default.Children.toArray(children).filter(isTabItemFragment);
     const containerRef = (0, react_1.useRef)(null);
-    const initialTab = (_b = propInitialTab !== null && propInitialTab !== void 0 ? propInitialTab : (_a = childrenArray[0]) === null || _a === void 0 ? void 0 : _a.props.label) !== null && _b !== void 0 ? _b : '';
+    if (childrenArray.length === 0) {
+        return null;
+    }
+    const initialTab = propInitialTab !== null && propInitialTab !== void 0 ? propInitialTab : childrenArray[0].props.label;
     const labelsHash = childrenArray.map((c) => c.props.label).join('|');
-    const inRouter = (0, react_router_dom_1.useInRouterContext)();
     return (react_1.default.createElement(TabsView, { id: id, className: className, size: size, childrenArray: childrenArray, initialTab: initialTab, useActiveTab: inRouter ? useActiveTabWithRouter : useActiveTabWithoutRouter, labelsHash: labelsHash, containerRef: containerRef, externalActiveTab: controlledActiveTab }));
 }
 function TabsView({ id, className, size, childrenArray, useActiveTab, initialTab, labelsHash, containerRef, externalActiveTab, }) {
@@ -74,6 +76,11 @@ function TabsView({ id, className, size, childrenArray, useActiveTab, initialTab
             return label === activeTab ? (react_1.default.createElement(exports.TabContent, { key: `content-${tabId}`, id: `panel-${tabId}`, "aria-labelledby": `tab-${tabId}`, tabIndex: 0, role: "tabpanel" }, child.props.children)) : null;
         })));
 }
+function isTabItemFragment(node) {
+    if (!(0, react_1.isValidElement)(node))
+        return false;
+    return node.type === TabItemFragment_1.TabItemFragment;
+}
 /**
  * Validates that the active tab exists in children and resets to initial tab if not found.
  * Ensures tab state remains consistent when tab structure changes.

package/lib/markdoc/components/default.d.ts

@@ -4,6 +4,7 @@ export * from '../../markdoc/components/MarkdocExample/MarkdocExample';
 export * from '../../markdoc/components/Heading/Heading';
 export * from '../../markdoc/components/Diagram/Diagram';
 export * from '../../markdoc/components/HtmlBlock/HtmlBlock';
+export * from '../../markdoc/components/Tabs/TabItemFragment';
 export * from '../../markdoc/components/Tabs/Tab';
 export * from '../../markdoc/components/Tabs/TabList';
 export * from '../../markdoc/components/Tabs/Tabs';

package/lib/markdoc/components/default.js

@@ -20,6 +20,7 @@ __exportStar(require("../../markdoc/components/MarkdocExample/MarkdocExample"),
 __exportStar(require("../../markdoc/components/Heading/Heading"), exports);
 __exportStar(require("../../markdoc/components/Diagram/Diagram"), exports);
 __exportStar(require("../../markdoc/components/HtmlBlock/HtmlBlock"), exports);
+__exportStar(require("../../markdoc/components/Tabs/TabItemFragment"), exports);
 __exportStar(require("../../markdoc/components/Tabs/Tab"), exports);
 __exportStar(require("../../markdoc/components/Tabs/TabList"), exports);
 __exportStar(require("../../markdoc/components/Tabs/Tabs"), exports);

package/lib/markdoc/tags/tab.js

@@ -8,7 +8,7 @@ exports.tab = {
             disable: { type: Boolean, default: false },
             icon: { type: String, resolver: 'relativeOrCdnIcon' },
         },
-        render: 'div',
+        render: 'TabItemFragment',
     },
     tagName: 'tab',
 };

package/lib/markdoc/tags/tabs.js

@@ -15,7 +15,7 @@ exports.tabs = {
                 if ((0, utils_1.isTag)(child) && (child === null || child === void 0 ? void 0 : child.name) === 'CodeBlock') {
                     const key = child.attributes['data-language'] || 'default';
                     const label = child.attributes['data-label'] || key;
-                    return new markdoc_1.default.Tag('div', { label, key }, [child]);
+                    return new markdoc_1.default.Tag('TabItemFragment', { label, key }, [child]);
                 }
                 return child;
             });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.67.0-next.0",
+  "version": "0.67.0-next.2",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -63,10 +63,9 @@
     "vitest": "4.1.8",
     "vitest-when": "0.6.2",
     "webpack": "5.105.2",
-    "@redocly/realm-asyncapi-sdk": "0.13.0-next.0"
+    "@redocly/realm-asyncapi-sdk": "0.13.0-next.1"
   },
   "dependencies": {
-    "@emotion/is-prop-valid": "^1.3.1",
     "@tanstack/react-query": "5.62.3",
     "@tanstack/react-virtual": "3.13.0",
     "@xyflow/react": "^12.8.2",

package/src/components/Admonition/Admonition.tsx

@@ -39,7 +39,7 @@ export function Admonition({
   const Icon = IconsMap[type] || IconsMap['info'];
   return (
     <AdmonitionWrapper
-      type={type}
+      $type={type}
       className={className}
       data-component-name="Admonition/Admonition"
       data-source={dataSource}
@@ -47,7 +47,7 @@ export function Admonition({
     >
       <Icon color={`--admonition-${type}-icon-color`} />
       <TextContainer>
-        {name ? <Heading type={type}>{name}</Heading> : null}
+        {name ? <Heading $type={type}>{name}</Heading> : null}
         {children ? <Content>{children}</Content> : null}
       </TextContainer>
     </AdmonitionWrapper>
@@ -64,7 +64,7 @@ const Content = styled.div`
   }
 `;
 
-const AdmonitionWrapper = styled.div<AdmonitionTypeProps>`
+const AdmonitionWrapper = styled.div<{ $type: AdmonitionTypeProps['type'] }>`
   display: flex;
   flex-direction: row;
   gap: var(--admonition-gap);
@@ -78,10 +78,10 @@ const AdmonitionWrapper = styled.div<AdmonitionTypeProps>`
   print-color-adjust: exact;
   -webkit-print-color-adjust: exact;
 
-  ${({ type }) => css`
-    background-color: var(--admonition-${type}-bg-color);
-    color: var(--admonition-${type}-text-color);
-    border: var(--admonition-${type}-border);
+  ${({ $type }) => css`
+    background-color: var(--admonition-${$type}-bg-color);
+    color: var(--admonition-${$type}-text-color);
+    border: var(--admonition-${$type}-border);
   `};
 
   &:not(:has(${Content})) {
@@ -98,9 +98,9 @@ const AdmonitionWrapper = styled.div<AdmonitionTypeProps>`
     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;
@@ -114,9 +114,9 @@ const TextContainer = styled.div`
   width: 100%;
 `;
 
-const Heading = styled.div<AdmonitionTypeProps>`
+const Heading = styled.div<{ $type: AdmonitionTypeProps['type'] }>`
   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/src/components/Badge/Badge.tsx

@@ -13,29 +13,34 @@ export type BadgeProps = PropsWithChildren<{
   icon?: string;
 }>;
 
-export function Badge({ icon, children, ...props }: BadgeProps): JSX.Element {
+export function Badge({ icon, children, deprecated, color, ...props }: BadgeProps): JSX.Element {
   return (
-    <BadgeComponent {...props} data-component-name="Badge/Badge">
+    <BadgeComponent
+      {...props}
+      $color={color}
+      $deprecated={deprecated}
+      data-component-name="Badge/Badge"
+    >
       {icon ? <BadgeIcon icon={icon} /> : null}
       {children}
     </BadgeComponent>
   );
 }
 
-const BadgeComponent = styled.span<BadgeProps>`
+const BadgeComponent = styled.span<{ $color?: string; $deprecated?: boolean }>`
   display: inline-block;
   padding: 0 var(--spacing-xs);
   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 &&
     css`
       color: var(--badge-deprecated-text-color);
       background-color: var(--badge-deprecated-bg-color);

package/src/components/Button/Button.tsx

@@ -67,6 +67,7 @@ export function generateClassName({
   tone = 'default',
   size = 'medium',
   extraClass = '',
+  className = '',
 }: ButtonProps) {
   const classNames = [
     'button',
@@ -74,6 +75,7 @@ export function generateClassName({
     `button-tone-${tone}`,
     `button-variant-${variant}`,
     `button-size-${size}`,
+    className,
   ];
 
   return classNames
@@ -82,10 +84,16 @@ export function generateClassName({
     .trim();
 }
 
-const StyledButton = styled.button.attrs((props: ButtonProps) => ({
-  className: generateClassName(props),
-}))<ButtonProps & { iconOnly: boolean }>`
-  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+const StyledButton = styled.button<{
+  $icon?: ButtonProps['icon'];
+  $iconOnly: boolean;
+  $fullWidth?: boolean;
+  $blinking?: boolean;
+  $iconPosition?: ButtonProps['iconPosition'];
+  $variant?: ButtonProps['variant'];
+  $size?: ButtonProps['size'];
+}>`
+  width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};
 
   display: inline-flex;
   align-items: center;
@@ -104,9 +112,9 @@ const StyledButton = styled.button.attrs((props: ButtonProps) => ({
   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);
 
@@ -158,17 +166,17 @@ const StyledButton = styled.button.attrs((props: ButtonProps) => ({
     border-width: var(--button-border-width-disabled);
   }
 
-  ${({ variant, size }) =>
-    (variant === 'link' || variant === 'ghost') &&
-    size === 'small' &&
+  ${({ $variant, $size }) =>
+    ($variant === 'link' || $variant === 'ghost') &&
+    $size === 'small' &&
     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 &&
     css`
       pointer-events: none;
       animation: ${getBlink()} 1.2s infinite;
@@ -176,27 +184,49 @@ const StyledButton = styled.button.attrs((props: ButtonProps) => ({
 `;
 
 const ButtonComponent: React.FC<ButtonProps> = (props) => {
-  const { languageInsensitive, ...buttonProps } = props;
+  const {
+    languageInsensitive,
+    fullWidth,
+    blinking,
+    iconPosition,
+    icon,
+    children,
+    variant,
+    tone,
+    size,
+    extraClass,
+    to,
+    external,
+    className,
+    ...rest
+  } = props;
   const tabIndex = 'tabIndex' in props ? props.tabIndex : props.to ? -1 : undefined;
 
   const button = (
     <StyledButton
       data-component-name="Button/Button"
-      {...buttonProps}
-      iconOnly={!props.children && props.icon !== null}
+      {...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}
     >
-      {props.icon && props.iconPosition !== 'right' && props.icon}
-      {props.children}
-      {props.icon && props.iconPosition === 'right' && props.icon}
+      {icon && iconPosition !== 'right' && icon}
+      {children}
+      {icon && iconPosition === 'right' && icon}
     </StyledButton>
   );
 
-  if (props.to) {
+  if (to) {
     return (
       <StyledButtonLink
-        to={props.to}
-        external={props.external}
+        to={to}
+        external={external}
         languageInsensitive={languageInsensitive}
         onClick={props.onClick}
       >

package/src/components/Buttons/AIAssistantButton.tsx

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