@redocly/theme 0.66.0 → 0.67.0-next.1

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -7,7 +7,7 @@ import type { CodeBlockItems } from '@redocly/theme/components/CodeBlock/CodeBlo
 import { CodeBlockTabs } from '@redocly/theme/components/CodeBlock/CodeBlockTabs';
 import { CopyButton } from '@redocly/theme/components/Buttons/CopyButton';
 import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
-import { useThemeHooks, useThemeConfig } from '@redocly/theme/core/hooks';
+import { useThemeHooks, useThemeConfig, ReportButtonProps } from '@redocly/theme/core/hooks';
 import { DeselectIcon } from '@redocly/theme/icons/DeselectIcon/DeselectIcon';
 import { MaximizeIcon } from '@redocly/theme/icons/MaximizeIcon/MaximizeIcon';
 import { MinimizeIcon } from '@redocly/theme/icons/MinimizeIcon/MinimizeIcon';
@@ -39,8 +39,7 @@ type ControlProps = {
   label?: string;
   tooltipText?: string;
   onClick?: () => void;
-  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-  props?: Record<string, any>;
+  props?: ReportButtonProps;
 };
 
 type CopyControlProps = ControlProps & {
@@ -87,7 +86,10 @@ export function CodeBlockControls({
         {dropdown && <CodeBlockDropdown {...dropdown} />}
         {report && !report.hidden && !report?.props?.hide ? (
           <Tooltip
-            tip={translate('codeSnippet.report.tooltipText', 'Report a problem')}
+            tip={
+              report.props?.tooltip ||
+              translate('codeSnippet.report.tooltipText', 'Report a problem')
+            }
             placement="top"
             arrowPosition="right"
           >
@@ -97,16 +99,15 @@ export function CodeBlockControls({
               data-testid="report-button"
               icon={controlsType === 'icon' ? <WarningSquareIcon size="18px" /> : undefined}
               aria-label="Report a problem"
-              {...report.props}
+              onClick={report.props?.onClick}
             >
-              {controlsType != 'icon' && (report.props?.buttonText || 'Report')}
+              {controlsType !== 'icon' && (report.props?.buttonText || 'Report')}
             </ControlButton>
           </Tooltip>
         ) : null}
-
         {expand && !codeSnippet?.expand?.hide ? (
           <Tooltip
-            tip={translate('codeSnippet.expand.tooltipText', 'Expand all')}
+            tip={expand.props?.tooltip || translate('codeSnippet.expand.tooltipText', 'Expand all')}
             placement="top"
             arrowPosition="right"
           >
@@ -125,7 +126,10 @@ export function CodeBlockControls({
 
         {collapse && !codeSnippet?.collapse?.hide ? (
           <Tooltip
-            tip={translate('codeSnippet.collapse.tooltipText', 'Collapse all')}
+            tip={
+              collapse.props?.tooltip ||
+              translate('codeSnippet.collapse.tooltipText', 'Collapse all')
+            }
             placement="top"
             arrowPosition="right"
           >
@@ -137,7 +141,7 @@ export function CodeBlockControls({
               onClick={collapse?.onClick}
               aria-label="Collapse all"
             >
-              {controlsType !== 'icon' && (expand?.label || 'Collapse all')}
+              {controlsType !== 'icon' && (collapse?.label || 'Collapse all')}
             </ControlButton>
           </Tooltip>
         ) : null}
@@ -149,6 +153,7 @@ export function CodeBlockControls({
             data-testid="select-all"
             icon={controlsType === 'icon' ? <SelectIcon /> : undefined}
             onClick={select?.onClick}
+            aria-label="Select all"
           >
             {controlsType !== 'icon' && select?.label ? select.label : 'Select all'}
           </ControlButton>
@@ -161,6 +166,7 @@ export function CodeBlockControls({
             data-testid="clear-all"
             icon={controlsType === 'icon' ? <DeselectIcon /> : undefined}
             onClick={deselect?.onClick}
+            aria-label="Clear all"
           >
             {controlsType !== 'icon' && deselect?.label ? deselect.label : 'Clear all'}
           </ControlButton>

package/src/components/CodeBlock/CodeBlockTabs.tsx

@@ -49,7 +49,7 @@ export function CodeBlockTabs({ tabs }: CodeBlockTabsProps): JSX.Element {
                   tabRefs.current[i] = el as HTMLButtonElement;
                 }}
                 data-name={name}
-                active={id === tabs.value}
+                $active={id === tabs.value}
                 key={id}
                 onClick={() => tabs.onChange(id)}
               >
@@ -118,7 +118,7 @@ const Tabs = styled.div`
   }
 `;
 
-const Tab = styled.button<{ active: boolean }>`
+const Tab = styled.button<{ $active: boolean }>`
   --icon-size: 18px;
   display: inline-flex;
   align-items: center;
@@ -131,8 +131,8 @@ const Tab = styled.button<{ active: boolean }>`
   gap: var(--spacing-xs);
   color: var(--text-color-secondary);
 
-  ${({ active }) =>
-    active
+  ${({ $active }) =>
+    $active
       ? css`
           color: var(--text-color-primary);
           background-color: var(--tab-bg-color-filled);

package/src/components/Dropdown/Dropdown.tsx

@@ -104,9 +104,9 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
         {dropdownTrigger}
 
         <ChildrenWrapper
-          placement={placement}
-          alignment={alignment}
-          isOpen={isOpen}
+          $placement={placement}
+          $alignment={alignment}
+          $isOpen={isOpen}
           onClick={closeOnClick ? handleChildClick : undefined}
         >
           {children}
@@ -133,14 +133,14 @@ const DropdownWrapper = styled.div`
   text-decoration: none;
 `;
 
-const ChildrenWrapper = styled.div<{ placement?: string; alignment?: string; isOpen?: boolean }>`
+const ChildrenWrapper = styled.div<{ $placement?: string; $alignment?: string; $isOpen?: boolean }>`
   padding-top: var(--dropdown-menu-padding-top);
   position: absolute;
-  top: ${({ placement }) => (placement === 'top' ? 'auto' : '100%')};
-  bottom: ${({ placement }) => (placement === 'top' ? '100%' : 'auto')};
-  left: ${({ alignment }) => (alignment === 'start' ? '0' : 'auto')};
-  right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
-  display: ${({ isOpen }) => (isOpen ? 'block' : 'none')};
+  top: ${({ $placement }) => ($placement === 'top' ? 'auto' : '100%')};
+  bottom: ${({ $placement }) => ($placement === 'top' ? '100%' : 'auto')};
+  left: ${({ $alignment }) => ($alignment === 'start' ? '0' : 'auto')};
+  right: ${({ $alignment }) => ($alignment === 'end' ? '0' : 'auto')};
+  display: ${({ $isOpen }) => ($isOpen ? 'block' : 'none')};
 
   z-index: var(--dropdown-menu-z-index);
 `;

package/src/components/Dropdown/DropdownMenuItem.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 
 import type { KeyboardEvent, CSSProperties, ReactNode, PropsWithChildren, JSX } from 'react';
-import type { LinkProps } from '@redocly/theme/components/Link/Link';
+import type { LinkProps } from '@redocly/theme/core/types';
 
 import { Link } from '@redocly/theme/components/Link/Link';
 

package/src/components/Feedback/Comment.tsx

@@ -60,7 +60,7 @@ export function Comment({
         <StyledFormMandatoryFields>
           <Label
             data-translation-key="feedback.settings.comment.submitText"
-            standAlone={standAlone}
+            $standAlone={standAlone}
           >
             {submitText ||
               translate(
@@ -81,7 +81,7 @@ export function Comment({
       className={className}
       style={standAlone ? { width: 'var(--feedback-report-dialog-width)' } : { width: 'auto' }}
     >
-      <Label data-translation-key="feedback.settings.comment.label" standAlone={standAlone}>
+      <Label data-translation-key="feedback.settings.comment.label" $standAlone={standAlone}>
         {label ||
           translate('feedback.settings.comment.label', 'Please share your feedback with us.')}
       </Label>
@@ -149,13 +149,13 @@ const StateWrapper = styled(CommentWrapper)`
   gap: var(--spacing-xxs);
 `;
 
-const Label = styled.h4<{ standAlone: boolean }>`
+const Label = styled.h4<{ $standAlone: boolean }>`
   font-weight: var(--font-weight-regular);
   font-size: var(--feedback-font-size);
   line-height: var(--feedback-line-height);
 
-  ${({ standAlone }) =>
-    standAlone &&
+  ${({ $standAlone }) =>
+    $standAlone &&
     css`
       font-size: var(--feedback-header-font-size);
       line-height: var(--feedback-header-line-height);

package/src/components/Feedback/Mood.tsx

@@ -165,7 +165,7 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
     return (
       <MoodWrapper data-component-name="Feedback/Mood">
         <StyledFormMandatoryFields>
-          <Label standAlone={true} data-translation-key="feedback.settings.submitText">
+          <Label $standAlone={true} data-translation-key="feedback.settings.submitText">
             {submitText ||
               translate(
                 'feedback.settings.submitText',
@@ -182,7 +182,7 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
     <MoodWrapper data-component-name="Feedback/Mood" className={className}>
       <StyledForm onSubmit={onSubmitMoodForm}>
         <StyledFormMandatoryFields>
-          <Label standAlone={true} data-translation-key="feedback.settings.label">
+          <Label $standAlone={true} data-translation-key="feedback.settings.label">
             {label || translate('feedback.settings.label', 'Was this helpful?')}
           </Label>
           <StyledMandatoryFieldContainer>
@@ -305,15 +305,15 @@ const MoodWrapper = styled.div`
   align-items: center;
 `;
 
-const Label = styled.h4<{ standAlone?: boolean }>`
+const Label = styled.h4<{ $standAlone: boolean }>`
   font-family: var(--feedback-font-family);
   font-weight: var(--font-weight-regular);
   font-size: var(--feedback-font-size);
   line-height: var(--feedback-line-height);
   color: var(--feedback-text-color);
 
-  ${({ standAlone = false }) =>
-    standAlone &&
+  ${({ $standAlone = false }) =>
+    $standAlone &&
     css`
       font-size: var(--feedback-header-font-size);
       line-height: var(--feedback-header-line-height);

package/src/components/Filter/FilterContent.tsx

@@ -70,7 +70,7 @@ export function FilterContent({
       {!hideSearch && (
         <FilterInput value={filterTerm} onChange={(updatedTerm) => setFilterTerm(updatedTerm)} />
       )}
-      <FilterItems hideSearch={hideSearch}>
+      <FilterItems $hideSearch={hideSearch}>
         {filters.map((filter, idx) => (
           <Filter
             filter={filter}
@@ -104,15 +104,15 @@ const FiltersTitle = styled.div`
   line-height: var(--filter-content-title-line-height);
 `;
 
-const FilterItems = styled.div<{ hideSearch?: boolean }>`
+const FilterItems = styled.div<{ $hideSearch?: boolean }>`
   padding: var(--filter-content-items-padding);
   height: 100%;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-base);
   border-top: 1px solid var(--border-color-secondary);
-  ${({ hideSearch }) =>
-    hideSearch &&
+  ${({ $hideSearch }) =>
+    $hideSearch &&
     css`
       border-top: none;
     `}

package/src/components/Filter/FilterPopover.tsx

@@ -47,7 +47,7 @@ export function FilterPopover({
   );
 }
 
-const FilterPopoverWrapper = styled.aside<{ isActiveInMobileMode?: boolean }>`
+const FilterPopoverWrapper = styled.aside`
   position: absolute;
   top: 0;
   z-index: var(--z-index-popover);

package/src/components/Footer/Footer.tsx

@@ -28,7 +28,7 @@ export function Footer({ className }: FooterProps): JSX.Element | null {
     <FooterWrapper
       data-component-name="Footer/Footer"
       className={className}
-      withColumns={withColumns}
+      $withColumns={withColumns}
     >
       {!!items.length && (
         <FooterColumnsSection>
@@ -83,7 +83,7 @@ const FooterColumnsSection = styled.div`
   }
 `;
 
-const FooterWrapper = styled.footer<{ withColumns?: boolean }>`
+const FooterWrapper = styled.footer<{ $withColumns: boolean }>`
   padding: var(--mobile-footer-padding-vertical) var(--mobile-footer-padding-horizontal);
   border-top: 1px solid var(--footer-border-color);
   font-size: var(--footer-font-size);
@@ -100,8 +100,8 @@ const FooterWrapper = styled.footer<{ withColumns?: boolean }>`
   @media screen and (min-width: ${breakpoints.small}) {
     padding: var(--footer-padding-vertical) var(--footer-padding-horizontal);
     flex-direction: row;
-    ${({ withColumns }) =>
-      withColumns
+    ${({ $withColumns }) =>
+      $withColumns
         ? `
     flex-direction: column;
     align-items: stretch;

package/src/components/Footer/FooterColumn.tsx

@@ -23,7 +23,7 @@ export function FooterColumn({ column, className }: FooterColumnProps): JSX.Elem
   return (
     <FooterColumnWrapper data-component-name="Footer/FooterColumn" className={className}>
       {!isNavLinkItem(column) && <FooterColumnTitle>{label}</FooterColumnTitle>}
-      <FooterColumnItems iconsOnly={isNavLinkItem(column) ? false : iconsOnly}>
+      <FooterColumnItems $iconsOnly={isNavLinkItem(column) ? false : iconsOnly}>
         {isNavLinkItem(column) ? (
           <NonGroupItem
             item={column}
@@ -87,11 +87,11 @@ const FooterColumnTitle = styled.div`
   }
 `;
 
-const FooterColumnItems = styled.div<{ iconsOnly: boolean }>`
+const FooterColumnItems = styled.div<{ $iconsOnly?: boolean }>`
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  flex-direction: ${(props) => (props.iconsOnly ? 'row' : 'column')};
+  flex-direction: ${(props) => (props.$iconsOnly ? 'row' : 'column')};
 
   @media screen and (min-width: ${breakpoints.small}) {
     justify-content: flex-start;

package/src/components/Footer/FooterItem.tsx

@@ -31,8 +31,8 @@ export function FooterItem({ item, iconsOnly, className }: FooterItemProps): JSX
     <FooterItemWrapper
       className={className}
       data-component-name="Footer/FooterItem"
-      iconsOnly={iconsOnly}
-      item={item}
+      $iconsOnly={iconsOnly}
+      $item={item}
     >
       {item.type === 'separator' ? (
         <FooterSeparator data-translation-key={item.labelTranslationKey}>
@@ -48,7 +48,7 @@ export function FooterItem({ item, iconsOnly, className }: FooterItemProps): JSX
           data-translation-key={item.labelTranslationKey}
         >
           {hasIcon ? (
-            <FooterLinkIcon iconsOnly={iconsOnly}>
+            <FooterLinkIcon $iconsOnly={iconsOnly}>
               <GenericIcon icon={item.icon} srcSet={item.srcSet} />
             </FooterLinkIcon>
           ) : null}
@@ -67,11 +67,11 @@ const FooterSeparator = styled.div`
   opacity: var(--footer-separator-item-opacity);
 `;
 
-const FooterLinkIcon = styled.div<{ iconsOnly?: boolean }>`
+const FooterLinkIcon = styled.div<{ $iconsOnly?: boolean }>`
   --icon-width: var(--footer-item-icon-width);
   --icon-height: var(--footer-item-icon-height);
   display: inline-flex;
-  margin-right: ${({ iconsOnly }) => (iconsOnly ? '0' : 'var(--footer-item-icon-margin-right)')};
+  margin-right: ${({ $iconsOnly }) => ($iconsOnly ? '0' : 'var(--footer-item-icon-margin-right)')};
   vertical-align: middle;
   border: 1px solid var(--footer-item-icon-border-color);
   border-radius: var(--footer-item-icon-border-radius);
@@ -91,11 +91,11 @@ const FooterLink = styled(Link)`
   }
 `;
 
-const FooterItemWrapper = styled.div<{ iconsOnly?: boolean; item: ResolvedNavItem }>`
-  margin: ${({ iconsOnly, item }) =>
-    iconsOnly
+const FooterItemWrapper = styled.div<{ $iconsOnly?: boolean; $item: ResolvedNavItem }>`
+  margin: ${({ $iconsOnly, $item }) =>
+    $iconsOnly
       ? '0 var(--footer-item-icon-margin-right) 0 0;'
-      : item.type === 'link'
+      : $item.type === 'link'
         ? 'var(--footer-link-padding-vertical) var(--footer-link-padding-horizontal);'
         : '0'};
 `;

package/src/components/Image/Image.tsx

@@ -93,7 +93,7 @@ export function Image(props: ImageProps): JSX.Element {
         Array.from(parsedSourceSetMap).map(([key, value]) => (
           <ColorModeAwareImage
             key={key}
-            colorMode={key}
+            $colorMode={key}
             src={value}
             alt={alt}
             className={className}
@@ -109,8 +109,8 @@ export function Image(props: ImageProps): JSX.Element {
   );
 }
 
-const ColorModeAwareImage = styled.img<{ colorMode: string; $withLightbox?: boolean }>`
-  html:not(.${(props) => props.colorMode}) && {
+const ColorModeAwareImage = styled.img<{ $colorMode: string; $withLightbox?: boolean }>`
+  html:not(.${(props) => props.$colorMode}) && {
     display: none;
   }
   ${({ $withLightbox }) =>

package/src/components/LastUpdated/LastUpdated.tsx

@@ -59,7 +59,7 @@ export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
     <LastUpdatedWrapper
       className={props.className}
       data-component-name="LastUpdated/LastUpdated"
-      rawOnPrint={format === 'timeago'}
+      $rawOnPrint={format === 'timeago'}
       data-print-datetime={isoDate}
       data-translation-key={translationKey}
     >
@@ -70,15 +70,15 @@ export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
   );
 }
 
-const LastUpdatedWrapper = styled.div<{ rawOnPrint?: boolean }>`
+const LastUpdatedWrapper = styled.div<{ $rawOnPrint: boolean }>`
   color: var(--last-updated-text-color);
   font-size: var(--last-updated-font-size);
   font-family: var(--last-updated-font-family);
   line-height: var(--last-updated-line-height);
   padding-bottom: 30px;
 
-  ${({ rawOnPrint }) =>
-    rawOnPrint &&
+  ${({ $rawOnPrint }) =>
+    $rawOnPrint &&
     `@media print {
       time {
         display: none;

package/src/components/Link/Link.tsx

@@ -1,31 +1,13 @@
 import * as React from 'react';
 import { useContext } from 'react';
 import { Link as ReactLink } from 'react-router-dom';
-import isPropValid from '@emotion/is-prop-valid';
 
 import type { JSX } from 'react';
-import type { RelativeRoutingType } from 'react-router-dom';
+import type { LinkProps } from '@redocly/theme/core/types';
 
 import { ThemeDataContext } from '@redocly/theme/core/contexts/ThemeDataContext';
 
-export type LinkProps = {
-  to: string;
-  target?: '_self' | '_blank';
-  external?: boolean;
-  className?: string;
-  style?: React.CSSProperties;
-  innerRef?: React.Ref<HTMLAnchorElement>;
-  languageInsensitive?: boolean;
-  onClick?: () => void;
-  reloadDocument?: boolean;
-  replace?: boolean;
-  state?: unknown;
-  preventScrollReset?: boolean;
-  relative?: RelativeRoutingType;
-  viewTransition?: boolean;
-  [key: string]: unknown;
-  rel?: string;
-};
+export type { LinkProps };
 
 export function Link(props: React.PropsWithChildren<LinkProps>): JSX.Element {
   const context = useContext(ThemeDataContext);
@@ -33,36 +15,9 @@ export function Link(props: React.PropsWithChildren<LinkProps>): JSX.Element {
   if (context?.components) {
     const { LinkComponent } = context.components;
     return <LinkComponent {...props} />;
-  } else {
-    const {
-      innerRef,
-      to,
-      external: _external,
-      languageInsensitive: _languageInsensitive,
-      reloadDocument,
-      replace,
-      state,
-      preventScrollReset,
-      relative,
-      viewTransition,
-      ...restProps
-    } = props;
-    const linkProps = Object.fromEntries(
-      Object.entries(restProps).filter(([key, value]) => value !== undefined && isPropValid(key)),
-    );
-
-    return (
-      <ReactLink
-        ref={innerRef}
-        to={to}
-        reloadDocument={reloadDocument}
-        replace={replace}
-        state={state}
-        preventScrollReset={preventScrollReset}
-        relative={relative}
-        viewTransition={viewTransition}
-        {...linkProps}
-      />
-    );
   }
+
+  const { external: _1, languageInsensitive: _2, innerRef, ...filteredProps } = props;
+
+  return <ReactLink ref={innerRef} {...filteredProps} />;
 }

package/src/components/Loaders/Loading.tsx

@@ -7,13 +7,13 @@ import { getCssColorVariable } from '@redocly/theme/core/utils';
 import { Spinner } from '@redocly/theme/icons/Spinner/Spinner';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 
-const LoadingMessage = styled.div<{ color: string }>`
+const LoadingMessage = styled.div<{ $color: string }>`
   font-family: helvetica, sans, sans-serif;
   width: 100%;
   text-align: center;
   font-size: 25px;
   margin: 30px 0 20px 0;
-  color: ${({ color }) => getCssColorVariable(color)};
+  color: ${({ $color }) => getCssColorVariable($color)};
 `;
 
 export type LoadingProps = {
@@ -26,7 +26,7 @@ export function Loading({ color }: LoadingProps): JSX.Element {
 
   return (
     <div style={{ textAlign: 'center' }}>
-      <LoadingMessage color={color}>{translate('loaders.loading', 'Loading...')}</LoadingMessage>
+      <LoadingMessage $color={color}>{translate('loaders.loading', 'Loading...')}</LoadingMessage>
       <Spinner color={color} />
     </div>
   );

package/src/components/Loaders/SpinnerLoader.tsx

@@ -9,13 +9,13 @@ export type LoadingProps = {
 };
 
 export function SpinnerLoader({ color, size }: LoadingProps): JSX.Element {
-  return <Spinner color={color} size={size} />;
+  return <Spinner $color={color} $size={size} />;
 }
 
-const Spinner = styled.div<{ color: string; size: string }>`
-  width: ${({ size }) => size};
-  height: ${({ size }) => size};
-  border: 3px solid ${({ color }) => color};
+const Spinner = styled.div<{ $color: string; $size: string }>`
+  width: ${({ $size }) => $size};
+  height: ${({ $size }) => $size};
+  border: 3px solid ${({ $color }) => $color};
   border-bottom-color: transparent;
   border-radius: 50%;
   display: inline-block;

package/src/components/Markdown/Markdown.tsx

@@ -23,15 +23,15 @@ export type MarkdownProps = PropsWithChildren<{
   compact?: boolean;
   inline?: boolean;
   base?: boolean;
-  ref?: (node: HTMLDivElement) => void;
 }>;
 
-export const Markdown = styled.main.attrs<{
-  className?: string;
-}>(({ className }) => ({
-  'data-component-name': 'Markdown/Markdown',
-  className,
-}))<MarkdownProps>`
+export const Markdown = styled.main
+  .withConfig({
+    shouldForwardProp: (prop) => !['compact', 'inline', 'base'].includes(prop),
+  })
+  .attrs<{ 'data-component-name': string }>({
+    'data-component-name': 'Markdown/Markdown',
+  })<MarkdownProps>`
   font-size: var(--md-content-font-size);
   font-family: var(--md-content-font-family);
   font-weight: var(--md-content-font-weight);

package/src/components/Marker/Marker.tsx

@@ -36,18 +36,18 @@ export const Marker = forwardRef<HTMLDivElement, MarkerProps>(
       <StyledMarker
         data-component-name="Marker/Marker"
         ref={internalRef}
-        marker={marker}
+        $marker={marker}
         {...(dataAttribures ?? {})}
       />
     );
   },
 );
 
-const StyledMarker = styled.div<{ marker: MarkerArea }>`
+const StyledMarker = styled.div<{ $marker: MarkerArea }>`
   position: absolute;
   z-index: -1;
-  top: ${({ marker }) => marker.offset}px;
-  height: ${({ marker }) => marker.height}px;
+  top: ${({ $marker }) => $marker.offset}px;
+  height: ${({ $marker }) => $marker.height}px;
   width: 100%;
   left: 0;
 `;