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

package/lib/components/Sidebar/Sidebar.js

@@ -53,11 +53,11 @@ function Sidebar({ versions, menu, footer, header, growContent, collapsed, class
     if (sidebar === null || sidebar === void 0 ? void 0 : sidebar.hide) {
         return null;
     }
-    return (react_1.default.createElement(SidebarContent, { "data-component-name": "Sidebar/Sidebar", opened: isOpen, className: className, collapsed: mappedCollapsed },
+    return (react_1.default.createElement(SidebarContent, { "data-component-name": "Sidebar/Sidebar", $opened: isOpen, className: className, $collapsed: mappedCollapsed },
         header ? react_1.default.createElement(exports.SidebarHeader, { collapsed: mappedCollapsed }, header) : null,
         !mappedCollapsed && versions ? versions : null,
         react_1.default.createElement(MenuContainer_1.MenuContainer, { hidden: mappedCollapsed, growContent: growContent, animation: menuItemsAnimation }, menu),
-        footer && !isOpen ? (react_1.default.createElement(SidebarFooter, { collapsed: mappedCollapsed, "data-component-name": "Sidebar/FooterWrapper" }, footer)) : null));
+        footer && !isOpen ? (react_1.default.createElement(SidebarFooter, { $collapsed: mappedCollapsed, "data-component-name": "Sidebar/FooterWrapper" }, footer)) : null));
 }
 const SidebarContent = styled_components_1.default.aside `
   border-right: 1px solid var(--sidebar-border-color);
@@ -77,8 +77,8 @@ const SidebarContent = styled_components_1.default.aside `
   top: calc(var(--navbar-height) + var(--banner-height));
   height: calc(100vh - var(--navbar-height) - var(--banner-height));
   overflow-x: hidden;
-  ${({ opened }) => `
-    display: ${opened ? 'flex' : 'none'}
+  ${({ $opened }) => `
+    display: ${$opened ? 'flex' : 'none'}
   `};
 
   @media screen and (min-width: ${utils_1.breakpoints.medium}) {
@@ -89,7 +89,7 @@ const SidebarContent = styled_components_1.default.aside `
     flex-shrink: 0;
     overflow: clip;
 
-    ${({ collapsed }) => collapsed
+    ${({ $collapsed }) => $collapsed
     ? `
           flex-direction: column;
           width: var(--sidebar-collapsed-width);
@@ -105,7 +105,9 @@ const SidebarContent = styled_components_1.default.aside `
     transform: none;
   }
 `;
-exports.SidebarHeader = styled_components_1.default.div `
+exports.SidebarHeader = styled_components_1.default.div.withConfig({
+    shouldForwardProp: (prop) => prop !== 'collapsed',
+}) `
   margin: var(--sidebar-offset-top) var(--sidebar-margin-horizontal) 0
     var(--sidebar-margin-horizontal);
   padding: 0 0 var(--sidebar-header-padding-bottom) 0;
@@ -121,10 +123,10 @@ const SidebarFooter = styled_components_1.default.div `
 
   @media screen and (min-width: ${utils_1.breakpoints.medium}) {
     display: flex;
-    justify-content: ${({ collapsed }) => (collapsed ? 'center' : 'flex-end')};
+    justify-content: ${({ $collapsed }) => ($collapsed ? 'center' : 'flex-end')};
   }
 
-  ${({ collapsed }) => collapsed &&
+  ${({ $collapsed }) => $collapsed &&
     `
         position: sticky;
         bottom: 0;

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

@@ -1,12 +1,12 @@
 declare const StyledChangeViewButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "collapsedSidebar"> & {
-    collapsedSidebar?: boolean;
+    collapsedSidebar: boolean;
 }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "collapsedSidebar"> & {
-    collapsedSidebar?: boolean;
+    collapsedSidebar: boolean;
 }, never>>> & string;
 declare const StyledChangeViewButtonWrap: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("../../index.js").TooltipProps, "active"> & {
-    active?: boolean;
+    active: boolean;
 }, never> & Partial<Pick<import("styled-components").FastOmit<import("../../index.js").TooltipProps, "active"> & {
-    active?: boolean;
+    active: boolean;
 }, never>>> & string & Omit<import("react").NamedExoticComponent<import("../../index.js").TooltipProps>, keyof import("react").Component<any, {}, any>>;
 declare const ControlsWrap: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "iconCount" | "isCollapsed"> & {
     iconCount?: number;
@@ -16,8 +16,8 @@ declare const ControlsWrap: import("styled-components/dist/types").IStyledCompon
     isCollapsed?: boolean;
 }, never>>> & string;
 declare const ControlsWrapChangeLayoutButtons: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "isCollapsed"> & {
-    isCollapsed?: boolean;
+    isCollapsed: boolean;
 }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "isCollapsed"> & {
-    isCollapsed?: boolean;
+    isCollapsed: boolean;
 }, never>>> & string;
 export { StyledChangeViewButton, StyledChangeViewButtonWrap, ControlsWrapChangeLayoutButtons, ControlsWrap, };

package/lib/components/SidebarActions/styled.js

@@ -37,7 +37,9 @@ exports.ControlsWrap = exports.ControlsWrapChangeLayoutButtons = exports.StyledC
 const styled_components_1 = __importStar(require("styled-components"));
 const utils_1 = require("../../core/utils");
 const Tooltip_1 = require("../../components/Tooltip/Tooltip");
-const StyledChangeViewButton = styled_components_1.default.span `
+const StyledChangeViewButton = styled_components_1.default.span.withConfig({
+    shouldForwardProp: (prop) => prop !== 'collapsedSidebar',
+}) `
   display: flex;
   position: relative;
   flex-direction: ${({ collapsedSidebar }) => (collapsedSidebar ? 'column' : 'row')};
@@ -50,7 +52,9 @@ const StyledChangeViewButton = styled_components_1.default.span `
   padding: calc(var(--spacing-unit) / 2);
 `;
 exports.StyledChangeViewButton = StyledChangeViewButton;
-const StyledChangeViewButtonWrap = (0, styled_components_1.default)(Tooltip_1.Tooltip) `
+const StyledChangeViewButtonWrap = (0, styled_components_1.default)(Tooltip_1.Tooltip).withConfig({
+    shouldForwardProp: (prop) => prop !== 'active',
+}) `
   width: 20px;
   height: 20px;
   border-radius: var(--border-radius);
@@ -60,7 +64,9 @@ const StyledChangeViewButtonWrap = (0, styled_components_1.default)(Tooltip_1.To
   background-color: ${({ active }) => active && 'var(--segmented-buttons-bg-color-inner)'};
 `;
 exports.StyledChangeViewButtonWrap = StyledChangeViewButtonWrap;
-const ControlsWrap = styled_components_1.default.span `
+const ControlsWrap = styled_components_1.default.span.withConfig({
+    shouldForwardProp: (prop) => prop !== 'iconCount' && prop !== 'isCollapsed',
+}) `
   display: none;
   justify-content: flex-end;
   bottom: 0;
@@ -89,7 +95,9 @@ const ControlsWrap = styled_components_1.default.span `
   }
 `;
 exports.ControlsWrap = ControlsWrap;
-const ControlsWrapChangeLayoutButtons = styled_components_1.default.span `
+const ControlsWrapChangeLayoutButtons = styled_components_1.default.span.withConfig({
+    shouldForwardProp: (prop) => prop !== 'isCollapsed',
+}) `
   display: flex;
   bottom: 0;
   flex-direction: ${({ isCollapsed }) => (isCollapsed ? 'column-reverse' : 'row')};

package/lib/components/StatusCode/StatusCode.d.ts

@@ -1,7 +1,9 @@
-export declare const StatusCode: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof import("react").ButtonHTMLAttributes<HTMLButtonElement> | keyof import("react").ClassAttributes<HTMLButtonElement>> & import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement>, "data-component-name" | "status"> & {
+export type StatusCodeProps = {
     status: string;
+    className?: string;
+};
+export declare const StatusCode: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof import("react").ButtonHTMLAttributes<HTMLButtonElement> | keyof import("react").ClassAttributes<HTMLButtonElement>> & import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement>, "data-component-name"> & {
     'data-component-name': string;
-}, "about" | "accessKey" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "autoSave" | "children" | "className" | "color" | "content" | "contentEditable" | "contextMenu" | "dangerouslySetInnerHTML" | "data-component-name" | "datatype" | "defaultChecked" | "defaultValue" | "dir" | "disabled" | "draggable" | "enterKeyHint" | "exportparts" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "hidden" | "id" | "inert" | "inlist" | "inputMode" | "is" | "itemID" | "itemProp" | "itemRef" | "itemScope" | "itemType" | "key" | "lang" | "name" | "nonce" | "onAbort" | "onAbortCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAuxClick" | "onAuxClickCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onBeforeToggle" | "onBlur" | "onBlurCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onChange" | "onChangeCapture" | "onClick" | "onClickCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onContextMenu" | "onContextMenuCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onError" | "onErrorCapture" | "onFocus" | "onFocusCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onLoad" | "onLoadCapture" | "onLoadStart" | "onLoadStartCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onPaste" | "onPasteCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerMove" | "onPointerMoveCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerUp" | "onPointerUpCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onReset" | "onResetCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onSelect" | "onSelectCapture" | "onStalled" | "onStalledCapture" | "onSubmit" | "onSubmitCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onToggle" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onWheel" | "onWheelCapture" | "part" | "popover" | "popoverTarget" | "popoverTargetAction" | "prefix" | "property" | "radioGroup" | "ref" | "rel" | "resource" | "results" | "rev" | "role" | "security" | "slot" | "spellCheck" | "status" | "style" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "tabIndex" | "title" | "translate" | "type" | "typeof" | "unselectable" | "value" | "vocab"> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof import("react").ButtonHTMLAttributes<HTMLButtonElement> | keyof import("react").ClassAttributes<HTMLButtonElement>> & import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement>, "data-component-name" | "status"> & {
-    status: string;
+}, keyof StatusCodeProps> & StatusCodeProps, "about" | "accessKey" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "autoSave" | "children" | "className" | "color" | "content" | "contentEditable" | "contextMenu" | "dangerouslySetInnerHTML" | "data-component-name" | "datatype" | "defaultChecked" | "defaultValue" | "dir" | "disabled" | "draggable" | "enterKeyHint" | "exportparts" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "hidden" | "id" | "inert" | "inlist" | "inputMode" | "is" | "itemID" | "itemProp" | "itemRef" | "itemScope" | "itemType" | "key" | "lang" | "name" | "nonce" | "onAbort" | "onAbortCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAuxClick" | "onAuxClickCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onBeforeToggle" | "onBlur" | "onBlurCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onChange" | "onChangeCapture" | "onClick" | "onClickCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onContextMenu" | "onContextMenuCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onError" | "onErrorCapture" | "onFocus" | "onFocusCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onLoad" | "onLoadCapture" | "onLoadStart" | "onLoadStartCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onPaste" | "onPasteCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerMove" | "onPointerMoveCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerUp" | "onPointerUpCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onReset" | "onResetCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onSelect" | "onSelectCapture" | "onStalled" | "onStalledCapture" | "onSubmit" | "onSubmitCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onToggle" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onWheel" | "onWheelCapture" | "part" | "popover" | "popoverTarget" | "popoverTargetAction" | "prefix" | "property" | "radioGroup" | "ref" | "rel" | "resource" | "results" | "rev" | "role" | "security" | "slot" | "spellCheck" | "style" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "tabIndex" | "title" | "translate" | "type" | "typeof" | "unselectable" | "value" | "vocab"> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof import("react").ButtonHTMLAttributes<HTMLButtonElement> | keyof import("react").ClassAttributes<HTMLButtonElement>> & import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement>, "data-component-name"> & {
     'data-component-name': string;
-}, "about" | "accessKey" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "autoSave" | "children" | "className" | "color" | "content" | "contentEditable" | "contextMenu" | "dangerouslySetInnerHTML" | "data-component-name" | "datatype" | "defaultChecked" | "defaultValue" | "dir" | "disabled" | "draggable" | "enterKeyHint" | "exportparts" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "hidden" | "id" | "inert" | "inlist" | "inputMode" | "is" | "itemID" | "itemProp" | "itemRef" | "itemScope" | "itemType" | "key" | "lang" | "name" | "nonce" | "onAbort" | "onAbortCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAuxClick" | "onAuxClickCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onBeforeToggle" | "onBlur" | "onBlurCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onChange" | "onChangeCapture" | "onClick" | "onClickCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onContextMenu" | "onContextMenuCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onError" | "onErrorCapture" | "onFocus" | "onFocusCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onLoad" | "onLoadCapture" | "onLoadStart" | "onLoadStartCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onPaste" | "onPasteCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerMove" | "onPointerMoveCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerUp" | "onPointerUpCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onReset" | "onResetCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onSelect" | "onSelectCapture" | "onStalled" | "onStalledCapture" | "onSubmit" | "onSubmitCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onToggle" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onWheel" | "onWheelCapture" | "part" | "popover" | "popoverTarget" | "popoverTargetAction" | "prefix" | "property" | "radioGroup" | "ref" | "rel" | "resource" | "results" | "rev" | "role" | "security" | "slot" | "spellCheck" | "status" | "style" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "tabIndex" | "title" | "translate" | "type" | "typeof" | "unselectable" | "value" | "vocab">>> & string;
+}, keyof StatusCodeProps> & StatusCodeProps, "about" | "accessKey" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "autoSave" | "children" | "className" | "color" | "content" | "contentEditable" | "contextMenu" | "dangerouslySetInnerHTML" | "data-component-name" | "datatype" | "defaultChecked" | "defaultValue" | "dir" | "disabled" | "draggable" | "enterKeyHint" | "exportparts" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "hidden" | "id" | "inert" | "inlist" | "inputMode" | "is" | "itemID" | "itemProp" | "itemRef" | "itemScope" | "itemType" | "key" | "lang" | "name" | "nonce" | "onAbort" | "onAbortCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAuxClick" | "onAuxClickCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onBeforeToggle" | "onBlur" | "onBlurCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onChange" | "onChangeCapture" | "onClick" | "onClickCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onContextMenu" | "onContextMenuCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onError" | "onErrorCapture" | "onFocus" | "onFocusCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onLoad" | "onLoadCapture" | "onLoadStart" | "onLoadStartCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onPaste" | "onPasteCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerMove" | "onPointerMoveCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerUp" | "onPointerUpCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onReset" | "onResetCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onSelect" | "onSelectCapture" | "onStalled" | "onStalledCapture" | "onSubmit" | "onSubmitCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onToggle" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onWheel" | "onWheelCapture" | "part" | "popover" | "popoverTarget" | "popoverTargetAction" | "prefix" | "property" | "radioGroup" | "ref" | "rel" | "resource" | "results" | "rev" | "role" | "security" | "slot" | "spellCheck" | "style" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "tabIndex" | "title" | "translate" | "type" | "typeof" | "unselectable" | "value" | "vocab">>> & string;

package/lib/components/StatusCode/StatusCode.js

@@ -5,12 +5,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StatusCode = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.StatusCode = styled_components_1.default.button.attrs({ 'data-component-name': 'StatusCode/StatusCode' }) `
+exports.StatusCode = styled_components_1.default.button
+    .withConfig({
+    shouldForwardProp: (prop) => prop !== 'status',
+})
+    .attrs({
+    'data-component-name': 'StatusCode/StatusCode',
+}) `
   background: none;
   padding: 0;
   display: flex;
   align-items: center;
-    
+
   &:before {
     display: inline-block;
     content: '';

package/lib/components/Switch/Switch.js

@@ -54,34 +54,34 @@ function Switch({ value = false, disabled = false, onChange, onFocus, stopPropag
         }
         onFocus === null || onFocus === void 0 ? void 0 : onFocus();
     };
-    return (react_1.default.createElement(SwitchWrapper, { tabIndex: disabled ? -1 : 0, onFocus: handleFocus, onClick: handleClick, role: "switch", "aria-checked": value, "aria-disabled": disabled, selected: value, disabled: disabled, className: className },
-        react_1.default.createElement(Knob, { selected: value, disabled: disabled })));
+    return (react_1.default.createElement(SwitchWrapper, { tabIndex: disabled ? -1 : 0, onFocus: handleFocus, onClick: handleClick, role: "switch", "aria-checked": value, "aria-disabled": disabled, $selected: value, $disabled: disabled, className: className },
+        react_1.default.createElement(Knob, { $selected: value, $disabled: disabled })));
 }
 const SwitchWrapper = styled_components_1.default.div `
   width: var(--switch-width);
   height: var(--switch-height);
   border-radius: var(--switch-border-radius);
   border: var(--switch-border-width) solid
-    ${({ selected, disabled }) => disabled
+    ${({ $selected, $disabled }) => $disabled
     ? 'var(--switch-border-color-disabled)'
-    : selected
+    : $selected
         ? 'var(--switch-border-color-selected)'
         : 'var(--switch-border-color)'};
-  background-color: ${({ selected, disabled }) => disabled
-    ? selected
+  background-color: ${({ $selected, $disabled }) => $disabled
+    ? $selected
         ? 'var(--switch-bg-color-disabled-selected)'
         : 'var(--switch-bg-color-disabled)'
-    : selected
+    : $selected
         ? 'var(--switch-bg-color-selected)'
         : 'var(--switch-bg-color)'};
   display: flex;
   align-items: center;
   padding: var(--switch-padding);
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'pointer')};
   transition: var(--switch-bg-transition);
 
-  ${({ selected, disabled }) => !disabled &&
-    !selected &&
+  ${({ $selected, $disabled }) => !$disabled &&
+    !$selected &&
     (0, styled_components_1.css) `
       &:hover {
         background-color: var(--switch-bg-color-hover);
@@ -97,12 +97,12 @@ const Knob = styled_components_1.default.div `
   width: var(--switch-knob-width);
   height: var(--switch-knob-height);
   border-radius: var(--switch-knob-border-radius);
-  background-color: ${({ selected, disabled }) => disabled
+  background-color: ${({ $selected, $disabled }) => $disabled
     ? 'var(--switch-knob-bg-color-disabled)'
-    : selected
+    : $selected
         ? 'var(--switch-knob-bg-color-selected)'
         : 'var(--switch-knob-bg-color)'};
-  transform: ${({ selected }) => selected ? 'translateX(var(--switch-knob-width))' : 'translateX(0)'};
+  transform: ${({ $selected }) => $selected ? 'translateX(var(--switch-knob-width))' : 'translateX(0)'};
   transition: var(--switch-knob-transition);
 `;
 //# sourceMappingURL=Switch.js.map

package/lib/components/TableOfContent/TableOfContent.js

@@ -63,7 +63,7 @@ function TableOfContent(props) {
                     return null;
                 }
                 const href = '#' + heading.id;
-                return (React.createElement(TableOfContentMenuItem, { key: href + idx, href: href, depth: heading.depth - leastDepth + 1 || 0, className: activeHeading === heading.id ? 'active' : '', dangerouslySetInnerHTML: { __html: heading.value || '' }, "data-testid": `toc-${heading.value}`, onClick: (e) => {
+                return (React.createElement(TableOfContentMenuItem, { key: href + idx, href: href, $depth: heading.depth - leastDepth + 1 || 0, className: activeHeading === heading.id ? 'active' : '', dangerouslySetInnerHTML: { __html: heading.value || '' }, "data-testid": `toc-${heading.value}`, onClick: (e) => {
                         e.preventDefault();
                         telemetry.sendTocItemClickedMessage();
                         handleHeadingClick(heading.id);
@@ -105,7 +105,7 @@ const TableOfContentMenuItem = styled_components_1.default.a `
   cursor: pointer;
   font-size: var(--toc-item-font-size);
   padding: var(--toc-item-padding-vertical) var(--toc-item-padding-horizontal);
-  padding-left: calc(var(--toc-item-nested-offset) * ${({ depth }) => depth});
+  padding-left: calc(var(--toc-item-nested-offset) * ${({ $depth }) => $depth});
   transition:
     background-color 0.3s,
     color 0.3s;

package/lib/components/Tag/Tag.js

@@ -107,8 +107,8 @@ function Tag(_a) {
         }
         return children;
     };
-    return (react_1.default.createElement(TagWrapper, Object.assign({ tabIndex: tabIndex, "data-component-name": "Tag/Tag", borderless: borderless, color: color, size: size, onClick: onClick, onKeyDown: onKeyDown, hasCloseButton: closable, textTransform: textTransform, variant: variant, selectable: selectable }, otherProps),
-        withStatusDot ? react_1.default.createElement(StatusDot, { color: statusDotColor }) : icon ? icon : null,
+    return (react_1.default.createElement(TagWrapper, Object.assign({ tabIndex: tabIndex, "data-component-name": "Tag/Tag", $borderless: borderless, $color: color, $size: size, onClick: onClick, onKeyDown: onKeyDown, $hasCloseButton: closable, $textTransform: textTransform, $variant: variant, $selectable: selectable }, otherProps),
+        withStatusDot ? react_1.default.createElement(StatusDot, { $color: statusDotColor }) : icon ? icon : null,
         react_1.default.createElement(exports.ContentWrapper, null, renderChildren()),
         closable && (react_1.default.createElement(CloseButton, { onClick: (event) => {
                 onClose === null || onClose === void 0 ? void 0 : onClose(event);
@@ -142,13 +142,13 @@ const CloseButton = styled_components_1.default.div `
     background: var(--tag-close-button-bg-color-focus);
   }
 `;
-const TagWrapper = styled_components_1.default.div.attrs(({ className, color, size, variant }) => ({
+const TagWrapper = styled_components_1.default.div.attrs(({ className, $color, $size, $variant }) => ({
     className: [
         className,
         'tag-default',
-        color && `tag-${color}`,
-        size && `tag-size-${size}`,
-        `tag-variant-${variant || 'filled'}`,
+        $color && `tag-${$color}`,
+        $size && `tag-size-${$size}`,
+        `tag-variant-${$variant || 'filled'}`,
     ]
         .filter(Boolean)
         .join(' '),
@@ -160,7 +160,7 @@ const TagWrapper = styled_components_1.default.div.attrs(({ className, color, si
   position: relative;
 
   padding: var(--tag-padding);
-  ${({ hasCloseButton }) => (hasCloseButton ? 'padding-right: 0;' : '')};
+  ${({ $hasCloseButton }) => ($hasCloseButton ? 'padding-right: 0;' : '')};
   margin: var(--tag-margin);
 
   &:last-child {
@@ -174,11 +174,11 @@ const TagWrapper = styled_components_1.default.div.attrs(({ className, color, si
   font-weight: var(--tag-font-weight);
   line-height: var(--tag-line-height);
   box-shadow: var(--tag-box-shadow);
-  ${({ textTransform }) => `text-transform: ${textTransform ? `${textTransform}` : 'var(--tag-text-transform)'};`}
+  ${({ $textTransform }) => `text-transform: ${$textTransform ? `${$textTransform}` : 'var(--tag-text-transform)'};`}
 
   color: var(--tag-color);
   background-color: var(--tag-bg-color);
-  ${({ borderless }) => borderless
+  ${({ $borderless }) => $borderless
     ? ''
     : `border: var(--tag-border-width) var(--tag-border-style) var(--tag-border-color);`}
   border-radius: var(--tag-border-radius);
@@ -188,7 +188,7 @@ const TagWrapper = styled_components_1.default.div.attrs(({ className, color, si
     height: var(--tag-icon-height);
   }
 
-  ${({ selectable }) => selectable &&
+  ${({ $selectable }) => $selectable &&
     (0, styled_components_1.css) `
       &:hover {
         background-color: var(--tag-bg-color-hover);
@@ -208,7 +208,7 @@ const StatusDot = styled_components_1.default.div `
   height: var(--tag-badge-size);
   border: var(--tag-badge-border-width) solid var(--tag-badge-border-color);
   border-radius: 50%;
-  background-color: ${({ color }) => color};
+  background-color: ${({ $color }) => $color};
 `;
 const ActiveIcon = (0, styled_components_1.default)(CheckmarkFilledIcon_1.CheckmarkFilledIcon) `
   width: 12px;

package/lib/components/Tooltip/AnchorTooltip.js

@@ -74,23 +74,23 @@ function TooltipComponent({ children, isOpen, tip, withArrow = true, placement =
             onBlur: handleClose,
         }
         : {};
-    return (react_1.default.createElement(TooltipWrapper, Object.assign({ ref: tooltipWrapperRef }, controllers, { className: `tooltip-${className}`, "data-component-name": "Tooltip/Tooltip", anchorName: anchorName }),
+    return (react_1.default.createElement(TooltipWrapper, Object.assign({ ref: tooltipWrapperRef }, controllers, { className: `tooltip-${className}`, "data-component-name": "Tooltip/Tooltip", $anchorName: anchorName }),
         children,
         isOpened && !disabled && (react_1.default.createElement(Portal_1.Portal, null,
-            react_1.default.createElement(TooltipBody, { ref: tooltipBodyRef, "data-testid": dataTestId || (typeof tip === 'string' ? tip : ''), placement: activePlacement, width: width, withArrow: withArrow, arrowPosition: activeArrowPosition === 'left' || activeArrowPosition === 'right'
+            react_1.default.createElement(TooltipBody, { ref: tooltipBodyRef, "data-testid": dataTestId || (typeof tip === 'string' ? tip : ''), $placement: activePlacement, $width: width, $withArrow: withArrow, $arrowPosition: activeArrowPosition === 'left' || activeArrowPosition === 'right'
                     ? activeArrowPosition
-                    : 'center', anchorName: anchorName }, tip)))));
+                    : 'center', $anchorName: anchorName }, tip)))));
 }
 exports.Tooltip = (0, react_1.memo)(TooltipComponent);
 const PLACEMENTS = {
     top: (0, styled_components_1.css) `
     bottom: anchor(top);
-    ${({ withArrow, arrowPosition }) => withArrow && arrowPosition === 'left'
+    ${({ $withArrow, $arrowPosition }) => $withArrow && $arrowPosition === 'left'
         ? (0, styled_components_1.css) `
             transform: translate(-32px, -6px);
             left: anchor(center);
           `
-        : arrowPosition === 'right'
+        : $arrowPosition === 'right'
             ? (0, styled_components_1.css) `
               transform: translate(32px, -6px);
               right: anchor(center);
@@ -100,7 +100,7 @@ const PLACEMENTS = {
               left: anchor(center);
             `}
 
-    ${({ withArrow, arrowPosition }) => withArrow &&
+    ${({ $withArrow, $arrowPosition }) => $withArrow &&
         (0, styled_components_1.css) `
         &::after {
           border-left: 14px solid transparent;
@@ -109,20 +109,20 @@ const PLACEMENTS = {
           border-top-style: solid;
           border-radius: 2px;
           bottom: 0;
-          ${arrowPosition === 'left' && 'left: 16px; transform: translateY(100%);'}
-          ${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, 100%);'}
-          ${arrowPosition === 'right' && 'right: 16px; transform: translateY(100%);'}
+          ${$arrowPosition === 'left' && 'left: 16px; transform: translateY(100%);'}
+          ${$arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, 100%);'}
+          ${$arrowPosition === 'right' && 'right: 16px; transform: translateY(100%);'}
         }
       `}
   `,
     bottom: (0, styled_components_1.css) `
     top: anchor(bottom);
-    ${({ withArrow, arrowPosition }) => withArrow && arrowPosition === 'left'
+    ${({ $withArrow, $arrowPosition }) => $withArrow && $arrowPosition === 'left'
         ? (0, styled_components_1.css) `
             transform: translate(-32px, 6px);
             left: anchor(center);
           `
-        : arrowPosition === 'right'
+        : $arrowPosition === 'right'
             ? (0, styled_components_1.css) `
               transform: translate(32px, 6px);
               right: anchor(center);
@@ -132,7 +132,7 @@ const PLACEMENTS = {
               left: anchor(center);
             `}
 
-    ${({ withArrow, arrowPosition }) => withArrow &&
+    ${({ $withArrow, $arrowPosition }) => $withArrow &&
         (0, styled_components_1.css) `
         &::after {
           border-left: 14px solid transparent;
@@ -141,9 +141,9 @@ const PLACEMENTS = {
           border-bottom-style: solid;
           border-radius: 0 0 2px 2px;
           top: 0;
-          ${arrowPosition === 'left' && 'left: 16px; transform: translateY(-100%);'}
-          ${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, -100%);'}
-          ${arrowPosition === 'right' && 'right: 16px; transform: translateY(-100%);'}
+          ${$arrowPosition === 'left' && 'left: 16px; transform: translateY(-100%);'}
+          ${$arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, -100%);'}
+          ${$arrowPosition === 'right' && 'right: 16px; transform: translateY(-100%);'}
         }
       `}
   `,
@@ -153,7 +153,7 @@ const PLACEMENTS = {
     top: anchor(center);
     left: anchor(left);
 
-    ${({ withArrow }) => withArrow &&
+    ${({ $withArrow }) => $withArrow &&
         (0, styled_components_1.css) `
         &::after {
           border-top: 14px solid transparent;
@@ -173,7 +173,7 @@ const PLACEMENTS = {
     top: anchor(center);
     left: anchor(right);
 
-    ${({ withArrow }) => withArrow &&
+    ${({ $withArrow }) => $withArrow &&
         (0, styled_components_1.css) `
         &::after {
           border-top: 14px solid transparent;
@@ -188,16 +188,16 @@ const PLACEMENTS = {
       `}
   `,
 };
-const TooltipWrapper = styled_components_1.default.div.attrs(({ anchorName }) => ({
+const TooltipWrapper = styled_components_1.default.div.attrs(({ $anchorName }) => ({
     style: {
-        anchorName: anchorName,
+        anchorName: $anchorName,
     },
 })) `
   display: flex;
 `;
-const TooltipBody = styled_components_1.default.span.attrs(({ anchorName }) => ({
+const TooltipBody = styled_components_1.default.span.attrs(({ $anchorName }) => ({
     style: {
-        positionAnchor: anchorName,
+        positionAnchor: $anchorName,
     },
 })) `
   position: fixed;
@@ -233,10 +233,11 @@ const TooltipBody = styled_components_1.default.span.attrs(({ anchorName }) => (
     var(--tooltip-border-color, transparent);
   box-shadow: var(--bg-raised-shadow);
 
-  width: ${({ width }) => width || 'max-content'};
+  width: ${({ $width }) => $width || 'max-content'};
 
-  ${({ placement }) => (0, styled_components_1.css) `
-    ${PLACEMENTS[placement]};
-  `}
+  ${({ $placement }) => $placement &&
+    (0, styled_components_1.css) `
+      ${PLACEMENTS[$placement]};
+    `}
 `;
 //# sourceMappingURL=AnchorTooltip.js.map

package/lib/components/Tooltip/JsTooltip.js

@@ -103,7 +103,7 @@ function TooltipComponent({ children, isOpen, tip, withArrow = true, placement =
     return (react_1.default.createElement(TooltipWrapper, Object.assign({ ref: wrapperRef }, controllers, { className: `tooltip-${className}`, "data-component-name": "Tooltip/Tooltip" }),
         children,
         isOpened && !disabled && (react_1.default.createElement(Portal_1.Portal, null,
-            react_1.default.createElement(TooltipBody, { ref: tooltipBodyRef, "data-testid": dataTestId || (typeof tip === 'string' ? tip : ''), placement: activePlacement, width: width, withArrow: withArrow, arrowPosition: activeArrowPosition, style: {
+            react_1.default.createElement(TooltipBody, { ref: tooltipBodyRef, "data-testid": dataTestId || (typeof tip === 'string' ? tip : ''), $placement: activePlacement, $width: width, $withArrow: withArrow, $arrowPosition: activeArrowPosition, style: {
                     position: 'fixed',
                     top: tooltipPosition.top,
                     left: tooltipPosition.left,
@@ -222,7 +222,7 @@ const TooltipBody = styled_components_1.default.span `
   display: inline-block;
 
   padding: var(--tooltip-padding);
-  max-width: ${({ width }) => width || 'var(--tooltip-max-width)'};
+  max-width: ${({ $width }) => $width || 'var(--tooltip-max-width)'};
   white-space: normal;
   word-break: normal;
   overflow-wrap: break-word;
@@ -251,9 +251,9 @@ const TooltipBody = styled_components_1.default.span `
     var(--tooltip-border-color, transparent);
   box-shadow: var(--bg-raised-shadow);
 
-  width: ${({ width }) => width || 'max-content'};
-  ${({ placement }) => (0, styled_components_1.css) `
-    ${PLACEMENTS[placement]};
+  width: ${({ $width }) => $width || 'max-content'};
+  ${({ $placement }) => (0, styled_components_1.css) `
+    ${PLACEMENTS[$placement]};
   `}
 `;
 //# sourceMappingURL=JsTooltip.js.map