@redocly/theme 0.66.0 → 0.67.0-next.1

package/src/components/Sidebar/Sidebar.tsx

@@ -51,9 +51,9 @@ export function Sidebar({
   return (
     <SidebarContent
       data-component-name="Sidebar/Sidebar"
-      opened={isOpen}
+      $opened={isOpen}
       className={className}
-      collapsed={mappedCollapsed}
+      $collapsed={mappedCollapsed}
     >
       {header ? <SidebarHeader collapsed={mappedCollapsed}>{header}</SidebarHeader> : null}
       {!mappedCollapsed && versions ? versions : null}
@@ -65,7 +65,7 @@ export function Sidebar({
         {menu}
       </MenuContainer>
       {footer && !isOpen ? (
-        <SidebarFooter collapsed={mappedCollapsed} data-component-name="Sidebar/FooterWrapper">
+        <SidebarFooter $collapsed={mappedCollapsed} data-component-name="Sidebar/FooterWrapper">
           {footer}
         </SidebarFooter>
       ) : null}
@@ -73,7 +73,7 @@ export function Sidebar({
   );
 }
 
-const SidebarContent = styled.aside<{ opened?: boolean; collapsed?: boolean }>`
+const SidebarContent = styled.aside<{ $opened: boolean; $collapsed?: boolean }>`
   border-right: 1px solid var(--sidebar-border-color);
   position: fixed;
   left: 0;
@@ -91,8 +91,8 @@ const SidebarContent = styled.aside<{ opened?: boolean; collapsed?: boolean }>`
   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: ${breakpoints.medium}) {
@@ -103,8 +103,8 @@ const SidebarContent = styled.aside<{ opened?: boolean; collapsed?: boolean }>`
     flex-shrink: 0;
     overflow: clip;
 
-    ${({ collapsed }) =>
-      collapsed
+    ${({ $collapsed }) =>
+      $collapsed
         ? `
           flex-direction: column;
           width: var(--sidebar-collapsed-width);
@@ -121,7 +121,9 @@ const SidebarContent = styled.aside<{ opened?: boolean; collapsed?: boolean }>`
   }
 `;
 
-export const SidebarHeader = styled.div<{ collapsed?: boolean }>`
+export const SidebarHeader = styled.div.withConfig({
+  shouldForwardProp: (prop) => prop !== 'collapsed',
+})<{ collapsed?: boolean; className?: string }>`
   margin: var(--sidebar-offset-top) var(--sidebar-margin-horizontal) 0
     var(--sidebar-margin-horizontal);
   padding: 0 0 var(--sidebar-header-padding-bottom) 0;
@@ -133,17 +135,17 @@ export const SidebarHeader = styled.div<{ collapsed?: boolean }>`
     `}
 `;
 
-const SidebarFooter = styled.div<{ collapsed?: boolean }>`
+const SidebarFooter = styled.div<{ $collapsed?: boolean }>`
   display: none;
   padding: var(--sidebar-footer-padding-vertical) var(--sidebar-footer-padding-horizontal);
 
   @media screen and (min-width: ${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/src/components/SidebarActions/styled.ts

@@ -3,7 +3,9 @@ import styled, { css } from 'styled-components';
 import { breakpoints } from '@redocly/theme/core/utils';
 import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
 
-const StyledChangeViewButton = styled.span<{ collapsedSidebar?: boolean }>`
+const StyledChangeViewButton = styled.span.withConfig({
+  shouldForwardProp: (prop) => prop !== 'collapsedSidebar',
+})<{ collapsedSidebar: boolean }>`
   display: flex;
   position: relative;
   flex-direction: ${({ collapsedSidebar }) => (collapsedSidebar ? 'column' : 'row')};
@@ -16,7 +18,9 @@ const StyledChangeViewButton = styled.span<{ collapsedSidebar?: boolean }>`
   padding: calc(var(--spacing-unit) / 2);
 `;
 
-const StyledChangeViewButtonWrap = styled(Tooltip)<{ active?: boolean }>`
+const StyledChangeViewButtonWrap = styled(Tooltip).withConfig({
+  shouldForwardProp: (prop) => prop !== 'active',
+})<{ active: boolean }>`
   width: 20px;
   height: 20px;
   border-radius: var(--border-radius);
@@ -26,7 +30,9 @@ const StyledChangeViewButtonWrap = styled(Tooltip)<{ active?: boolean }>`
   background-color: ${({ active }) => active && 'var(--segmented-buttons-bg-color-inner)'};
 `;
 
-const ControlsWrap = styled.span<{
+const ControlsWrap = styled.span.withConfig({
+  shouldForwardProp: (prop) => prop !== 'iconCount' && prop !== 'isCollapsed',
+})<{
   iconCount?: number;
   isCollapsed?: boolean;
 }>`
@@ -59,7 +65,9 @@ const ControlsWrap = styled.span<{
   }
 `;
 
-const ControlsWrapChangeLayoutButtons = styled.span<{ isCollapsed?: boolean }>`
+const ControlsWrapChangeLayoutButtons = styled.span.withConfig({
+  shouldForwardProp: (prop) => prop !== 'isCollapsed',
+})<{ isCollapsed: boolean }>`
   display: flex;
   bottom: 0;
   flex-direction: ${({ isCollapsed }) => (isCollapsed ? 'column-reverse' : 'row')};

package/src/components/StatusCode/StatusCode.tsx

@@ -1,14 +1,22 @@
 import styled from 'styled-components';
 
-export const StatusCode = styled.button.attrs<{
+export type StatusCodeProps = {
   status: string;
-  'data-component-name': string;
-}>({ 'data-component-name': 'StatusCode/StatusCode' })`
+  className?: string;
+};
+
+export const StatusCode = styled.button
+  .withConfig({
+    shouldForwardProp: (prop) => prop !== 'status',
+  })
+  .attrs<{ 'data-component-name': string }>({
+    'data-component-name': 'StatusCode/StatusCode',
+  })<StatusCodeProps>`
   background: none;
   padding: 0;
   display: flex;
   align-items: center;
-    
+
   &:before {
     display: inline-block;
     content: '';

package/src/components/Switch/Switch.tsx

@@ -44,43 +44,43 @@ export function Switch({
       role="switch"
       aria-checked={value}
       aria-disabled={disabled}
-      selected={value}
-      disabled={disabled}
+      $selected={value}
+      $disabled={disabled}
       className={className}
     >
-      <Knob selected={value} disabled={disabled} />
+      <Knob $selected={value} $disabled={disabled} />
     </SwitchWrapper>
   );
 }
 
-const SwitchWrapper = styled.div<{ selected: boolean; disabled: boolean }>`
+const SwitchWrapper = styled.div<{ $selected: boolean; $disabled: boolean }>`
   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 &&
     css`
       &:hover {
         background-color: var(--switch-bg-color-hover);
@@ -93,17 +93,17 @@ const SwitchWrapper = styled.div<{ selected: boolean; disabled: boolean }>`
     `}
 `;
 
-const Knob = styled.div<{ selected: boolean; disabled: boolean }>`
+const Knob = styled.div<{ $selected: boolean; $disabled: boolean }>`
   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);
 `;

package/src/components/TableOfContent/TableOfContent.tsx

@@ -56,7 +56,7 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
             <TableOfContentMenuItem
               key={href + idx}
               href={href}
-              depth={heading.depth - leastDepth + 1 || 0}
+              $depth={heading.depth - leastDepth + 1 || 0}
               className={activeHeading === heading.id ? 'active' : ''}
               dangerouslySetInnerHTML={{ __html: heading.value || '' }}
               data-testid={`toc-${heading.value}`}
@@ -103,7 +103,7 @@ const TableOfContentItems = styled.div`
   border-left: solid 1px var(--toc-border-color);
 `;
 
-const TableOfContentMenuItem = styled.a<{ depth: number }>`
+const TableOfContentMenuItem = styled.a<{ $depth: number }>`
   display: block;
   color: var(--toc-item-text-color);
   font-weight: var(--toc-item-font-weight);
@@ -111,7 +111,7 @@ const TableOfContentMenuItem = styled.a<{ depth: number }>`
   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/src/components/Tag/Tag.tsx

@@ -147,18 +147,18 @@ export function Tag({
     <TagWrapper
       tabIndex={tabIndex}
       data-component-name="Tag/Tag"
-      borderless={borderless}
-      color={color}
-      size={size}
+      $borderless={borderless}
+      $color={color}
+      $size={size}
       onClick={onClick}
       onKeyDown={onKeyDown}
-      hasCloseButton={closable}
-      textTransform={textTransform}
-      variant={variant}
-      selectable={selectable}
+      $hasCloseButton={closable}
+      $textTransform={textTransform}
+      $variant={variant}
+      $selectable={selectable}
       {...otherProps}
     >
-      {withStatusDot ? <StatusDot color={statusDotColor} /> : icon ? icon : null}
+      {withStatusDot ? <StatusDot $color={statusDotColor} /> : icon ? icon : null}
       <ContentWrapper>{renderChildren()}</ContentWrapper>
       {closable && (
         <CloseButton
@@ -202,22 +202,29 @@ const CloseButton = styled.div`
   }
 `;
 
-const TagWrapper = styled.div.attrs<
-  TagProps & {
-    hasCloseButton?: boolean;
-    textTransform?: 'uppercase' | 'lowercase' | 'capitalize' | 'none';
-  }
->(({ className, color, size, variant }) => ({
+const TagWrapper = styled.div.attrs<{
+  $color?: string;
+  $size?: string;
+  $variant?: string;
+}>(({ 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(' '),
-}))`
+}))<{
+  $borderless?: boolean;
+  $hasCloseButton?: boolean;
+  $textTransform?: string;
+  $selectable?: boolean;
+  $color?: string;
+  $size?: string;
+  $variant?: string;
+}>`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -225,7 +232,7 @@ const TagWrapper = styled.div.attrs<
   position: relative;
 
   padding: var(--tag-padding);
-  ${({ hasCloseButton }) => (hasCloseButton ? 'padding-right: 0;' : '')};
+  ${({ $hasCloseButton }) => ($hasCloseButton ? 'padding-right: 0;' : '')};
   margin: var(--tag-margin);
 
   &:last-child {
@@ -239,13 +246,13 @@ const TagWrapper = styled.div.attrs<
   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);
@@ -255,8 +262,8 @@ const TagWrapper = styled.div.attrs<
     height: var(--tag-icon-height);
   }
 
-  ${({ selectable }) =>
-    selectable &&
+  ${({ $selectable }) =>
+    $selectable &&
     css`
       &:hover {
         background-color: var(--tag-bg-color-hover);
@@ -271,13 +278,13 @@ const TagWrapper = styled.div.attrs<
     `};
 `;
 
-const StatusDot = styled.div<{ color: string }>`
+const StatusDot = styled.div<{ $color: string }>`
   display: inline-block;
   width: var(--tag-badge-size);
   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 = styled(CheckmarkFilledIcon)`

package/src/components/Tooltip/AnchorTooltip.tsx

@@ -76,7 +76,7 @@ function TooltipComponent({
       {...controllers}
       className={`tooltip-${className}`}
       data-component-name="Tooltip/Tooltip"
-      anchorName={anchorName}
+      $anchorName={anchorName}
     >
       {children}
       {isOpened && !disabled && (
@@ -84,15 +84,15 @@ function TooltipComponent({
           <TooltipBody
             ref={tooltipBodyRef}
             data-testid={dataTestId || (typeof tip === 'string' ? tip : '')}
-            placement={activePlacement}
-            width={width}
-            withArrow={withArrow}
-            arrowPosition={
+            $placement={activePlacement}
+            $width={width}
+            $withArrow={withArrow}
+            $arrowPosition={
               activeArrowPosition === 'left' || activeArrowPosition === 'right'
                 ? activeArrowPosition
                 : 'center'
             }
-            anchorName={anchorName}
+            $anchorName={anchorName}
           >
             {tip}
           </TooltipBody>
@@ -104,16 +104,21 @@ function TooltipComponent({
 
 export const Tooltip = memo<PropsWithChildren<Props>>(TooltipComponent);
 
+type TooltipBodyStyleProps = {
+  $withArrow?: boolean;
+  $arrowPosition?: 'left' | 'right' | 'center';
+};
+
 const PLACEMENTS = {
-  top: css<Pick<Props, 'withArrow' | 'arrowPosition'>>`
+  top: css<TooltipBodyStyleProps>`
     bottom: anchor(top);
-    ${({ withArrow, arrowPosition }) =>
-      withArrow && arrowPosition === 'left'
+    ${({ $withArrow, $arrowPosition }) =>
+      $withArrow && $arrowPosition === 'left'
         ? css`
             transform: translate(-32px, -6px);
             left: anchor(center);
           `
-        : arrowPosition === 'right'
+        : $arrowPosition === 'right'
           ? css`
               transform: translate(32px, -6px);
               right: anchor(center);
@@ -123,8 +128,8 @@ const PLACEMENTS = {
               left: anchor(center);
             `}
 
-    ${({ withArrow, arrowPosition }) =>
-      withArrow &&
+    ${({ $withArrow, $arrowPosition }) =>
+      $withArrow &&
       css`
         &::after {
           border-left: 14px solid transparent;
@@ -133,21 +138,21 @@ 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: css<Pick<Props, 'withArrow' | 'arrowPosition'>>`
+  bottom: css<TooltipBodyStyleProps>`
     top: anchor(bottom);
-    ${({ withArrow, arrowPosition }) =>
-      withArrow && arrowPosition === 'left'
+    ${({ $withArrow, $arrowPosition }) =>
+      $withArrow && $arrowPosition === 'left'
         ? css`
             transform: translate(-32px, 6px);
             left: anchor(center);
           `
-        : arrowPosition === 'right'
+        : $arrowPosition === 'right'
           ? css`
               transform: translate(32px, 6px);
               right: anchor(center);
@@ -157,8 +162,8 @@ const PLACEMENTS = {
               left: anchor(center);
             `}
 
-    ${({ withArrow, arrowPosition }) =>
-      withArrow &&
+    ${({ $withArrow, $arrowPosition }) =>
+      $withArrow &&
       css`
         &::after {
           border-left: 14px solid transparent;
@@ -167,20 +172,20 @@ 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%);'}
         }
       `}
   `,
-  left: css<Pick<Props, 'withArrow' | 'arrowPosition'>>`
+  left: css<TooltipBodyStyleProps>`
     transform: translate(-100%, -50%);
     margin-left: -7px;
     top: anchor(center);
     left: anchor(left);
 
-    ${({ withArrow }) =>
-      withArrow &&
+    ${({ $withArrow }) =>
+      $withArrow &&
       css`
         &::after {
           border-top: 14px solid transparent;
@@ -194,14 +199,14 @@ const PLACEMENTS = {
         }
       `}
   `,
-  right: css<Pick<Props, 'withArrow' | 'arrowPosition'>>`
+  right: css<TooltipBodyStyleProps>`
     transform: translate(0, -50%);
     margin-left: 7px;
     top: anchor(center);
     left: anchor(right);
 
-    ${({ withArrow }) =>
-      withArrow &&
+    ${({ $withArrow }) =>
+      $withArrow &&
       css`
         &::after {
           border-top: 14px solid transparent;
@@ -217,22 +222,23 @@ const PLACEMENTS = {
   `,
 };
 
-const TooltipWrapper = styled.div.attrs<{ anchorName: string }>(({ anchorName }) => ({
+const TooltipWrapper = styled.div.attrs<{ $anchorName: string }>(({ $anchorName }) => ({
   style: {
-    anchorName: anchorName,
+    anchorName: $anchorName,
   } as React.CSSProperties,
-}))<{ anchorName: string }>`
+}))<{ $anchorName: string }>`
   display: flex;
 `;
 
-const TooltipBody = styled.span.attrs<{ anchorName: string }>(({ anchorName }) => ({
+const TooltipBody = styled.span.attrs<{ $anchorName: string }>(({ $anchorName }) => ({
   style: {
-    positionAnchor: anchorName,
+    positionAnchor: $anchorName,
   } as React.CSSProperties,
 }))<
-  Pick<Required<Props>, 'placement' | 'withArrow' | 'arrowPosition'> & {
-    width?: string;
-    anchorName: string;
+  TooltipBodyStyleProps & {
+    $placement: Props['placement'];
+    $width?: string;
+    $anchorName: string;
   }
 >`
   position: fixed;
@@ -268,9 +274,11 @@ const TooltipBody = styled.span.attrs<{ anchorName: string }>(({ anchorName }) =
     var(--tooltip-border-color, transparent);
   box-shadow: var(--bg-raised-shadow);
 
-  width: ${({ width }) => width || 'max-content'};
+  width: ${({ $width }) => $width || 'max-content'};
 
-  ${({ placement }) => css`
-    ${PLACEMENTS[placement]};
-  `}
+  ${({ $placement }) =>
+    $placement &&
+    css`
+      ${PLACEMENTS[$placement]};
+    `}
 `;

package/src/components/Tooltip/JsTooltip.tsx

@@ -105,10 +105,10 @@ function TooltipComponent({
           <TooltipBody
             ref={tooltipBodyRef}
             data-testid={dataTestId || (typeof tip === 'string' ? tip : '')}
-            placement={activePlacement}
-            width={width}
-            withArrow={withArrow}
-            arrowPosition={activeArrowPosition}
+            $placement={activePlacement}
+            $width={width}
+            $withArrow={withArrow}
+            $arrowPosition={activeArrowPosition}
             style={{
               position: 'fixed',
               top: tooltipPosition.top,
@@ -240,15 +240,16 @@ const TooltipWrapper = styled.div`
   position: relative;
   display: flex;
 `;
-const TooltipBody = styled.span<
-  Pick<Required<TooltipProps>, 'placement' | 'withArrow' | 'arrowPosition'> & {
-    width?: string;
-  }
->`
+const TooltipBody = styled.span<{
+  $placement: NonNullable<TooltipProps['placement']>;
+  $withArrow: boolean;
+  $arrowPosition: NonNullable<TooltipProps['arrowPosition']>;
+  $width?: string;
+}>`
   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;
@@ -277,8 +278,8 @@ const TooltipBody = styled.span<
     var(--tooltip-border-color, transparent);
   box-shadow: var(--bg-raised-shadow);
 
-  width: ${({ width }) => width || 'max-content'};
-  ${({ placement }) => css`
-    ${PLACEMENTS[placement]};
+  width: ${({ $width }) => $width || 'max-content'};
+  ${({ $placement }) => css`
+    ${PLACEMENTS[$placement]};
   `}
 `;

package/src/components/Typography/CompactTypography.tsx

@@ -3,11 +3,11 @@ import styled from 'styled-components';
 import { Typography } from '@redocly/theme/components/Typography/Typography';
 
 export const CompactTypography = styled(Typography).attrs<{
-  mt: string;
-  mb: string;
+  marginBottom: string;
+  marginTop: string;
   'data-component-name': string;
 }>({
-  mt: '0em',
-  mb: '0em',
+  marginBottom: '0em',
+  marginTop: '0em',
   'data-component-name': 'Typography/CompactTypography',
 })``;