@redocly/theme 0.15.1 → 0.17.0

package/src/components/Panel/PanelHeader.ts

@@ -8,8 +8,9 @@ export interface PanelHeaderProps {
   toggle?: (e: BaseSyntheticEvent) => void;
 }
 
-export const PanelHeader = styled.div.attrs(() => ({
+export const PanelHeader = styled.div.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Panel/PanelHeader',
+  className,
 }))<PanelHeaderProps>`
   position: relative;
   z-index: 1;

package/src/components/Panel/PanelHeaderTitle.ts

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
-export const PanelHeaderTitle = styled.span.attrs(() => ({
+export const PanelHeaderTitle = styled.span.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Panel/PanelHeaderTitle',
+  className,
 }))`
   margin-right: 5px;
   font-weight: var(--panel-heading-font-weight-local);

package/src/components/Profile/Profile.tsx

@@ -44,7 +44,7 @@ function ProfileComponent({ name = 'User', imageUrl, onClick, color }: ProfilePr
 
 export const Profile = memo<ProfileProps>(ProfileComponent);
 
-const ProfileWrapper = styled.div.attrs(() => ({
+export const ProfileWrapper = styled.div.attrs(() => ({
   'data-component-name': 'Profile/Profile',
 }))`
   display: flex;
@@ -69,7 +69,7 @@ const StyledUserName = styled.span`
   }
 `;
 
-const AvatarWrapper = styled.div<{ background?: string }>`
+export const AvatarWrapper = styled.div<{ background?: string }>`
   width: var(--profile-avatar-width);
   height: var(--profile-avatar-height);
   display: flex;

package/src/components/Profile/types.ts

@@ -8,4 +8,5 @@ export interface UserProfileProps {
   handleLogout: (logoutRedirect?: string) => void;
   hasDeveloperOnboarding?: boolean;
   loginUrl?: string;
+  className?: string;
 }

package/src/components/SamplesPanelControls/SamplesPanelControls.ts

@@ -2,9 +2,12 @@ import styled from 'styled-components';
 
 import { CodeBlock } from '@theme/components/CodeBlock';
 
-export const SamplesControlButton = styled.button.attrs(() => ({
-  'data-component-name': 'SamplesPanelControls/SamplesPanelControls',
-}))`
+export const SamplesControlButton = styled.button.attrs<{ className?: string }>(
+  ({ className }) => ({
+    'data-component-name': 'SamplesPanelControls/SamplesPanelControls',
+    className: className,
+  }),
+)`
   background-color: var(--panel-samples-controls-background-color);
   border: 0;
   outline: 0;

package/src/components/Search/CancelSearch.tsx

@@ -3,14 +3,20 @@ import styled from 'styled-components';
 
 import { useTranslate } from '@theme/mocks/hooks';
 
-export function CancelSearch({ onClick }: { onClick: () => void }): JSX.Element {
+export function CancelSearch({
+  onClick,
+  className,
+}: {
+  onClick: () => void;
+  className?: string;
+}): JSX.Element {
   const { translate } = useTranslate();
   const translationKeys = {
     cancel: 'theme.search.cancel',
   };
 
   return (
-    <Wrapper data-component-name="Search/CancelSearch" onClick={onClick}>
+    <Wrapper data-component-name="Search/CancelSearch" onClick={onClick} className={className}>
       <Button data-translation-keys={translationKeys.cancel}>
         {translate(translationKeys.cancel, 'Cancel')}
       </Button>

package/src/components/Search/ClearIcon.tsx

@@ -17,8 +17,9 @@ const Icon = (props: SVGProps<SVGSVGElement>) => (
   </svg>
 );
 
-export const ClearIcon = styled(Icon).attrs(() => ({
+export const ClearIcon = styled(Icon).attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Search/ClearIcon',
+  className,
 }))`
   cursor: pointer;
   width: 0.5em;

package/src/components/Search/ClockBackwardsIcon.tsx

@@ -10,7 +10,7 @@ const Icon = (props: SVGProps<SVGSVGElement>) => (
   </svg>
 );
 
-export const ClockBackwardsIcon = styled(Icon).attrs(({ className }: { className?: string }) => ({
+export const ClockBackwardsIcon = styled(Icon).attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Search/RecentlyViewedIcon',
   className,
 }))`

package/src/components/Search/Input.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
-export const FormInput = styled.input.attrs(() => ({
+export const FormInput = styled.input.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Search/Input',
+  className,
 }))`
   padding: 1em 2.5em 1em 2.5em;
   background-color: var(--search-input-background-color);

package/src/components/Search/InputWrapper.tsx

@@ -14,6 +14,7 @@ interface InputWrapperProps {
   change(value: string): void;
   inputRef?: React.RefObject<HTMLInputElement>;
   isLoading: boolean;
+  className?: string;
 }
 
 export function InputWrapper({
@@ -21,6 +22,7 @@ export function InputWrapper({
   value,
   change,
   isLoading,
+  className,
 }: InputWrapperProps): JSX.Element {
   const [isFocused, setIsFocused] = useState(false);
 
@@ -45,7 +47,7 @@ export function InputWrapper({
   };
 
   return (
-    <Wrapper data-component-name="Search/InputContainer">
+    <Wrapper data-component-name="Search/InputContainer" className={className}>
       {isFocused && isLoading ? <SpinnerIcon /> : <SearchIcon />}
       <FormInput
         value={value}

package/src/components/Search/MobileSearchTrigger.tsx

@@ -3,23 +3,34 @@ import styled from 'styled-components';
 
 import { SearchIcon as ThemeSearchIcon } from '@theme/components/Search/SearchIcon';
 
-export function MobileSearchTrigger({ onClick }: { onClick: () => void }): JSX.Element {
+export function MobileSearchTrigger({
+  onClick,
+  className,
+}: {
+  onClick: () => void;
+  className?: string;
+}): JSX.Element {
   return (
-    <Wrapper data-component-name="Search/MobileSearchTrigger" onClick={onClick}>
+    <Wrapper
+      data-component-name="Search/MobileSearchTrigger"
+      onClick={onClick}
+      className={className}
+    >
       <SearchIcon />
     </Wrapper>
   );
 }
 
 const SearchIcon = styled(ThemeSearchIcon)`
-  width: 20px;
-  height: 20px;
-  fill: #8d8d8d;
+  width: var(--mobile-menu-search-icon-size);
+  height: var(--mobile-menu-search-icon-size);
+  fill: var(--navbar-text-color);
 `;
 
 const Wrapper = styled.div`
   display: block;
   user-select: none;
+  height: var(--mobile-menu-search-icon-size);
 
   ${({ theme }) => theme.mediaQueries.small} {
     display: none;

package/src/components/Search/Popover.tsx

@@ -1,12 +1,13 @@
 import styled from 'styled-components';
 
-export const Popover = styled.div.attrs(() => ({
+export const Popover = styled.div.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Search/Popover',
+  className,
 }))`
   position: absolute;
   top: calc(100% + 10px);
   right: 0;
-  z-index: 100;
+  z-index: var(--z-index-raised);
   min-width: 100%;
   max-width: 90vw;
   max-height: 400px;

package/src/components/Search/RecentSearches.tsx

@@ -6,7 +6,13 @@ import { ClearIcon as ThemeClearIcon } from '@theme/components/Search/ClearIcon'
 import { useRecentSearches } from '@portal/search';
 import { useTranslate } from '@portal/hooks';
 
-export function RecentSearches({ onSelect }: { onSelect: (value: string) => void }) {
+export function RecentSearches({
+  onSelect,
+  className,
+}: {
+  onSelect: (value: string) => void;
+  className?: string;
+}) {
   const { items, removeSearchHistoryItem } = useRecentSearches();
   const { translate } = useTranslate();
   const translationKeys = {
@@ -27,7 +33,7 @@ export function RecentSearches({ onSelect }: { onSelect: (value: string) => void
   };
 
   return (
-    <Wrapper data-component-name="Search/RecentSearches">
+    <Wrapper data-component-name="Search/RecentSearches" className={className}>
       <Title data-translation-key={translationKeys.title}>
         {translate(translationKeys.title, 'Recent searches')}
       </Title>
@@ -82,7 +88,7 @@ const ClearIcon = styled(ThemeClearIcon)`
   display: inline;
   width: 10px;
   height: 10px;
-  fill: var(--search-item-active-text-color))
+  fill: var(--search-item-active-text-color);
 `;
 
 const Item = styled.div`

package/src/components/Search/Search.tsx

@@ -8,7 +8,7 @@ import { MobileSearchTrigger } from '@theme/components/Search/MobileSearchTrigge
 import { SearchDialog } from '@theme/components/Search/SearchDialog';
 import { useThemeConfig } from '@theme/hooks';
 
-export function Search(): JSX.Element {
+export function Search({ className }: { className?: string }): JSX.Element {
   const [isOpen, setIsOpen] = useState(false);
   const themeSettings = useThemeConfig();
   const location = useLocation();
@@ -33,7 +33,7 @@ export function Search(): JSX.Element {
   useEffect(onClose, [location, onClose]);
 
   return (
-    <Wrapper data-component-name="Search/Search">
+    <Wrapper data-component-name="Search/Search" className={className}>
       <SearchTrigger onClick={() => setIsOpen(true)} />
       <MobileSearchTrigger onClick={() => setIsOpen(true)} />
 

package/src/components/Search/SearchDialog.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 import type { MouseEvent } from 'react';
 
+import { concatClassNames } from '@theme/utils';
 import { useFuseSearch } from '@portal/search';
 import { InputWrapper } from '@theme/components/Search/InputWrapper';
 import { SearchItem } from '@theme/components/Search/SearchItem';
@@ -14,7 +15,13 @@ import { SuggestedPages } from '@theme/components/Search/SuggestedPages';
 import { CancelSearch } from '@theme/components/Search/CancelSearch';
 import { useDialogHotKeys } from '@theme/hooks/useDialogHotKeys';
 
-export const SearchDialog = ({ onClose }: { onClose: () => void }): JSX.Element => {
+export const SearchDialog = ({
+  onClose,
+  className,
+}: {
+  onClose: () => void;
+  className?: string;
+}): JSX.Element => {
   const { query, setQuery, items, isLoading } = useFuseSearch();
   const modalRef = useRef<HTMLDivElement>(null);
   const { translate } = useTranslate();
@@ -45,7 +52,7 @@ export const SearchDialog = ({ onClose }: { onClose: () => void }): JSX.Element
       data-component-name="Search/SearchDialog"
       ref={modalRef}
       onClick={handleOverlayClick}
-      className="overlay"
+      className={concatClassNames('overlay', className)}
     >
       <Container>
         <TopContainer>
@@ -105,7 +112,7 @@ const Overlay = styled.div`
   width: 100vw;
   height: 100vh;
   background: var(--modal-overlay-background-color);
-  z-index: 10000;
+  z-index: var(--z-index-overlay);
   display: flex;
   align-items: center;
   justify-content: center;

package/src/components/Search/SearchIcon.tsx

@@ -17,8 +17,9 @@ const Icon = (props: SVGProps<SVGSVGElement>) => (
   </svg>
 );
 
-export const SearchIcon = styled(Icon).attrs(() => ({
+export const SearchIcon = styled(Icon).attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Search/SearchIcon',
+  className,
 }))`
   cursor: pointer;
   width: 1em;

package/src/components/Search/SearchItem.tsx

@@ -9,9 +9,10 @@ import type { SearchDocument } from '@theme/types/portal/src/shared/types/search
 
 interface SearchItemProps {
   item: ActiveItem<SearchDocument>;
+  className?: string;
 }
 
-export function SearchItem({ item }: SearchItemProps): JSX.Element {
+export function SearchItem({ item, className }: SearchItemProps): JSX.Element {
   const ref = useRef<HTMLAnchorElement>();
 
   useEffect(() => {
@@ -43,6 +44,7 @@ export function SearchItem({ item }: SearchItemProps): JSX.Element {
             }`;
             return (
               <SearchLink
+                className={className}
                 key={`${item.id}-${index}`}
                 to={item.url}
                 tabIndex={0}
@@ -63,6 +65,7 @@ export function SearchItem({ item }: SearchItemProps): JSX.Element {
         </>
       ) : (
         <SearchLink
+          className={className}
           to={item.url}
           tabIndex={0}
           innerRef={ref}

package/src/components/Search/SearchTrigger.tsx

@@ -6,7 +6,13 @@ import { useTranslate } from '@portal/hooks';
 import { SearchIcon } from '@theme/components/Search/SearchIcon';
 import { ShortcutKey } from '@theme/components/Search/ShortcutKey';
 
-export function SearchTrigger({ onClick }: { onClick: () => void }): JSX.Element {
+export function SearchTrigger({
+  onClick,
+  className,
+}: {
+  onClick: () => void;
+  className?: string;
+}): JSX.Element {
   const themeSettings = useThemeConfig();
   const { translate } = useTranslate();
   const translationKeys = {
@@ -15,7 +21,7 @@ export function SearchTrigger({ onClick }: { onClick: () => void }): JSX.Element
   const keyShortcuts = themeSettings?.search?.shortcuts ?? ['/'];
 
   return (
-    <Wrapper data-component-name="Search/SearchTrigger" onClick={onClick}>
+    <Wrapper data-component-name="Search/SearchTrigger" onClick={onClick} className={className}>
       <SearchIconSmall />
       <Label data-translation-key={translationKeys.label}>
         {translate(translationKeys.label, 'Search')}

package/src/components/Search/Shortcut.tsx

@@ -4,12 +4,14 @@ import styled from 'styled-components';
 export function Shortcut({
   combination,
   text,
+  className,
 }: {
   combination: string;
   text: string;
+  className?: string;
 }): JSX.Element {
   return (
-    <Wrapper data-component-name="Search/Shortcut">
+    <Wrapper data-component-name="Search/Shortcut" className={className}>
       <Key>{combination}</Key>
       {text}
     </Wrapper>

package/src/components/Search/ShortcutKey.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 interface ShortcutKeyProps {
   keyShortcuts?: string | string[];
+  className?: string;
 }
 
 export function ShortcutKey(props: ShortcutKeyProps): JSX.Element {
@@ -18,7 +19,7 @@ export function ShortcutKey(props: ShortcutKeyProps): JSX.Element {
 
   mainShortcutKey = mainShortcutKey?.toUpperCase();
 
-  return <Wrapper>{mainShortcutKey}</Wrapper>;
+  return <Wrapper className={props.className}>{mainShortcutKey}</Wrapper>;
 }
 
 export const Wrapper = styled.div`

package/src/components/Search/SidebarSearch.tsx

@@ -3,8 +3,9 @@ import styled from 'styled-components';
 import { Search } from '@theme/components/Search/Search';
 import { Popover } from '@theme/components/Search/Popover';
 
-export const SidebarSearch = styled(Search).attrs(() => ({
+export const SidebarSearch = styled(Search).attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Search/SidebarSearch',
+  className,
 }))`
   --search-input-text-color: var(--sidebar-item-active-color);
 

package/src/components/Search/SuggestedPages.tsx

@@ -6,7 +6,7 @@ import { useSuggestedPages } from '@portal/search';
 import { Link } from '@portal/Link';
 import { useTranslate } from '@portal/hooks';
 
-export function SuggestedPages() {
+export function SuggestedPages({ className }: { className?: string }) {
   const pages = useSuggestedPages();
   const { translate } = useTranslate();
   const translationKeys = {
@@ -16,7 +16,7 @@ export function SuggestedPages() {
   if (!pages.length) return null;
 
   return (
-    <Wrapper data-component-name="Search/SuggestedPages">
+    <Wrapper data-component-name="Search/SuggestedPages" className={className}>
       <Title data-translation-key={translationKeys.title}>
         {translate(translationKeys.title, 'Suggested pages')}
       </Title>

package/src/components/Separator/Separator.tsx

@@ -6,11 +6,11 @@ import { SeparatorItem } from '@theme/components/Separator/SeparatorItem';
 import type { MenuItemProps } from '@theme/components/Sidebar/types';
 import { useTranslate } from '@portal/hooks';
 
-export function Separator({ item }: MenuItemProps): JSX.Element {
+export function Separator({ item, className }: MenuItemProps): JSX.Element {
   const { translate } = useTranslate();
 
   return (
-    <Wrapper data-component-name="Sidebar/Separator">
+    <Wrapper data-component-name="Sidebar/Separator" className={className}>
       <SeparatorItem>{translate(item.labelTranslationKey, item.label)}</SeparatorItem>
       {item.separatorLine ? <SeparatorLine /> : null}
     </Wrapper>

package/src/components/Separator/SeparatorItem.tsx

@@ -2,16 +2,23 @@ import styled from 'styled-components';
 
 import { MenuItemLabel } from '@theme/components/Menu/MenuItemLabel';
 
-export const SeparatorItem = styled(MenuItemLabel).attrs(() => ({
-  'data-component-name': 'Sidebar/SeparatorItem',
-}))`
+export const SeparatorItem = styled(MenuItemLabel).attrs<{ className?: string }>(
+  ({ className }) => ({
+    'data-component-name': 'Sidebar/SeparatorItem',
+    className,
+  }),
+)`
   cursor: default;
   font-weight: var(--font-weight-bold);
   color: var(--sidebar-separator-item-color);
   font-family: var(--sidebar-item-separator-font-family);
   font-size: var(--sidebar-item-separator-font-size);
   text-transform: var(--sidebar-item-separator-text-transform);
-  background: var(--sidebar-item-separator-background-color);
+  background: var(--mobile-menu-background);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    background: var(--sidebar-item-separator-background-color);
+  }
 
   *:not(:first-child) > & {
     margin-top: var(--sidebar-item-separator-offset);

package/src/components/Separator/SeparatorLine.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
-export const SeparatorLine = styled.div.attrs(() => ({
+export const SeparatorLine = styled.div.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Sidebar/SeparatorLine',
+  className,
 }))`
   height: 1px;
   background-color: var(--sidebar-item-separator-line-color);

package/src/components/Sidebar/ApiCallItem.tsx

@@ -7,16 +7,16 @@ import { SeparatorLine } from '@theme/components/Separator/SeparatorLine';
 import { MenuItemLabel } from '@theme/components/Menu/MenuItemLabel';
 import type { MenuItemProps } from '@theme/components/Sidebar/types';
 
-export function ApiCallItem({ item }: MenuItemProps): JSX.Element {
+export function ApiCallItem({ item, className }: MenuItemProps): JSX.Element {
   return (
-    <Wrapper data-component-name="Sidebar/ApiCallItem">
+    <Wrapper data-component-name="Sidebar/ApiCallItem" className={className}>
       <MenuLinkItem item={item}>
-        <MenuItemLabel active={item.active}>
+        <Label active={item.active}>
           <Badge type={item.httpVerb || ''}>
             {item.httpVerb === 'hook' ? 'event' : item.httpVerb}
           </Badge>
           {item.label}
-        </MenuItemLabel>
+        </Label>
       </MenuLinkItem>
 
       {item.separatorLine ? <SeparatorLine /> : null}
@@ -24,6 +24,14 @@ export function ApiCallItem({ item }: MenuItemProps): JSX.Element {
   );
 }
 
+const Label = styled(MenuItemLabel)`
+  color: var(--mobile-menu-item-text-color);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    color: var(--sidebar-item-text-color);
+  }
+`;
+
 const Wrapper = styled.div``;
 
 export const Badge = styled(OperationBadge)`

package/src/components/Sidebar/BackButton.tsx

@@ -5,14 +5,16 @@ import { ArrowBack } from '@theme/ui/ArrowBack';
 
 interface BackButtonProps {
   back: () => void;
+  className?: string;
 }
 
 export function BackButton({
   children,
   back,
+  className,
 }: React.PropsWithChildren<BackButtonProps>): JSX.Element {
   return (
-    <Button onClick={back} data-component-name="Sidebar/BackButton">
+    <Button onClick={back} data-component-name="Sidebar/BackButton" className={className}>
       <ArrowBack dataComponentName="Sidebar/ArrowBack" />
       {children}
     </Button>

package/src/components/Sidebar/Drilldown.tsx

@@ -10,16 +10,18 @@ import type { DrilldownMenuProps } from '@theme/components/Sidebar/types';
 interface DrilldownProps extends DrilldownMenuProps {
   isExpanded: boolean;
   expand: () => void;
+  className?: string;
 }
 
 export function Drilldown({
   isExpanded,
   item,
   expand,
+  className,
   ...props
 }: React.PropsWithChildren<DrilldownProps>): JSX.Element {
   return (
-    <Wrapper data-component-name="Sidebar/Drilldown">
+    <Wrapper data-component-name="Sidebar/Drilldown" className={className}>
       <DrilldownLabel onClick={expand}>
         <DrilldownMenuItem item={item} />
       </DrilldownLabel>

package/src/components/Sidebar/DrilldownMenu.tsx

@@ -11,13 +11,14 @@ export function DrilldownMenu({
   back,
   prevActiveItem,
   children,
+  className,
 }: React.PropsWithChildren<DrilldownMenuProps>): JSX.Element {
   const { translate } = useTranslate();
   const translationKeys = {
     backLabel: 'theme.sidebar.menu.backLabel',
   };
   return (
-    <MenuContainer data-component-name="Sidebar/DrilldownMenu">
+    <MenuContainer data-component-name="Sidebar/DrilldownMenu" className={className}>
       <MenuContent>
         <MenuWrapper>
           <BackButton back={back} data-translation-key={translationKeys.backLabel}>
@@ -37,7 +38,7 @@ const MenuContainer = styled.div`
   top: 0;
   bottom: 0;
   width: 100%;
-  z-index: 100;
+  z-index: var(--z-index-raised);
   background-color: var(--sidebar-item-drilldown-background-color);
 `;
 

package/src/components/Sidebar/DrilldownMenuItem.tsx

@@ -4,11 +4,11 @@ import styled from 'styled-components';
 import type { MenuItemProps } from '@theme/components/Sidebar/types';
 import { useTranslate } from '@portal/hooks';
 
-export function DrilldownMenuItem({ item }: MenuItemProps): JSX.Element {
+export function DrilldownMenuItem({ item, className }: MenuItemProps): JSX.Element {
   const { translate } = useTranslate();
 
   return (
-    <Container data-component-name="Sidebar/DrilldownMenuItem">
+    <Container data-component-name="Sidebar/DrilldownMenuItem" className={className}>
       {item.icon ? <Icon src={item.icon} /> : null}
       <div>
         {translate(item.labelTranslationKey, item.label)}

package/src/components/Sidebar/HeaderWrapper.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
-export const HeaderWrapper = styled.div.attrs(() => ({
+export const HeaderWrapper = styled.div.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Sidebar/HeaderWrapper',
+  className,
 }))`
   margin: var(--sidebar-offset-top) 0 0 var(--sidebar-offset-left);
   padding-bottom: var(--sidebar-spacing-unit);

package/src/components/Sidebar/MobileSidebarButton.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
-export const MobileSidebarButton = styled.span.attrs(() => ({
+export const MobileSidebarButton = styled.span.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Sidebar/MobileSidebarButton',
+  className,
 }))<{ opened?: boolean }>`
   background-color: var(
     ${(props) => (props.opened ? '--fab-active-background' : '--fab-background-color')}
@@ -13,7 +14,7 @@ export const MobileSidebarButton = styled.span.attrs(() => ({
   cursor: pointer;
   position: fixed;
   right: 20px;
-  z-index: 3;
+  z-index: var(--z-index-surface);
   box-shadow: ${(props) =>
     props.opened ? 'var(--fab-active-box-shadow)' : 'var(--fab-box-shadow)'};
   border-radius: 50%;

package/src/components/Sidebar/Sidebar.tsx

@@ -5,8 +5,9 @@ interface SidebarProps {
   animate?: boolean;
 }
 
-export const Sidebar = styled.aside.attrs(() => ({
+export const Sidebar = styled.aside.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Sidebar/Sidebar',
+  className,
 }))<SidebarProps>`
   border-right: 1px solid var(--sidebar-border-color);
   position: fixed;