@redocly/theme 0.42.2 → 0.43.0

package/src/core/hooks/index.ts

@@ -24,6 +24,7 @@ export * from '@redocly/theme/core/hooks/use-tabs';
 export * from '@redocly/theme/core/hooks/use-focus-trap';
 export * from '@redocly/theme/core/hooks/use-language-picker';
 export * from '@redocly/theme/core/hooks/use-product-picker';
-export * from '@redocly/theme/core/hooks/use-search';
+export * from '@redocly/theme/core/hooks/search/use-search-dialog';
+export * from '@redocly/theme/core/hooks/search/use-search-filter';
 export * from '@redocly/theme/core/hooks/use-controlled-state';
 export * from '@redocly/theme/core/hooks/use-codeblock-tabs-controls';

package/src/core/hooks/search/use-recent-searches.ts

@@ -19,6 +19,9 @@ function updateRecentSearches(value: string, isAdd: boolean) {
   if (!isBrowser()) return [];
 
   const recentSearches = getRecentSearches();
+
+  if (value === '') return recentSearches;
+
   const valueIndex = recentSearches.indexOf(value);
 
   if (valueIndex !== -1) recentSearches.splice(valueIndex, 1);

package/src/core/hooks/{use-search.ts → search/use-search-dialog.ts}

@@ -4,7 +4,7 @@ import hotkeys from 'hotkeys-js';
 
 import { useThemeHooks, useThemeConfig } from '@redocly/theme/core/hooks';
 
-export function useSearch() {
+export function useSearchDialog() {
   const [isOpen, setIsOpen] = useState(false);
   const themeSettings = useThemeConfig();
   const location = useLocation();

package/src/core/hooks/search/use-search-filter.ts

@@ -0,0 +1,57 @@
+import { useCallback, useState } from 'react';
+
+import type { SearchFilterItem } from '@redocly/theme/core/types';
+
+export function useSearchFilter(
+  filter: SearchFilterItem[],
+  setFilter: React.Dispatch<React.SetStateAction<SearchFilterItem[]>>,
+) {
+  const [isFilterOpen, setIsFilterOpen] = useState(false);
+
+  const onFilterToggle = useCallback(() => {
+    setIsFilterOpen(!isFilterOpen);
+  }, [isFilterOpen]);
+
+  const onFilterChange = (field: string, value: string | string[] | undefined, isTop?: boolean) => {
+    const values = value ? (Array.isArray(value) ? value : [value]) : [];
+
+    const _filter = [...filter];
+    const fieldIndex = _filter.findIndex((filter) => filter.field === field);
+    if (fieldIndex > -1) {
+      // filter field already exists
+      _filter[fieldIndex].values = values;
+    } else {
+      if (!values.length) return;
+      _filter.push({ field, values, isTop });
+    }
+
+    setFilter(_filter.filter((item) => item.values.length));
+  };
+
+  const onFilterReset = () => {
+    setFilter([]);
+  };
+
+  const onTopFacetsReset = () => {
+    const _filter = [...filter];
+    setFilter(_filter.filter((item) => !item.isTop));
+  };
+
+  const onFacetReset = (field: string) => {
+    const _filter = [...filter];
+    const fieldIndex = _filter.findIndex((filter) => filter.field === field);
+    if (fieldIndex !== -1) {
+      _filter[fieldIndex].values = [];
+    }
+    setFilter(_filter.filter((item) => item.values.length));
+  };
+
+  return {
+    onFacetReset,
+    onTopFacetsReset,
+    onFilterChange,
+    onFilterReset,
+    onFilterToggle,
+    isFilterOpen,
+  };
+}

package/src/core/types/hooks.ts

@@ -6,11 +6,14 @@ import type {
   UserMenuData,
   FilteredCatalog,
   ItemState,
-  SearchDocument,
+  SearchItemData,
   SubmitFeedbackParams,
   TFunction,
   BreadcrumbItem,
   DrilldownMenuItemDetails,
+  SearchFacet,
+  SearchFilterItem,
+  SearchFacetQuery,
 } from '@redocly/theme/core/types';
 
 export type ThemeHooks = {
@@ -51,11 +54,29 @@ export type ThemeHooks = {
     location: Location;
   };
   useBreadcrumbs: () => BreadcrumbItem[];
-  useFuseSearch: (product?: string) => {
+  useSearch: (product?: string) => {
     query: string;
     setQuery: React.Dispatch<React.SetStateAction<string>>;
-    items: SearchDocument[] | null;
-    isLoading: boolean;
+    filter: SearchFilterItem[];
+    setFilter: React.Dispatch<React.SetStateAction<SearchFilterItem[]>>;
+    items: Record<string, SearchItemData[] | null>;
+    isSearchLoading: boolean;
+    facets: SearchFacet[];
+    setLoadMore: React.Dispatch<
+      React.SetStateAction<
+        | {
+            groupKey: string;
+            offset: number;
+          }
+        | undefined
+      >
+    >;
+    advancedSearch?: boolean;
+  };
+  useFacetQuery: (field: string) => {
+    searchFacet: SearchFacet | null;
+    setSearchFacet: React.Dispatch<React.SetStateAction<SearchFacet | null>>;
+    setSearchFacetQuery: React.Dispatch<React.SetStateAction<SearchFacetQuery | null>>;
   };
   useSidebarItems: (activeVersion?: Version | null) => {
     currentItems: ItemState[];

package/src/core/types/index.ts

@@ -6,7 +6,7 @@ export * from '@redocly/theme/core/types/hooks';
 export * from '@redocly/theme/core/types/markdown';
 export * from '@redocly/theme/core/types/navbar';
 export * from '@redocly/theme/core/types/search';
-export * from '@redocly/theme/core/types/select-option';
+export * from '@redocly/theme/core/types/select';
 export * from '@redocly/theme/core/types/sidebar';
 export * from '@redocly/theme/core/types/filter';
 export * from '@redocly/theme/core/types/user-menu';

package/src/core/types/l10n.ts

@@ -69,7 +69,9 @@ export type TranslationKey =
   | 'dev.app.overview.created'
   | 'dev.app.overview.visibilityToggle.hide'
   | 'dev.app.overview.visibilityToggle.show'
-  | 'theme.search.noResults'
+  | 'theme.search.loading'
+  | 'theme.search.noResults.title'
+  | 'theme.search.noResults.description'
   | 'theme.search.keys.navigate'
   | 'theme.search.keys.select'
   | 'theme.search.keys.exit'
@@ -78,6 +80,10 @@ export type TranslationKey =
   | 'theme.search.recent'
   | 'theme.search.navbar.label'
   | 'theme.search.suggested'
+  | 'theme.search.showMore'
+  | 'theme.search.filter.title'
+  | 'theme.search.filter.reset'
+  | 'theme.search.filter.field.reset'
   | 'theme.toc.header'
   | 'theme.footer.copyrightText'
   | 'theme.page.homeButton'
@@ -129,43 +135,109 @@ export type TranslationKey =
   | 'theme.mobileMenu.previous'
   | 'theme.mobileMenu.products'
   | 'theme.page.nextButton'
-  | 'theme.page.previousButton';
-
-export type GraphQLTranslationKey =
-  | 'graphql.sidebar.group.queries'
-  | 'graphql.sidebar.group.mutations'
-  | 'graphql.sidebar.group.subscriptions'
-  | 'graphql.sidebar.group.directives'
-  | 'graphql.sidebar.group.objects'
-  | 'graphql.sidebar.group.interfaces'
-  | 'graphql.sidebar.group.unions'
-  | 'graphql.sidebar.group.enums'
-  | 'graphql.sidebar.group.inputs'
-  | 'graphql.sidebar.group.scalars'
-  | 'graphql.sidebar.group.scalars'
-  | 'graphql.content.arguments.label'
-  | 'graphql.content.arguments.show'
-  | 'graphql.content.arguments.hide'
-  | 'graphql.content.returnTypes.label'
-  | 'graphql.content.returnTypes.show'
-  | 'graphql.content.returnTypes.hide'
-  | 'graphql.content.defaultValue'
-  | 'graphql.content.deprecationReason'
-  | 'graphql.content.implementedInterfaces'
-  | 'graphql.content.argumentsHere'
-  | 'graphql.content.nonNull'
-  | 'graphql.content.required'
-  | 'graphql.content.deprecated'
-  | 'graphql.rightSection.variables'
-  | 'graphql.rightSection.querySample'
-  | 'graphql.rightSection.mutationSample'
-  | 'graphql.rightSection.subscriptionSample'
-  | 'graphql.rightSection.responseSample'
-  | 'graphql.rightSection.locations'
-  | 'graphql.rightSection.sample'
-  | 'graphql.rightSection.referenced'
-  | 'graphql.navigation.next'
-  | 'graphql.navigation.previous';
+  | 'theme.page.previousButton'
+  | 'openapi.download.description.title'
+  | 'openapi.info.title'
+  | 'openapi.info.contact.url'
+  | 'openapi.info.contact.name'
+  | 'openapi.info.license'
+  | 'openapi.info.termsOfService'
+  | 'openapi.info.metadata.title'
+  | 'openapi.key'
+  | 'openapi.value'
+  | 'openapi.enum'
+  | 'openapi.items'
+  | 'openapi.default'
+  | 'openapi.variable'
+  | 'openapi.variables'
+  | 'openapi.actions.show'
+  | 'openapi.actions.hide'
+  | 'openapi.actions.more'
+  | 'openapi.languages.title'
+  | 'openapi.servers.title'
+  | 'openapi.operations'
+  | 'openapi.webhooks'
+  | 'openapi.description'
+  | 'openapi.badges.deprecated'
+  | 'openapi.badges.required'
+  | 'openapi.badges.webhook'
+  | 'openapi.request'
+  | 'openapi.path'
+  | 'openapi.query'
+  | 'openapi.cookie'
+  | 'openapi.header'
+  | 'openapi.body'
+  | 'openapi.responses'
+  | 'openapi.response'
+  | 'openapi.callbacks'
+  | 'openapi.callbackRequest'
+  | 'openapi.callbackResponse'
+  | 'openapi.payload'
+  | 'openapi.discriminator'
+  | 'openapi.contentType'
+  | 'openapi.tryIt'
+  | 'openapi.loading'
+  | 'openapi.example'
+  | 'openapi.examples'
+  | 'openapi.additionalProperties'
+  | 'openapi.patternProperties'
+  | 'openapi.required'
+  | 'openapi.recursive'
+  | 'openapi.deprecated'
+  | 'openapi.hideExample'
+  | 'openapi.showExample'
+  | 'openapi.expandAll'
+  | 'openapi.collapseAll'
+  | 'openapi.pdfFileSample'
+  | 'openapi.noResponseExample'
+  | 'openapi.noRequestPayload'
+  | 'openapi.hidePattern'
+  | 'openapi.showPattern'
+  | 'openapi.authorizationUrl'
+  | 'openapi.tokenUrl'
+  | 'openapi.refreshUrl'
+  | 'openapi.scopes'
+  | 'openapi.security'
+  | 'openapi.httpAuthorizationScheme'
+  | 'openapi.bearerFormat'
+  | 'openapi.parameterName'
+  | 'openapi.flowType'
+  | 'openapi.connectUrl'
+  | 'openapi.requiredScopes'
+  | 'openapi.unsupportedLanguage'
+  | 'openapi.failedToGenerateCodeSample'
+  | 'graphql.queries'
+  | 'graphql.mutations'
+  | 'graphql.subscriptions'
+  | 'graphql.directives'
+  | 'graphql.objects'
+  | 'graphql.interfaces'
+  | 'graphql.unions'
+  | 'graphql.enums'
+  | 'graphql.inputs'
+  | 'graphql.scalars'
+  | 'graphql.arguments.label'
+  | 'graphql.arguments.show'
+  | 'graphql.arguments.hide'
+  | 'graphql.arguments.here'
+  | 'graphql.returnTypes.label'
+  | 'graphql.returnTypes.show'
+  | 'graphql.returnTypes.hide'
+  | 'graphql.possibleTypes'
+  | 'graphql.defaultValue'
+  | 'graphql.deprecationReason'
+  | 'graphql.implementedInterfaces'
+  | 'graphql.nonNull'
+  | 'graphql.required'
+  | 'graphql.deprecated'
+  | 'graphql.variables'
+  | 'graphql.querySample'
+  | 'graphql.mutationSample'
+  | 'graphql.subscriptionSample'
+  | 'graphql.responseSample'
+  | 'graphql.locations'
+  | 'graphql.sample'
+  | 'graphql.referenced';
 
 export type Locale = { code: string; name: string };
 

package/src/core/types/search.ts

@@ -14,9 +14,9 @@ export type SearchDocument = {
   title: string | string[];
   text: string | string[];
   path?: string[];
-  httpVerb?: string;
+  httpMethod?: string;
+  httpPath?: string | string[];
   deprecated?: boolean;
-  pathName?: string | string[];
   parameters?: OperationParameter[];
   metadata?: Record<string, any>;
   version?: string;
@@ -26,4 +26,55 @@ export type SearchDocument = {
   'redocly::teams-rbac'?: { [x: string]: string };
   [REDOCLY_ROUTE_RBAC]?: { slug?: string; fsPath?: string };
   badges?: ItemBadge[];
+  facets?: Record<string, string>;
+  tags?: string[];
+  rbacTeams?: string[];
+};
+
+export type ParameterHighlight = {
+  name: string;
+  description: string;
+  place: string;
+  path: string[];
+};
+
+export type SearchItemData = {
+  document: SearchDocument;
+  highlight: Record<string, string> & { parameters?: ParameterHighlight[]; path?: string[] };
+};
+
+export type SearchFacet = {
+  name: string;
+  field: string;
+  type: SearchFacetType;
+  values: string[] | SearchFacetCount[];
+  isTop?: boolean;
+  index?: number;
+};
+
+export type SearchFacetCount = {
+  value: string;
+  count: number;
+  isCounterVisible?: boolean;
+};
+
+export type SearchFacetQuery = {
+  query: string;
+  filter: SearchFilterItem[];
+  facetQuery: string;
+};
+
+export type SearchFacetType =
+  | 'input'
+  | 'multi-select'
+  | 'select'
+  | 'switch'
+  | 'radio'
+  | 'tags'
+  | 'checkbox';
+
+export type SearchFilterItem = {
+  field: string;
+  values: string[];
+  isTop?: boolean;
 };

package/src/core/types/select.ts

@@ -0,0 +1,33 @@
+import type React from 'react';
+
+export type SelectOption<T> = {
+  value: T;
+  element?: React.ReactNode | JSX.Element | string;
+  label?: string;
+};
+
+export type SelectProps<T = any> = {
+  value?: SelectOption<T> | SelectOption<T>[] | T | T[];
+  options: SelectOption<T>[];
+  multiple?: boolean;
+  searchable?: boolean;
+  clearable?: boolean;
+  dataAttributes?: Record<string, string>;
+  className?: string;
+  withArrow?: boolean;
+  triggerEvent?: 'click' | 'hover';
+  placement?: 'top' | 'bottom';
+  alignment?: 'start' | 'end';
+  onlyIcon?: boolean;
+  placeholder?: string;
+  disabled?: boolean;
+  hideCheckmarkIcon?: boolean;
+  checkmarkIconPosition?: 'start' | 'end';
+  dataTestId?: string;
+  icon?: React.ReactNode;
+  footer?: React.ReactNode;
+  onChange?: (value: T | T[]) => void;
+  renderInput?: () => React.ReactElement;
+  renderDivider?: () => React.ReactElement;
+  onSearch?: (value: T | null) => void;
+};

package/src/core/utils/index.ts

@@ -24,3 +24,4 @@ export * from '@redocly/theme/core/utils/format-date-without-timezone';
 export * from '@redocly/theme/core/utils/details';
 export * from '@redocly/theme/core/utils/get-navbar-element';
 export * from '@redocly/theme/core/utils/with-load-progress';
+export * from '@redocly/theme/core/utils/text-trimmer';

package/src/core/utils/text-trimmer.ts

@@ -0,0 +1,7 @@
+export function trimText(text: string | string[], maxLength: number = 150): string | string[] {
+  if (typeof text === 'string') {
+    if (text.length <= maxLength) {
+      return text;
+    } else return `${text.slice(0, maxLength)}...`;
+  } else return text;
+}

package/src/icons/ResetIcon/ResetIcon.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M9 14C10.1867 14 11.3467 13.6481 12.3334 12.9888C13.3201 12.3295 14.0892 11.3925 14.5433 10.2961C14.9974 9.19975 15.1162 7.99335 14.8847 6.82946C14.6532 5.66558 14.0818 4.59648 13.2426 3.75736C12.4035 2.91825 11.3344 2.3468 10.1705 2.11529C9.00666 1.88378 7.80026 2.0026 6.7039 2.45673C5.60754 2.91085 4.67047 3.67989 4.01118 4.66658C3.35189 5.65328 3 6.81331 3 8V11.1L1.2 9.3L0.5 10L3.5 13L6.5 10L5.8 9.3L4 11.1V8C4 7.0111 4.29324 6.0444 4.84265 5.22215C5.39206 4.39991 6.17295 3.75904 7.08658 3.38061C8.00021 3.00217 9.00555 2.90315 9.97545 3.09608C10.9454 3.289 11.8363 3.76521 12.5355 4.46447C13.2348 5.16373 13.711 6.05465 13.9039 7.02455C14.0969 7.99446 13.9978 8.99979 13.6194 9.91342C13.241 10.8271 12.6001 11.6079 11.7779 12.1574C10.9556 12.7068 9.98891 13 9 13V14Z"
+      fill="#1A1C21"
+    />
+  </svg>
+);
+
+export const ResetIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ResetIcon/ResetIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/SettingsIcon/SettingsIcon.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M15.875 2.5H13.5687C13.2875 1.20625 12.1625 0.25 10.8125 0.25C9.4625 0.25 8.3375 1.20625 8.05625 2.5H0.125V3.625H8.05625C8.3375 4.91875 9.4625 5.875 10.8125 5.875C12.1625 5.875 13.2875 4.91875 13.5687 3.625H15.875V2.5ZM10.8125 4.75C9.85625 4.75 9.125 4.01875 9.125 3.0625C9.125 2.10625 9.85625 1.375 10.8125 1.375C11.7688 1.375 12.5 2.10625 12.5 3.0625C12.5 4.01875 11.7688 4.75 10.8125 4.75Z"
+      fill="#22242B"
+    />
+    <path
+      d="M0.125 11.5H2.43125C2.7125 12.7937 3.8375 13.75 5.1875 13.75C6.5375 13.75 7.6625 12.7937 7.94375 11.5H15.875V10.375H7.94375C7.6625 9.08125 6.5375 8.125 5.1875 8.125C3.8375 8.125 2.7125 9.08125 2.43125 10.375H0.125V11.5ZM5.1875 9.25C6.14375 9.25 6.875 9.98125 6.875 10.9375C6.875 11.8938 6.14375 12.625 5.1875 12.625C4.23125 12.625 3.5 11.8938 3.5 10.9375C3.5 9.98125 4.23125 9.25 5.1875 9.25Z"
+      fill="#22242B"
+    />
+  </svg>
+);
+
+export const SettingsIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/SettingsIcon/SettingsIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/index.ts

@@ -13,7 +13,7 @@ export * from '@redocly/theme/components/Badge/Badge';
 export * from '@redocly/theme/components/Dropdown/Dropdown';
 export * from '@redocly/theme/components/Dropdown/DropdownMenu';
 export * from '@redocly/theme/components/Dropdown/DropdownMenuItem';
-export * from '@redocly/theme/components/Loading/Loading';
+export * from '@redocly/theme/components/Loaders/Loading';
 export * from '@redocly/theme/components/Link/Link';
 export * from '@redocly/theme/components/Portal/Portal';
 export * from '@redocly/theme/components/Segmented/Segmented';
@@ -135,6 +135,11 @@ export * from '@redocly/theme/components/Search/SearchShortcut';
 export * from '@redocly/theme/components/Search/SearchTrigger';
 export * from '@redocly/theme/components/Search/SearchRecent';
 export * from '@redocly/theme/components/Search/SearchSuggestedPages';
+export * from '@redocly/theme/components/Search/SearchGroups';
+export * from '@redocly/theme/components/Search/SearchFilter';
+export * from '@redocly/theme/components/Search/SearchFilterField';
+export * from '@redocly/theme/components/Search/FilterFields/SearchFilterFieldSelect';
+export * from '@redocly/theme/components/Search/FilterFields/SearchFilterFieldTags';
 /* Icons */
 export * from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIcon';
 export * from '@redocly/theme/icons/ArrowUpRightIcon/ArrowUpRightIcon';
@@ -150,6 +155,7 @@ export * from '@redocly/theme/icons/FolderAddIcon/FolderAddIcon';
 export * from '@redocly/theme/icons/FolderIcon/FolderIcon';
 export * from '@redocly/theme/icons/FolderMoveToIcon/FolderMoveToIcon';
 export * from '@redocly/theme/icons/SelectIcon/SelectIcon';
+export * from '@redocly/theme/icons/SettingsIcon/SettingsIcon';
 export * from '@redocly/theme/icons/CloseIcon/CloseIcon';
 export * from '@redocly/theme/icons/CloseOutlineIcon/CloseOutlineIcon';
 export * from '@redocly/theme/icons/CloseFilledIcon/CloseFilledIcon';
@@ -197,6 +203,7 @@ export * from '@redocly/theme/icons/MobileSidebarIcon/MobileSidebarIcon';
 export * from '@redocly/theme/icons/CopyLinkIcon/CopyLinkIcon';
 export * from '@redocly/theme/icons/OverflowMenuHorizontalIcon/OverflowMenuHorizontalIcon';
 export * from '@redocly/theme/icons/RenewIcon/RenewIcon';
+export * from '@redocly/theme/icons/ResetIcon/ResetIcon';
 export * from '@redocly/theme/icons/WarningAltIcon/WarningAltIcon';
 export * from '@redocly/theme/icons/MoonIcon/MoonIcon';
 export * from '@redocly/theme/icons/SunIcon/SunIcon';

package/src/markdoc/components/Cards/Card.tsx

@@ -47,17 +47,17 @@ export function Card({
       as={to ? Link : 'div'}
       to={to}
       aria-labelledby={cardTitleId}
-      variant={variant}
-      layout={layout}
-      isCardLink={!!to}
+      $variant={variant}
+      $layout={layout}
+      $isCardLink={!!to}
     >
       <>
         {image ? <CardImage src={image} alt={title} position={imagePosition} /> : null}
         <CardContentWrapper
-          layout={layout}
-          alignItems={alignItems}
-          textAlign={textAlign}
-          hasImage={image !== undefined}
+          $layout={layout}
+          $alignItems={alignItems}
+          $textAlign={textAlign}
+          $hasImage={image !== undefined}
         >
           {icon && <CardIcon variant={iconVariant} src={icon} rawContent={iconRawContent} />}
           <ContentWrapper>
@@ -74,19 +74,19 @@ export function Card({
 }
 
 const CardContentWrapper = styled.div<{
-  layout?: string;
-  alignItems: string;
-  textAlign: string;
-  hasImage: boolean;
+  $layout?: string;
+  $alignItems: string;
+  $textAlign: string;
+  $hasImage: boolean;
 }>`
   display: flex;
-  flex-direction: ${({ layout }) => (layout === 'horizontal' ? 'row' : 'column')};
+  flex-direction: ${({ $layout }) => ($layout === 'horizontal' ? 'row' : 'column')};
   gap: var(--card-icon-gap);
-  align-items: ${({ alignItems }) => alignItems};
-  text-align: ${({ textAlign }) => textAlign};
+  align-items: ${({ $alignItems }) => $alignItems};
+  text-align: ${({ $textAlign }) => $textAlign};
   flex-grow: 1;
   padding: var(--card-padding);
-  height: ${({ hasImage }) => (hasImage ? 'auto' : '100%')};
+  height: ${({ $hasImage }) => ($hasImage ? 'auto' : '100%')};
 `;
 
 const ContentWrapper = styled.div`

package/lib/core/types/select-option.d.ts

@@ -1,4 +0,0 @@
-export type SelectOption<T> = {
-    value: T;
-    label: string;
-};

package/src/core/types/select-option.ts

@@ -1,4 +0,0 @@
-export type SelectOption<T> = {
-  value: T;
-  label: string;
-};