@redocly/theme 0.55.0-next.7 → 0.55.0-next.9

package/lib/layouts/PageLayout.js

@@ -7,10 +7,11 @@ exports.PageLayout = PageLayout;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../core/utils");
+const constants_1 = require("../core/constants");
 function PageLayout({ sidebar, children, }) {
     return (react_1.default.createElement(Container, { "data-component-name": "Layout/PageLayout" },
         sidebar,
-        react_1.default.createElement(ContentContainer, null, children)));
+        react_1.default.createElement(ContentContainer, { id: constants_1.CONTENT_ID, tabIndex: 0 }, children)));
 }
 const Container = styled_components_1.default.div `
   display: flex;

package/lib/layouts/RootLayout.js

@@ -7,8 +7,10 @@ exports.RootLayout = RootLayout;
 const react_1 = __importDefault(require("react"));
 const Navbar_1 = require("../components/Navbar/Navbar");
 const Footer_1 = require("../components/Footer/Footer");
+const SkipContent_1 = require("../components/SkipContent/SkipContent");
 function RootLayout({ children }) {
     return (react_1.default.createElement("div", { "data-component-name": "layouts/RootLayout" },
+        react_1.default.createElement(SkipContent_1.SkipContent, null),
         react_1.default.createElement(Navbar_1.Navbar, null),
         children,
         react_1.default.createElement(Footer_1.Footer, null)));

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

@@ -9,6 +9,7 @@ export type TabProps = {
     setRef: (element: HTMLButtonElement | null) => void;
     onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
     onClick: () => void;
+    icon?: React.ReactNode;
 };
-export declare function TabComponent({ tabId, label, size, disabled, setRef, onKeyDown, onClick, }: TabProps): JSX.Element;
+export declare function TabComponent({ tabId, label, size, disabled, setRef, onKeyDown, onClick, icon, }: TabProps): JSX.Element;
 export declare const Tab: import("styled-components").StyledComponent<typeof TabComponent, any, {}, never>;

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

@@ -8,9 +8,17 @@ exports.TabComponent = TabComponent;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const TabList_1 = require("../../../markdoc/components/Tabs/TabList");
-function TabComponent({ tabId, label, size, disabled, setRef, onKeyDown, onClick, }) {
+function TabComponent({ tabId, label, size, disabled, setRef, onKeyDown, onClick, icon, }) {
     return (react_1.default.createElement(TabList_1.TabItem, { "data-component-name": "Markdoc/Tabs/Tab", size: size, tabIndex: 0 },
-        react_1.default.createElement(TabList_1.TabButtonLink, { id: `tab-${tabId}`, role: "tab", "aria-selected": "false", "aria-controls": `panel-${tabId}`, tabIndex: -1, size: size, disabled: disabled, ref: setRef, onKeyDown: onKeyDown, onClick: onClick }, label)));
+        react_1.default.createElement(TabList_1.TabButtonLink, { id: `tab-${tabId}`, role: "tab", "aria-selected": "false", "aria-controls": `panel-${tabId}`, tabIndex: -1, size: size, disabled: disabled, ref: setRef, onKeyDown: onKeyDown, onClick: onClick },
+            react_1.default.createElement(LabelWrapper, null,
+                icon,
+                label))));
 }
+const LabelWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
 exports.Tab = (0, styled_components_1.default)(TabComponent) ``;
 //# sourceMappingURL=Tab.js.map

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

@@ -42,9 +42,9 @@ function TabList({ childrenArray, size, overflowTabs, visibleTabs, setTabRef, on
         childrenArray.map((child, index) => {
             if (!visibleTabs.includes(index))
                 return null;
-            const { label } = child.props;
+            const { label, icon } = child.props;
             const tabId = getTabId(label, index);
-            return (react_1.default.createElement(Tab_1.Tab, { key: `key-${tabId}`, tabId: tabId, label: label, size: size, disabled: child.props.disable, setRef: (el) => {
+            return (react_1.default.createElement(Tab_1.Tab, { key: `key-${tabId}`, tabId: tabId, label: label, icon: icon, size: size, disabled: child.props.disable, setRef: (el) => {
                     setTabRef(el, index);
                     if (el) {
                         el.setAttribute('data-label', label);

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

@@ -9,12 +9,14 @@ export type TabItemProps = {
     disable?: boolean;
     onClick?: () => void;
     children: React.ReactNode;
+    icon?: React.ReactNode;
 };
 type TabsProps = {
     children: React.ReactElement<TabItemProps>[];
     className?: string;
     size: TabsSize;
+    forceReady?: boolean;
 };
-export declare function Tabs({ children, className, size }: TabsProps): JSX.Element;
+export declare function Tabs({ children, className, size, forceReady }: TabsProps): JSX.Element;
 export declare const TabContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

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

@@ -34,7 +34,7 @@ var TabsSize;
     TabsSize["SMALL"] = "small";
     TabsSize["MEDIUM"] = "medium";
 })(TabsSize || (exports.TabsSize = TabsSize = {}));
-function Tabs({ children, className, size }) {
+function Tabs({ children, className, size, forceReady = false }) {
     var _a, _b;
     const [childrenArray, setChildrenArray] = (0, react_1.useState)(react_1.default.Children.toArray(children));
     (0, react_1.useEffect)(() => {
@@ -111,7 +111,7 @@ function Tabs({ children, className, size }) {
             setIsAnimating(false);
         }
     }, [activeTab, prevTab, childrenArray, visibleTabs, overflowTabs]);
-    return (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdoc/Tabs/Tabs", className: className, isReady: ready },
+    return (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdoc/Tabs/Tabs", className: className, isReady: ready || forceReady },
         react_1.default.createElement(TabList_1.TabList, { size: size, childrenArray: childrenArray, overflowTabs: overflowTabs, setTabRef: setTabRef, onTabClick: onTabClick, handleKeyboard: handleKeyboard, getTabId: getTabId, activeTab: activeTab, isAnimating: isAnimating, highlightStyle: highlightStyle, visibleTabs: visibleTabs, allTabsHidden: allTabsHidden, tabsContainerRef: tabsContainerRef }),
         childrenArray.map((child, index) => {
             const { label } = child.props;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.55.0-next.7",
+  "version": "0.55.0-next.9",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -76,6 +76,7 @@
     "webpack": "5.94.0"
   },
   "dependencies": {
+    "@tanstack/react-query": "5.62.3",
     "@tanstack/react-virtual": "3.13.0",
     "copy-to-clipboard": "3.3.3",
     "file-saver": "2.0.5",

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,15 +1,20 @@
 import React from 'react';
 import styled from 'styled-components';
+import { BreadcrumbItem } from '@redocly/config';
 
 import type { JSX } from 'react';
 
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Breadcrumb } from '@redocly/theme/components/Breadcrumbs/Breadcrumb';
 
-export function Breadcrumbs(props: { className?: string }): JSX.Element | null {
+export function Breadcrumbs(props: {
+  className?: string;
+  additionalBreadcrumbs?: BreadcrumbItem[];
+}): JSX.Element | null {
   const { useBreadcrumbs, useTelemetry } = useThemeHooks();
+  const fileBreadcrumbs = useBreadcrumbs();
+  const breadcrumbs = [...fileBreadcrumbs, ...(props.additionalBreadcrumbs || [])];
   const telemetry = useTelemetry();
-  const breadcrumbs = useBreadcrumbs();
 
   if (breadcrumbs.length === 0) {
     return null;

package/src/components/Catalog/Catalog.tsx

@@ -0,0 +1,235 @@
+import React, { JSX } from 'react';
+import styled from 'styled-components';
+import { CatalogEntityConfig } from '@redocly/config';
+
+import { BffCatalogEntityList } from '@redocly/theme/core/types';
+import { breakpoints } from '@redocly/theme/core/utils';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { H3 } from '@redocly/theme/components/Typography/H3';
+import { FilterContent } from '@redocly/theme/components/Filter/FilterContent';
+import { Sidebar, SidebarHeader } from '@redocly/theme/components/Sidebar/Sidebar';
+import { CatalogSwitcherItem } from '@redocly/theme/core';
+import { CatalogSelector } from '@redocly/theme/components/Catalog/CatalogSelector';
+import { SidebarActions } from '@redocly/theme/components/SidebarActions/SidebarActions';
+import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
+import { FilterInput } from '@redocly/theme/components/Filter/FilterInput';
+import { CatalogViewModeToggle } from '@redocly/theme/components/Catalog/CatalogViewModeToggle';
+import { CatalogSortButton } from '@redocly/theme/components/Catalog/CatalogSortButton';
+import { CatalogEntities } from '@redocly/theme/components/Catalog/CatalogEntities';
+
+export type CatalogProps = {
+  catalogConfig: CatalogEntityConfig;
+  entitiesTypes: string[];
+  initialEntitiesList?: BffCatalogEntityList;
+  catalogSwitcherItems: CatalogSwitcherItem[];
+};
+
+export function Catalog(props: CatalogProps): JSX.Element {
+  const { catalogConfig, entitiesTypes, initialEntitiesList, catalogSwitcherItems } = props;
+
+  const { useTranslate, useCatalog } = useThemeHooks();
+
+  const { translate } = useTranslate();
+
+  const {
+    filters,
+    searchQuery,
+    setSearchQuery,
+    filterQuery,
+    sortOption,
+    setSortOption,
+    handleSortClick,
+    isColumnSorted,
+    viewMode,
+    setViewMode,
+    entitiesCounter,
+    setEntitiesCounter,
+    onChangeViewClick,
+    onChangeCollapseSidebarClick,
+    layout,
+    collapsedSidebar,
+  } = useCatalog(catalogConfig, initialEntitiesList?.page.total || 0);
+
+  return (
+    <>
+      <CatalogPageWrapper data-component-name="Catalog/Catalog">
+        <FiltersSidebar
+          collapsed={collapsedSidebar}
+          header={
+            collapsedSidebar ? null : (
+              <CatalogSelector
+                catalogSwitcherItems={catalogSwitcherItems}
+                setSearchQuery={setSearchQuery}
+                setSortOption={setSortOption}
+              />
+            )
+          }
+          menu={
+            <FilterContent
+              setFilterTerm={setSearchQuery}
+              filters={filters}
+              filterTerm={searchQuery}
+              hideSearch={true}
+              showCounter={false}
+              filterValuesCasing="sentence"
+            />
+          }
+          footer={
+            <SidebarActions
+              layout={layout}
+              collapsedSidebar={collapsedSidebar}
+              isApiDocs={false}
+              onChangeViewClick={onChangeViewClick}
+              onChangeCollapseSidebarClick={onChangeCollapseSidebarClick}
+            />
+          }
+        />
+        <CatalogPageContent>
+          <CatalogPageDescription>
+            <CatalogTitleWrapper>
+              <CatalogTitle data-translation-key={catalogConfig?.titleTranslationKey}>
+                {translate(catalogConfig?.titleTranslationKey)}{' '}
+              </CatalogTitle>
+              <CounterTag borderless>{entitiesCounter}</CounterTag>
+            </CatalogTitleWrapper>
+            <CatalogDescription data-translation-key={catalogConfig?.descriptionTranslationKey}>
+              {translate(catalogConfig?.descriptionTranslationKey)}
+            </CatalogDescription>
+          </CatalogPageDescription>
+
+          <CatalogActionsRow>
+            <CatalogSearchInputWrapper>
+              <FilterInput
+                value={searchQuery}
+                onChange={(updatedTerm) => setSearchQuery(updatedTerm)}
+              />
+            </CatalogSearchInputWrapper>
+
+            <CatalogControlsWrapper>
+              <CatalogSortButton onSortChange={setSortOption} currentSort={sortOption} />
+              <CatalogViewModeToggle viewMode={viewMode} onViewModeChange={setViewMode} />
+            </CatalogControlsWrapper>
+          </CatalogActionsRow>
+
+          <CatalogEntities
+            catalogConfig={catalogConfig}
+            excludedEntities={catalogConfig?.excludes}
+            filterQuery={filterQuery}
+            entitiesTypes={entitiesTypes}
+            sortOption={sortOption}
+            searchQuery={searchQuery}
+            viewMode={viewMode}
+            setEntitiesCounter={setEntitiesCounter}
+            initialEntitiesList={initialEntitiesList}
+            setSortOption={setSortOption}
+            handleSortClick={handleSortClick}
+            isColumnSorted={isColumnSorted}
+          />
+        </CatalogPageContent>
+      </CatalogPageWrapper>
+    </>
+  );
+}
+
+const CatalogActionsRow = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const CatalogControlsWrapper = styled.div`
+  display: var(--catalog-controls-wrapper-display);
+  align-items: var(--catalog-controls-wrapper-align-items);
+  margin-left: var(--catalog-controls-wrapper-margin-left);
+  gap: var(--catalog-controls-wrapper-gap);
+`;
+
+const CatalogPageContent = styled.main`
+  flex: 1;
+  width: var(--catalog-page-content-width-mobile);
+  margin: var(--catalog-page-content-margin-mobile);
+
+  @media screen and (min-width: ${breakpoints.medium}) {
+    width: var(--catalog-page-content-width-desktop);
+    padding: var(--catalog-page-padding);
+  }
+`;
+
+const CatalogTitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  color: var(--catalog-title-text-color);
+  font-weight: var(--catalog-title-font-weight) !important;
+  font-size: var(--catalog-title-font-size);
+`;
+
+const CatalogTitle = styled(H3)`
+  color: var(--catalog-title-text-color);
+  font-weight: var(--catalog-title-font-weight) !important;
+  font-size: var(--catalog-title-font-size);
+  margin: var(--catalog-title-margin);
+  margin-right: var(--catalog-title-spacing-right);
+`;
+
+const CatalogDescription = styled.p`
+  color: var(--catalog-description-text-color);
+  font-weight: var(--catalog-description-font-weight);
+  font-size: var(--catalog-description-font-size);
+  margin: var(--catalog-description-margin);
+  line-height: var(--catalog-description-line-height);
+`;
+
+const CatalogPageWrapper = styled.div`
+  --sidebar-width: var(--catalog-sidebar-width);
+
+  display: flex;
+  flex-direction: column;
+
+  font-weight: var(--catalog-page-wrapper-font-weight);
+  color: var(--catalog-page-wrapper-text-color);
+  font-size: var(--catalog-page-wrapper-font-size);
+  font-family: var(--catalog-page-wrapper-font-family);
+  line-height: var(--catalog-page-wrapper-line-height);
+
+  hr {
+    border: 0;
+    width: var(--catalog-hr-width);
+    margin: var(--catalog-hr-margin);
+    border-top: var(--catalog-hr-border-width) solid var(--catalog-hr-border-color);
+  }
+  a:not([role='button']) {
+    text-decoration: var(--catalog-link-text-decoration);
+    color: var(--catalog-link-color);
+    font-weight: var(--catalog-link-font-weight);
+  }
+
+  @media screen and (min-width: ${breakpoints.medium}) {
+    flex-direction: row;
+    padding: 0;
+  }
+`;
+
+const CatalogPageDescription = styled.div`
+  margin: var(--catalog-heading-margin);
+  display: var(--catalog-page-description-display-mobile);
+
+  @media screen and (min-width: ${breakpoints.medium}) {
+    display: var(--catalog-page-description-display-desktop);
+  }
+`;
+
+const FiltersSidebar = styled(Sidebar)`
+  display: var(--catalog-sidebar-display-mobile);
+
+  @media screen and (min-width: ${breakpoints.medium}) {
+    display: var(--catalog-sidebar-display-desktop);
+  }
+  --menu-container-padding-top: var(--catalog-sidebar-menu-container-padding-top);
+
+  ${SidebarHeader} {
+    border: none;
+  }
+`;
+
+const CatalogSearchInputWrapper = styled.div`
+  width: var(--catalog-search-input-wrapper-width);
+`;

package/src/components/Catalog/CatalogActionsRow.tsx

@@ -0,0 +1,58 @@
+import React, { JSX } from 'react';
+import styled from 'styled-components';
+
+import { SortOption, CatalogViewMode } from '@redocly/theme/core/types';
+import { FilterInput } from '@redocly/theme/components/Filter/FilterInput';
+import { CatalogSortButton } from '@redocly/theme/components/Catalog/CatalogSortButton';
+import { CatalogViewModeToggle } from '@redocly/theme/components/Catalog/CatalogViewModeToggle';
+
+export type CatalogActionsRowProps = {
+  searchQuery: string;
+  setSearchQuery: (updatedTerm: string) => void;
+  sortOption: SortOption | null;
+  setSortOption: (option: SortOption | null) => void;
+  viewMode?: CatalogViewMode;
+  onViewModeChange?: (mode: CatalogViewMode) => void;
+  style?: React.CSSProperties;
+};
+
+export function CatalogActionsRow({
+  searchQuery,
+  setSearchQuery,
+  sortOption,
+  setSortOption,
+  viewMode,
+  onViewModeChange,
+  style,
+}: CatalogActionsRowProps): JSX.Element {
+  return (
+    <CatalogActionsRowWrapper style={style}>
+      <CatalogSearchInputWrapper>
+        <FilterInput value={searchQuery} onChange={(updatedTerm) => setSearchQuery(updatedTerm)} />
+      </CatalogSearchInputWrapper>
+
+      <CatalogControlsWrapper>
+        <CatalogSortButton onSortChange={setSortOption} currentSort={sortOption} />
+        {viewMode && onViewModeChange && (
+          <CatalogViewModeToggle viewMode={viewMode} onViewModeChange={onViewModeChange} />
+        )}
+      </CatalogControlsWrapper>
+    </CatalogActionsRowWrapper>
+  );
+}
+
+export const CatalogActionsRowWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export const CatalogControlsWrapper = styled.div`
+  display: var(--catalog-controls-wrapper-display);
+  align-items: var(--catalog-controls-wrapper-align-items);
+  margin-left: var(--catalog-controls-wrapper-margin-left);
+  gap: var(--catalog-controls-wrapper-gap);
+`;
+
+export const CatalogSearchInputWrapper = styled.div`
+  width: var(--catalog-search-input-wrapper-width);
+`;

package/src/components/Catalog/CatalogCardView/CatalogCard.tsx

@@ -0,0 +1,227 @@
+import React, { JSX } from 'react';
+import styled from 'styled-components';
+import { CatalogEntityConfig } from '@redocly/config';
+
+import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
+import { GraphIcon } from '@redocly/theme/icons/GraphIcon/GraphIcon';
+import { ArrowRightIcon } from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIcon';
+import { ArrowUpRightIcon } from '@redocly/theme/icons/ArrowUpRightIcon/ArrowUpRightIcon';
+import { CatalogTagsWithTooltip } from '@redocly/theme/components/Catalog/CatalogTagsWithTooltip';
+import { CatalogEntityIcon } from '@redocly/theme/components/Catalog/CatalogEntityIcon';
+import { getPathPrefix } from '@redocly/theme/core';
+
+export type CatalogCardProps = {
+  entity: BffCatalogEntity;
+  catalogConfig: CatalogEntityConfig;
+};
+
+export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.Element {
+  const { useTelemetry } = useThemeHooks();
+  const telemetry = useTelemetry();
+  const pathPrefix = getPathPrefix();
+
+  return (
+    <CatalogCardWrapper
+      data-component-name="Catalog/CatalogCardView/CatalogCard"
+      onClick={() => {
+        window.location.assign(
+          `${pathPrefix}/catalogs/${catalogConfig.slug}/entities/${entity.key}`,
+        );
+        telemetry.send({ type: 'catalog_item.clicked' });
+      }}
+    >
+      <CardContent>
+        <CardHeader>
+          <HeaderIconWrapper>
+            <CatalogEntityIcon entityType={entity.type} />
+          </HeaderIconWrapper>
+          <CardTitle>
+            <CatalogHighlight>{entity.title}</CatalogHighlight>
+          </CardTitle>
+        </CardHeader>
+
+        <CardDescription>
+          <CatalogHighlight>{entity.summary ?? ''}</CatalogHighlight>
+        </CardDescription>
+
+        <CardMetadataSection>
+          <MetadataColumn>
+            <MetadataLabel>Domains:</MetadataLabel>
+            <CatalogTagsWithTooltip
+              items={entity.domains?.map((domain) => domain.title) || []}
+              tagProps={{
+                style: {
+                  fontSize: 'var(--catalog-card-font-size)',
+                  backgroundColor: 'var(--catalog-card-icon-bg-color)',
+                },
+                icon: <GraphIcon color="var(--color-green-8)" />,
+              }}
+            />
+          </MetadataColumn>
+
+          <MetadataColumn>
+            <MetadataLabel>Owners:</MetadataLabel>
+            <CatalogTagsWithTooltip
+              items={entity.owners?.map((owner) => owner.key) || []}
+              tagProps={{
+                style: {
+                  fontSize: 'var(--catalog-card-font-size)',
+                  backgroundColor: 'var(--catalog-card-icon-bg-color)',
+                  borderRadius: 'var(--border-radius-xl)',
+                },
+              }}
+            />
+          </MetadataColumn>
+        </CardMetadataSection>
+      </CardContent>
+
+      <Divider />
+
+      <CardFooter>
+        <CatalogTagsWithTooltip
+          items={entity.tags || []}
+          tagProps={{
+            style: {
+              fontSize: 'var(--catalog-card-font-size)',
+              borderRadius: 'var(--border-radius)',
+            },
+            borderless: true,
+            color: 'grey',
+          }}
+          itemsToShow={3}
+        />
+
+        <ArrowCircle>
+          <ArrowRightIcon size="16px" />
+          <ArrowUpRightIcon size="16px" />
+        </ArrowCircle>
+      </CardFooter>
+    </CatalogCardWrapper>
+  );
+}
+
+const HeaderIconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--catalog-card-icon-width);
+  height: var(--catalog-card-icon-height);
+  border-radius: var(--catalog-card-icon-border-radius);
+  background-color: var(--catalog-card-icon-bg-color);
+  flex-shrink: 0;
+  border: var(--catalog-card-icon-border-width) solid var(--catalog-card-icon-border-color);
+  margin-right: var(--catalog-card-icon-margin-right);
+`;
+
+const CardHeader = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const MetadataLabel = styled.div`
+  font-size: var(--catalog-metadata-label-font-size);
+  font-weight: var(--catalog-metadata-label-font-weight);
+  color: var(--catalog-metadata-label-color);
+  margin-bottom: var(--catalog-metadata-label-margin-bottom);
+`;
+
+const CardMetadataSection = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin-top: var(--catalog-metadata-section-margin-top);
+  gap: var(--catalog-metadata-section-gap);
+  width: 100%;
+`;
+
+const MetadataColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  width: calc(50% - var(--catalog-metadata-column-half-gap)); /* 50% minus half the gap */
+`;
+
+const ArrowCircle = styled.div`
+  width: var(--catalog-arrow-circle-size);
+  height: var(--catalog-arrow-circle-size);
+  border-radius: var(--catalog-arrow-circle-radius);
+  background-color: var(--catalog-arrow-circle-bg-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+
+  ${ArrowRightIcon}, ${ArrowUpRightIcon} {
+    position: absolute;
+    transition: opacity 0.2s ease-in-out;
+  }
+`;
+
+const CardContent = styled.div`
+  padding: var(--catalog-card-padding-vertical) var(--catalog-card-padding-horizontal);
+`;
+
+const CardFooter = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--catalog-card-padding-vertical) var(--catalog-card-padding-horizontal);
+`;
+
+const Divider = styled.div`
+  width: 100%;
+  height: 1px;
+  background-color: var(--catalog-card-divider-color);
+`;
+
+const CatalogCardWrapper = styled.div`
+  min-height: var(--catalog-card-min-height);
+  height: 100%;
+  color: var(--catalog-card-text-color);
+  font-size: var(--catalog-card-font-size);
+  font-weight: var(--catalog-card-font-weight);
+  background-color: var(--catalog-card-bg-color);
+  border: var(--catalog-card-border-width) var(--catalog-card-border-style)
+    var(--catalog-card-border-color);
+  transition: all 0.2s ease-in-out;
+  border-radius: var(--catalog-card-border-radius);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  ${ArrowRightIcon} {
+    opacity: 1;
+  }
+  ${ArrowUpRightIcon} {
+    opacity: 0;
+  }
+  &:hover {
+    ${ArrowRightIcon} {
+      opacity: 0;
+    }
+    ${ArrowUpRightIcon} {
+      opacity: 1;
+    }
+    border-color: var(--catalog-card-border-color-hover);
+  }
+`;
+
+const CardTitle = styled.div`
+  color: var(--catalog-card-title-color);
+  font-size: var(--catalog-card-title-font-size);
+  font-weight: var(--catalog-card-title-font-weight);
+  line-height: var(--catalog-card-title-line-height);
+  margin: 0;
+`;
+
+const CardDescription = styled.div`
+  margin-top: var(--catalog-card-description-margin-top);
+  color: var(--catalog-card-description-color);
+  font-size: var(--catalog-card-description-font-size);
+  font-weight: var(--catalog-card-description-font-weight);
+  line-height: var(--catalog-card-description-line-height);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+`;