@asante-org/leybold-design-system 1.3.2 → 1.3.3

package/dist/index.css

@@ -0,0 +1,88 @@
+.Button-module__button___yfSXe {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-weight: 600;
+  line-height: 1.5;
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  border: 2px solid transparent;
+  border-radius: 4px;
+  transition: all 0.2s ease-in-out;
+}
+.Button-module__button___yfSXe:focus-visible {
+  outline: 2px solid #0066cc;
+  outline-offset: 2px;
+}
+.Button-module__button--primary___XhVfu {
+  color: white;
+  background-color: #0066cc;
+  border-color: #0066cc;
+}
+.Button-module__button--primary___XhVfu:hover:not(.Button-module__button--disabled___zC2nI) {
+  background-color: rgb(0, 76.5, 153);
+  border-color: rgb(0, 76.5, 153);
+}
+.Button-module__button--primary___XhVfu:active:not(.Button-module__button--disabled___zC2nI) {
+  background-color: rgb(0, 63.75, 127.5);
+  border-color: rgb(0, 63.75, 127.5);
+}
+.Button-module__button--secondary___iFz5O {
+  color: white;
+  background-color: #6c757d;
+  border-color: #6c757d;
+}
+.Button-module__button--secondary___iFz5O:hover:not(.Button-module__button--disabled___zC2nI) {
+  background-color: rgb(84.3605150215, 91.3905579399, 97.6394849785);
+  border-color: rgb(84.3605150215, 91.3905579399, 97.6394849785);
+}
+.Button-module__button--secondary___iFz5O:active:not(.Button-module__button--disabled___zC2nI) {
+  background-color: rgb(72.5407725322, 78.5858369099, 83.9592274678);
+  border-color: rgb(72.5407725322, 78.5858369099, 83.9592274678);
+}
+.Button-module__button--outline___G4qIX {
+  color: #0066cc;
+  background-color: transparent;
+  border-color: #0066cc;
+}
+.Button-module__button--outline___G4qIX:hover:not(.Button-module__button--disabled___zC2nI) {
+  color: white;
+  background-color: #0066cc;
+}
+.Button-module__button--outline___G4qIX:active:not(.Button-module__button--disabled___zC2nI) {
+  background-color: rgb(0, 76.5, 153);
+  border-color: rgb(0, 76.5, 153);
+}
+.Button-module__button--text___6Kh5s {
+  color: #0066cc;
+  background-color: transparent;
+  border-color: transparent;
+}
+.Button-module__button--text___6Kh5s:hover:not(.Button-module__button--disabled___zC2nI) {
+  background-color: rgba(0, 102, 204, 0.1);
+}
+.Button-module__button--text___6Kh5s:active:not(.Button-module__button--disabled___zC2nI) {
+  background-color: rgba(0, 102, 204, 0.2);
+}
+.Button-module__button--small___T4-Pw {
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+}
+.Button-module__button--medium___EwhUs {
+  padding: 1rem 1.5rem;
+  font-size: 1rem;
+}
+.Button-module__button--large___uuXbF {
+  padding: 1.5rem 2rem;
+  font-size: 1.125rem;
+}
+.Button-module__button--disabled___zC2nI {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { Button } from './stories/components/Button';
+export type { ButtonProps } from './stories/components/Button';
+export * from './utils/styles';

package/dist/index.esm.css

@@ -0,0 +1,88 @@
+.Button-module__button___yfSXe {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-weight: 600;
+  line-height: 1.5;
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  border: 2px solid transparent;
+  border-radius: 4px;
+  transition: all 0.2s ease-in-out;
+}
+.Button-module__button___yfSXe:focus-visible {
+  outline: 2px solid #0066cc;
+  outline-offset: 2px;
+}
+.Button-module__button--primary___XhVfu {
+  color: white;
+  background-color: #0066cc;
+  border-color: #0066cc;
+}
+.Button-module__button--primary___XhVfu:hover:not(.Button-module__button--disabled___zC2nI) {
+  background-color: rgb(0, 76.5, 153);
+  border-color: rgb(0, 76.5, 153);
+}
+.Button-module__button--primary___XhVfu:active:not(.Button-module__button--disabled___zC2nI) {
+  background-color: rgb(0, 63.75, 127.5);
+  border-color: rgb(0, 63.75, 127.5);
+}
+.Button-module__button--secondary___iFz5O {
+  color: white;
+  background-color: #6c757d;
+  border-color: #6c757d;
+}
+.Button-module__button--secondary___iFz5O:hover:not(.Button-module__button--disabled___zC2nI) {
+  background-color: rgb(84.3605150215, 91.3905579399, 97.6394849785);
+  border-color: rgb(84.3605150215, 91.3905579399, 97.6394849785);
+}
+.Button-module__button--secondary___iFz5O:active:not(.Button-module__button--disabled___zC2nI) {
+  background-color: rgb(72.5407725322, 78.5858369099, 83.9592274678);
+  border-color: rgb(72.5407725322, 78.5858369099, 83.9592274678);
+}
+.Button-module__button--outline___G4qIX {
+  color: #0066cc;
+  background-color: transparent;
+  border-color: #0066cc;
+}
+.Button-module__button--outline___G4qIX:hover:not(.Button-module__button--disabled___zC2nI) {
+  color: white;
+  background-color: #0066cc;
+}
+.Button-module__button--outline___G4qIX:active:not(.Button-module__button--disabled___zC2nI) {
+  background-color: rgb(0, 76.5, 153);
+  border-color: rgb(0, 76.5, 153);
+}
+.Button-module__button--text___6Kh5s {
+  color: #0066cc;
+  background-color: transparent;
+  border-color: transparent;
+}
+.Button-module__button--text___6Kh5s:hover:not(.Button-module__button--disabled___zC2nI) {
+  background-color: rgba(0, 102, 204, 0.1);
+}
+.Button-module__button--text___6Kh5s:active:not(.Button-module__button--disabled___zC2nI) {
+  background-color: rgba(0, 102, 204, 0.2);
+}
+.Button-module__button--small___T4-Pw {
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+}
+.Button-module__button--medium___EwhUs {
+  padding: 1rem 1.5rem;
+  font-size: 1rem;
+}
+.Button-module__button--large___uuXbF {
+  padding: 1.5rem 2rem;
+  font-size: 1.125rem;
+}
+.Button-module__button--disabled___zC2nI {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/dist/index.esm.js

@@ -92,20 +92,20 @@ function requireClassnames() {
 var classnamesExports = requireClassnames();
 var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
-/**
- * Button variant types
+/**
+ * Button variant types
  */
 
-/**
- * Icon types for button
+/**
+ * Icon types for button
  */
 
-/**
- * Icon position
+/**
+ * Icon position
  */
 
-/**
- * Get the icon component based on icon type
+/**
+ * Get the icon component based on icon type
  */
 const getIcon = icon => {
   switch (icon) {
@@ -130,8 +130,8 @@ const getIcon = icon => {
   }
 };
 
-/**
- * Get default icon for certain variants
+/**
+ * Get default icon for certain variants
  */
 const getDefaultIcon = variant => {
   switch (variant) {
@@ -151,8 +151,8 @@ const getDefaultIcon = variant => {
   }
 };
 
-/**
- * Map alias variants to their actual CSS class variants
+/**
+ * Map alias variants to their actual CSS class variants
  */
 const mapVariantToClass = variant => {
   switch (variant) {
@@ -163,8 +163,8 @@ const mapVariantToClass = variant => {
   }
 };
 
-/**
- * Primary UI component for user interaction
+/**
+ * Primary UI component for user interaction
  */
 const Button = ({
   children,
@@ -390,8 +390,8 @@ const CarouselCard = ({
 
 var styles$j = {"footer":"Footer-module__footer___Oavyx","footer--mobile":"Footer-module__footer--mobile___9HQC-","footer__container":"Footer-module__footer__container___ohvnm","footer__links":"Footer-module__footer__links___DdVK8","footer__linkGroup":"Footer-module__footer__linkGroup___1B7JA","footer__linkList":"Footer-module__footer__linkList___j-DWF","footer__linkHeading":"Footer-module__footer__linkHeading___LtE6X","footer__link":"Footer-module__footer__link___G5HPW","footer__cta":"Footer-module__footer__cta___MRJLr","footer__socialIcons":"Footer-module__footer__socialIcons___j0aRp","footer__socialIcon":"Footer-module__footer__socialIcon___1uVTm","footer__countrySelector":"Footer-module__footer__countrySelector___pVtN5","footer__bottom":"Footer-module__footer__bottom___77bPL","footer__bottomLeft":"Footer-module__footer__bottomLeft___tlst1","footer__bottomLinks":"Footer-module__footer__bottomLinks___s22h7","footer__bottomLink":"Footer-module__footer__bottomLink___SLzwY","footer__copyright":"Footer-module__footer__copyright___4bZOF","footer__brandSection":"Footer-module__footer__brandSection___BBr5f","footer__logo":"Footer-module__footer__logo___mv-9M","footer__leftCol":"Footer-module__footer__leftCol___vmKNN","footer__motto":"Footer-module__footer__motto___QtB2m","footer__main":"Footer-module__footer__main___NSU9d","footer__badge":"Footer-module__footer__badge___faejb","footer__badgeIcon":"Footer-module__footer__badgeIcon___xJ519","footer__badgeText":"Footer-module__footer__badgeText___imXgG","footer__linkText":"Footer-module__footer__linkText___Gc18Z","footer__linkIcon":"Footer-module__footer__linkIcon___IZzJM","footer__countrySelectorIcon":"Footer-module__footer__countrySelectorIcon___hhEd4"};
 
-/**
- * External link icon (↗) for footer links that open in new tabs
+/**
+ * External link icon (↗) for footer links that open in new tabs
  */
 const ExternalLinkIcon = ({
   className,
@@ -412,8 +412,8 @@ const ExternalLinkIcon = ({
   strokeLinejoin: "round"
 }));
 
-/**
- * Atlas Copco Group badge icon (square)
+/**
+ * Atlas Copco Group badge icon (square)
  */
 const AtlasCopcoIcon = ({
   className,
@@ -589,11 +589,11 @@ const FooterBottom = ({
 // MAIN FOOTER COMPONENT
 // =============================================================================
 
-/**
- * Footer component with brand identity, navigation links, social icons, and legal information.
- * Supports two layout variants:
- * - desktop: Logo at top, 3-column main content
- * - mobile: Logo at bottom, stacked layout with CTA button
+/**
+ * Footer component with brand identity, navigation links, social icons, and legal information.
+ * Supports two layout variants:
+ * - desktop: Logo at top, 3-column main content
+ * - mobile: Logo at bottom, stacked layout with CTA button
  */
 const Footer = ({
   variant = 'desktop',
@@ -793,8 +793,8 @@ const PaginationEllipsis = ({
   }, "..."));
 };
 
-/**
- * Generate page numbers to display with ellipsis logic
+/**
+ * Generate page numbers to display with ellipsis logic
  */
 const generatePageNumbers = (currentPage, totalPages, maxVisiblePages) => {
   if (totalPages <= maxVisiblePages) {
@@ -1939,8 +1939,8 @@ const faXmark = {
   icon: [384, 512, [128473, 10005, 10006, 10060, 215, "close", "multiply", "remove", "times"], "f00d", "M324.5 411.1c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6L214.6 256 347.1 123.5c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L192 233.4 59.6 100.9c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L169.4 256 36.9 388.5c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L192 278.6 324.5 411.1z"]
 };
 
-/**
- * FilterSearch - Search input for filtering facet values
+/**
+ * FilterSearch - Search input for filtering facet values
  */
 const FilterSearch = ({
   value,
@@ -1988,8 +1988,8 @@ const CheckIcon = () => /*#__PURE__*/React.createElement("svg", {
   fill: "#E2001A"
 }));
 
-/**
- * FilterItem - Individual facet item with checkbox and count
+/**
+ * FilterItem - Individual facet item with checkbox and count
  */
 const FilterItem = ({
   value,
@@ -2064,8 +2064,8 @@ const FilterItem = ({
   }, "(", value.count, ")"));
 };
 
-/**
- * FilterAccordion - Collapsible facet section with optional search
+/**
+ * FilterAccordion - Collapsible facet section with optional search
  */
 const FilterAccordion = ({
   facet,
@@ -2149,8 +2149,8 @@ const FilterAccordion = ({
   }, "No results found"))));
 };
 
-/**
- * AppliedFilterTag - Individual removable filter tag/chip
+/**
+ * AppliedFilterTag - Individual removable filter tag/chip
  */
 const AppliedFilterTag = ({
   attribute,
@@ -2194,8 +2194,8 @@ const AppliedFilterTag = ({
   }))));
 };
 
-/**
- * AppliedFilters - Shows all active filters as removable tags
+/**
+ * AppliedFilters - Shows all active filters as removable tags
  */
 const AppliedFilters = ({
   facets,
@@ -2240,12 +2240,12 @@ const AppliedFilters = ({
   }))));
 };
 
-/**
- * FiltersPanel - Main container for all filters
- *
- * Fully controlled component - renders based on facets prop.
- * When facets change (e.g., after API refetch), component re-renders with new data.
- * Accordion expansion state persists across refetches, with new facets respecting defaultExpanded.
+/**
+ * FiltersPanel - Main container for all filters
+ *
+ * Fully controlled component - renders based on facets prop.
+ * When facets change (e.g., after API refetch), component re-renders with new data.
+ * Accordion expansion state persists across refetches, with new facets respecting defaultExpanded.
  */
 const FiltersPanel = ({
   facets,
@@ -2354,23 +2354,23 @@ const isPlaceholderImg = url => {
   return !!url && url.includes(PLACEHOLDER_INDICATOR);
 };
 
-/**
- * ProductCardVertical - Vertical product card for grid layouts
- *
- * Used in full results view with 4-column grid (desktop) or 2-column grid (mobile).
- * Figma spec: Default (no shadow) → Hover (shadow + grey button) → Focus (border + shadow)
- *
- * @example
- * ```tsx
- * <ProductCardVertical
- *   title="TURBOVAC i - High vacuum turbopump"
- *   url="/products/turbovac-i"
- *   imageUrl="/assets/search-product.png"
- *   productId="21312VISH"
- *   description="Premium high-performance turbomolecular pump"
- *   buttonLabel="BUY ONLINE"
- * />
- * ```
+/**
+ * ProductCardVertical - Vertical product card for grid layouts
+ *
+ * Used in full results view with 4-column grid (desktop) or 2-column grid (mobile).
+ * Figma spec: Default (no shadow) → Hover (shadow + grey button) → Focus (border + shadow)
+ *
+ * @example
+ * ```tsx
+ * <ProductCardVertical
+ *   title="TURBOVAC i - High vacuum turbopump"
+ *   url="/products/turbovac-i"
+ *   imageUrl="/assets/search-product.png"
+ *   productId="21312VISH"
+ *   description="Premium high-performance turbomolecular pump"
+ *   buttonLabel="BUY ONLINE"
+ * />
+ * ```
  */
 const ProductCardVertical = ({
   id,
@@ -2528,32 +2528,32 @@ const ResultsList = ({
 
 var styles$4 = {"tabButton":"TabButton-module__tabButton___cMU45","tabButton__count":"TabButton-module__tabButton__count___nlS1p","tabButton__label":"TabButton-module__tabButton__label___YGpiC","tabButton__results":"TabButton-module__tabButton__results___Nr6gr","tabButton--desktop":"TabButton-module__tabButton--desktop___fbAaC","tabButton--active":"TabButton-module__tabButton--active___gj6Jp","tabButton--mobile":"TabButton-module__tabButton--mobile___AnLwy"};
 
-/**
- * TabButton - Tab navigation component with result counts
- *
- * Supports two layout variants:
- * - Desktop: Background colours, top red underline when active, rounded corners
- * - Mobile: Text-only with bottom border underline when active
- *
- * @example
- * ```tsx
- * // Desktop variant
- * <TabButton
- *   label="WEB SHOP RESULTS"
- *   count={542}
- *   isActive={true}
- *   onClick={() => setActiveTab('products')}
- *   variant="desktop"
- * />
- *
- * // Mobile variant
- * <TabButton
- *   label="WEB SHOP"
- *   isActive={false}
- *   onClick={() => setActiveTab('content')}
- *   variant="mobile"
- * />
- * ```
+/**
+ * TabButton - Tab navigation component with result counts
+ *
+ * Supports two layout variants:
+ * - Desktop: Background colours, top red underline when active, rounded corners
+ * - Mobile: Text-only with bottom border underline when active
+ *
+ * @example
+ * ```tsx
+ * // Desktop variant
+ * <TabButton
+ *   label="WEB SHOP RESULTS"
+ *   count={542}
+ *   isActive={true}
+ *   onClick={() => setActiveTab('products')}
+ *   variant="desktop"
+ * />
+ *
+ * // Mobile variant
+ * <TabButton
+ *   label="WEB SHOP"
+ *   isActive={false}
+ *   onClick={() => setActiveTab('content')}
+ *   variant="mobile"
+ * />
+ * ```
  */
 const TabButton = ({
   label,
@@ -2602,23 +2602,23 @@ const AssistanceIcon = props => {
 
 var styles$3 = {"assistanceBanner":"AssistanceBanner-module__assistanceBanner___b97es","assistanceBanner__icon":"AssistanceBanner-module__assistanceBanner__icon___8NzJj","assistanceBanner__title":"AssistanceBanner-module__assistanceBanner__title___Wtkkt","assistanceBanner__description":"AssistanceBanner-module__assistanceBanner__description___AjoOr","assistanceBanner__link":"AssistanceBanner-module__assistanceBanner__link___5L45N","assistanceBanner__chevron":"AssistanceBanner-module__assistanceBanner__chevron___4km-f"};
 
-/**
- * AssistanceBanner - Help widget for search sidebar
- *
- * Displays a call-to-action for users who need assistance finding products.
- * Features chat icon, heading, description, and contact link with chevron.
- *
- * Desktop only - hidden on mobile to save space.
- *
- * @example
- * ```tsx
- * <AssistanceBanner
- *   title="Need Assistance?"
- *   description="Can't find what you're looking for? Our team is ready to help."
- *   linkText="Contact support"
- *   linkUrl="/contact"
- * />
- * ```
+/**
+ * AssistanceBanner - Help widget for search sidebar
+ *
+ * Displays a call-to-action for users who need assistance finding products.
+ * Features chat icon, heading, description, and contact link with chevron.
+ *
+ * Desktop only - hidden on mobile to save space.
+ *
+ * @example
+ * ```tsx
+ * <AssistanceBanner
+ *   title="Need Assistance?"
+ *   description="Can't find what you're looking for? Our team is ready to help."
+ *   linkText="Contact support"
+ *   linkUrl="/contact"
+ * />
+ * ```
  */
 const AssistanceBanner = ({
   title = 'Need Assistance?',
@@ -2671,25 +2671,25 @@ const OVERLAY_FADE_MS = 300;
 const PANEL_SLIDE_MS = 300;
 const CLOSE_ANIMATION_BUFFER_MS = 50;
 
-/**
- * FilterDrawer - Mobile slide-in filter panel
- *
- * Slides in from the right with a dark overlay. Used on mobile to show filters
- * when screen space is limited. Includes focus trap, escape key handling, and
- * body scroll prevention.
- *
- * Desktop: Hidden (filters shown in sidebar)
- * Mobile: Slide-in drawer overlay
- *
- * @example
- * ```tsx
- * <FilterDrawer
- *   isOpen={isFilterDrawerOpen}
- *   onClose={() => setIsFilterDrawerOpen(false)}
- * >
- *   <FiltersPanel facets={facets} onFacetToggle={handleToggle} />
- * </FilterDrawer>
- * ```
+/**
+ * FilterDrawer - Mobile slide-in filter panel
+ *
+ * Slides in from the right with a dark overlay. Used on mobile to show filters
+ * when screen space is limited. Includes focus trap, escape key handling, and
+ * body scroll prevention.
+ *
+ * Desktop: Hidden (filters shown in sidebar)
+ * Mobile: Slide-in drawer overlay
+ *
+ * @example
+ * ```tsx
+ * <FilterDrawer
+ *   isOpen={isFilterDrawerOpen}
+ *   onClose={() => setIsFilterDrawerOpen(false)}
+ * >
+ *   <FiltersPanel facets={facets} onFacetToggle={handleToggle} />
+ * </FilterDrawer>
+ * ```
  */
 const FilterDrawer = ({
   isOpen,
@@ -3006,41 +3006,41 @@ const FederatedResultsView = ({
 
 var styles$1 = {"searchExperience":"FederatedSearchExperience-module__searchExperience___gug9X","searchBarSection":"FederatedSearchExperience-module__searchBarSection___f0Ykq","searchBarDesktopOnly":"FederatedSearchExperience-module__searchBarDesktopOnly___CetKZ","searchBarMobileOnly":"FederatedSearchExperience-module__searchBarMobileOnly___Ityxp","resultsHeaderMobileOnly":"FederatedSearchExperience-module__resultsHeaderMobileOnly___09ef-","tabsContainerSticky":"FederatedSearchExperience-module__tabsContainerSticky___-HdY5","tabs":"FederatedSearchExperience-module__tabs___Vatv8","tabSeparator":"FederatedSearchExperience-module__tabSeparator___AUjhW","mobileFilterButtonWrapper":"FederatedSearchExperience-module__mobileFilterButtonWrapper___JkRtk","mobileFilterButton":"FederatedSearchExperience-module__mobileFilterButton___sRc-w","filterIndicatorDot":"FederatedSearchExperience-module__filterIndicatorDot___vqVi2","instantResultsSection":"FederatedSearchExperience-module__instantResultsSection___AG3qn","fullResultsSection":"FederatedSearchExperience-module__fullResultsSection___NH16U"};
 
-/**
- * FederatedSearchExperience - Top-level search experience component
- *
- * This component orchestrates the entire federated search experience, including:
- * - Modal container
- * - Search input
- * - Instant results (2-column layout)
- * - Full results view with tabs and filters
- *
- * The component is fully controlled and does not contain any data fetching logic.
- * All data and callbacks are passed in via props, making it suitable for use in AEM
- * where a controller layer will handle Algolia integration.
- *
- * @example
- * ```tsx
- * <FederatedSearchExperience
- *   isOpen={isOpen}
- *   onOpen={handleOpen}
- *   onClose={handleClose}
- *   query={query}
- *   onQueryChange={setQuery}
- *   onSearchSubmit={handleSubmit}
- *   products={products}
- *   contents={contents}
- *   isLoadingProducts={isLoadingProducts}
- *   isLoadingContents={isLoadingContents}
- *   onSeeAllProducts={handleSeeAllProducts}
- *   onSeeAllContents={handleSeeAllContents}
- *   onSeeAllCombined={handleSeeAllCombined}
- *   activeView={activeView}
- *   onChangeView={setActiveView}
- *   activeTab={activeTab}
- *   onTabChange={setActiveTab}
- * />
- * ```
+/**
+ * FederatedSearchExperience - Top-level search experience component
+ *
+ * This component orchestrates the entire federated search experience, including:
+ * - Modal container
+ * - Search input
+ * - Instant results (2-column layout)
+ * - Full results view with tabs and filters
+ *
+ * The component is fully controlled and does not contain any data fetching logic.
+ * All data and callbacks are passed in via props, making it suitable for use in AEM
+ * where a controller layer will handle Algolia integration.
+ *
+ * @example
+ * ```tsx
+ * <FederatedSearchExperience
+ *   isOpen={isOpen}
+ *   onOpen={handleOpen}
+ *   onClose={handleClose}
+ *   query={query}
+ *   onQueryChange={setQuery}
+ *   onSearchSubmit={handleSubmit}
+ *   products={products}
+ *   contents={contents}
+ *   isLoadingProducts={isLoadingProducts}
+ *   isLoadingContents={isLoadingContents}
+ *   onSeeAllProducts={handleSeeAllProducts}
+ *   onSeeAllContents={handleSeeAllContents}
+ *   onSeeAllCombined={handleSeeAllCombined}
+ *   activeView={activeView}
+ *   onChangeView={setActiveView}
+ *   activeTab={activeTab}
+ *   onTabChange={setActiveTab}
+ * />
+ * ```
  */
 const FederatedSearchExperience = ({
   isOpen,