@scottish-government/designsystem-react 0.10.2 → 0.12.0

package/@types/components/Accordion.d.ts

@@ -2,13 +2,14 @@ declare namespace SGDS.Component {
     namespace Accordion {
         interface Item extends React.AllHTMLAttributes<HTMLElement> {
             id?: string,
+            heading: string | React.ReactNode
             isOpen?: boolean,
-            title: string
         }
     }
 
     interface Accordion extends React.AllHTMLAttributes<HTMLElement> {
         headingLevel?: SGDS.HeadingLevel,
-        hideOpenAll?: boolean
+        hideOpenAll?: boolean,
+        isSmall?: boolean
     }
 }

package/@types/components/ButtonGroup.d.ts

@@ -0,0 +1,5 @@
+declare namespace SGDS.Component {
+    interface ButtonGroup extends React.AllHTMLAttributes<HTMLElement> {
+        isInline?: boolean
+    }
+}

package/@types/components/PageHeader.d.ts

@@ -1,6 +1,7 @@
 declare namespace SGDS.Component {
     interface PageHeader extends React.AllHTMLAttributes<HTMLHeadingElement> {
         label?: string,
-        title: string
+        title: string,
+        titleId?: string
     }
 }

package/@types/components/RadioButton.d.ts

@@ -2,13 +2,13 @@ declare namespace SGDS.Component {
     namespace RadioButton {
         interface Group extends React.AllHTMLAttributes<HTMLElement> {
             isInline?: boolean,
-            name: string,
+            name?: string,
             isSmall?: boolean
         }
     }
 
     interface RadioButton extends CheckboxRadioBase<HTMLInputElement> {
         id: string,
-        name: string
+        name?: string
     }
 }

package/@types/components/SearchFacets.d.ts

@@ -0,0 +1,18 @@
+declare namespace SGDS.Component {
+    namespace SearchFacets {
+        interface Group extends React.AllHTMLAttributes<HTMLElement> {
+            joinContent?: string,
+            title: string
+        }
+
+        interface Item extends React.AllHTMLAttributes<HTMLElement> {
+            accessibleName?: string
+            joinContent?: string
+            title: string
+        }
+    }
+
+    interface SearchFacets extends React.AllHTMLAttributes<HTMLElement> {
+        headingId?: string
+    }
+}

package/@types/components/SearchFilters.d.ts

@@ -0,0 +1,14 @@
+declare namespace SGDS.Component {
+    namespace SearchFilters {
+        interface Panel extends  React.AllHTMLAttributes<HTMLElement> {
+            activeFilterCount?: number,
+            heading: string | React.ReactNode
+            isScrollable?: boolean,
+            legend: string,
+        }
+    }
+
+    interface SearchFilters extends React.AllHTMLAttributes<HTMLElement> {
+        searchResultsContainerId?: string
+    }
+}

package/@types/components/SearchResult.d.ts

@@ -0,0 +1,30 @@
+declare namespace SGDS.Component {
+    namespace SearchResult {
+        interface Content extends React.AllHTMLAttributes<HTMLElement> {
+
+        }
+
+        interface Context extends React.AllHTMLAttributes<HTMLDListElement> {
+            title: string
+        }
+
+        interface ContextItem extends React.AllHTMLAttributes<HTMLElement> {
+
+        }
+
+        interface Media extends React.AllHTMLAttributes<HTMLElement> {
+
+        }
+
+        interface Meta extends React.AllHTMLAttributes<HTMLElement> {
+        }
+    }
+
+    interface SearchResult extends React.AllHTMLAttributes<HTMLElement> {
+        href: string,
+        isPromoted?: boolean,
+        linkComponent?: SGDS.LinkComponent,
+        promotedTitle?: string,
+        title: string
+    }
+}

package/@types/components/SearchSort.d.ts

@@ -0,0 +1,9 @@
+declare namespace SGDS.Component {
+    interface SearchSort extends React.AllHTMLAttributes<HTMLElement> {
+        children: React.ReactNode;
+        className?: string;
+        id?: string;
+        label?: string;
+        onApply?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    }
+}

package/@types/components/SideNavigation.d.ts

@@ -13,6 +13,6 @@ declare namespace SGDS.Component {
     }
 
     interface SideNavigation extends React.AllHTMLAttributes<HTMLElement> {
-
+        ariaLabel?: string
     }
 }

package/CHANGELOG.md

@@ -6,13 +6,45 @@ Changes are grouped under the labels: `Added`, `Changed`, `Deprecated`, `Fixed`,
 `Removed` and `Security`.
 
 ---
+## [0.12.0] - 2025-11-12
 
-## [0.9.0] - 2025-09-17
-## Added
+### Added
+- type definitions included in /dist
+- optional 'titleId' prop added to PageHeader
+## Fixed
+- include SGDS 'skip-links' script in SkipLinks
+
+## [0.11.0] - 2025-10-22
+
+### Added
+- SearchResult, SearchFilters, SearchFacets, SearchSort components
+- ButtonGroup component
+### Changed
+- Accordion.Item now uses a new `heading` prop for its heading content, which allows both string and ReactNode
+- add "ariaLabel" property to SideNavigation to make the aria label editable
+### Deprecated
+- Accordion.Item `title` prop replaced with `heading`
+### Fixed
+- decorators added to many storybook components for correct rendering
+
+## [0.10.2] - 2025-09-18
+### Fixed
+- correction to handling of subcomponents in Storybook
+
+## [0.10.1] - 2025-09-18
+### Fixed
+- correction to white space on PageMetadata
+
+## [0.10.0] - 2025-09-18
+### Added
 - Storybook now added for all components. `npm run storybook`
 - CategoryList component
 - CategoryItem component
-## Changed
+- useTracking hook, to add DS tracking attributes
+### Changed
+- Accordion uses useContext instead of cloneElement to pass props (headingLevel) to its children
+- CheckboxGroup uses useContext instead of cloneElement to pass props (isSmall) to its children
+- RadioGroup use useContext instead of cloneElement to pass props (isSmall, name) to its children
 - 'text' prop removed from ErrorMessage. Use children instead.
 - Many boolean prop names updated for clarity/consistency
   - AbstractNotificationBanner (used by NotificationBanner and CookieBanner): close -> isDismissable
@@ -36,13 +68,15 @@ Changes are grouped under the labels: `Added`, `Changed`, `Deprecated`, `Fixed`,
   - Tabs: bordered -> isBorderless (logic inverted), manual -> isManual
   - TextInput: currency -> isCurrency
 
+## [0.9.0] - skipped due to user error with the CI script
+
 ## [0.8.0] - 2025-08-18
-## Added
+### Added
 - ActionLink component, centralising behaviour used in actions in both SummaryCard and SummaryList
 - SiteFooter component
 - Add support for the SkipLinks 'static' variant
 
-## Changed
+### Changed
 
 Two headline changes:
 

package/dist/common/AbstractNotificationBanner.d.ts

@@ -0,0 +1,9 @@
+declare const AbstractNotificationBanner: {
+    ({ children, className, hasColourIcon, hasInverseIcon, icon, isDismissable, title, ...props }: SGDS.Common.AbstractNotificationBanner): import("react").JSX.Element;
+    displayName: string;
+    Buttons: {
+        ({ children }: SGDS.Common.AbstractNotificationBanner.Buttons): import("react").JSX.Element;
+        displayName: string;
+    };
+};
+export default AbstractNotificationBanner;

package/dist/common/ActionLink.d.ts

@@ -0,0 +1,5 @@
+declare const ActionLink: {
+    ({ children, describedby, href, linkComponent, onclick }: SGDS.Common.ActionLink): string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | Iterable<import("react").ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+    displayName: string;
+};
+export default ActionLink;

package/dist/common/ConditionalWrapper.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Wraps all children in a specified HTML tag if a condition is met.
+ */
+declare const ConditionalWrapper: {
+    ({ condition, wrapper, children }: SGDS.Common.ConditionalWrapper): any;
+    displayName: string;
+};
+export default ConditionalWrapper;

package/dist/common/FileIcon.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const FileIcon: {
+    ({ ariaLabel, className, icon }: SGDS.Common.FileIcon): React.JSX.Element;
+    displayName: string;
+};
+export default FileIcon;

package/dist/common/HintText.d.ts

@@ -0,0 +1,5 @@
+declare const HintText: {
+    ({ children, id, text, ...props }: SGDS.Common.HintText): import("react").JSX.Element;
+    displayName: string;
+};
+export default HintText;

package/dist/common/Icon.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const Icon: {
+    ({ ariaLabel, className, isFilled, icon, iconSize }: SGDS.Common.Icon): React.JSX.Element;
+    displayName: string;
+};
+export default Icon;

package/dist/common/ScreenReaderText.d.ts

@@ -0,0 +1,5 @@
+declare const ScreenReaderText: {
+    ({ children, ...props }: SGDS.Common.ScreenReaderText): import("react").JSX.Element;
+    displayName: string;
+};
+export default ScreenReaderText;

package/dist/common/WrapperTag.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Wraps all children in a specified HTML tag.
+ */
+declare const WrapperTag: {
+    ({ children, tagName, ...props }: SGDS.Common.WrapperTag): import("react").JSX.Element;
+    displayName: string;
+};
+export default WrapperTag;

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare const Accordion: {
+    ({ children, className, headingLevel, hideOpenAll, isSmall, ...props }: SGDS.Component.Accordion): React.JSX.Element;
+    displayName: string;
+    Item: {
+        ({ children, className, id: rawId, isOpen, heading, title, ...props }: SGDS.Component.Accordion.Item): React.JSX.Element;
+        displayName: string;
+    };
+};
+export default Accordion;

package/dist/components/Accordion/Accordion.jsx

@@ -42,10 +42,14 @@ const WrapperTag_1 = __importDefault(require("../../common/WrapperTag"));
 const accordion_1 = __importDefault(require("@scottish-government/design-system/src/components/accordion/accordion"));
 let accordionItemCounter = 0;
 const AccordionHeadingLevelContext = (0, react_1.createContext)('h3');
-const AccordionItem = ({ children, className, id: rawId, isOpen = false, title, ...props }) => {
+const AccordionItem = ({ children, className, id: rawId, isOpen = false, heading, title, ...props }) => {
     accordionItemCounter = accordionItemCounter + 1;
     const processedId = rawId || `accordion-item-${(0, react_1.useId)()}`;
     let headingLevel = (0, react_1.useContext)(AccordionHeadingLevelContext);
+    if (title) {
+        console.warn('Warning: Using the `title` prop for heading text on an Accordion.Item is deprecated and will be removed in a future release. Please use the `heading` prop instead.');
+        heading = heading || title;
+    }
     return (<div className={[
             'ds_accordion-item',
             className
@@ -56,7 +60,7 @@ const AccordionItem = ({ children, className, id: rawId, isOpen = false, title,
         ].join(' ')} defaultChecked={isOpen} id={`${processedId}-control`} type="checkbox"/>
             <div className="ds_accordion-item__header">
                 <WrapperTag_1.default id={`panel-${processedId}-heading`} className="ds_accordion-item__title" tagName={headingLevel}>
-                    {title}
+                    {heading}
                 </WrapperTag_1.default>
                 <span className="ds_accordion-item__indicator"/>
                 <label className="ds_accordion-item__label" htmlFor={`${processedId}-control`}>
@@ -68,7 +72,7 @@ const AccordionItem = ({ children, className, id: rawId, isOpen = false, title,
             </div>
         </div>);
 };
-const Accordion = ({ children, className, headingLevel = 'h3', hideOpenAll, ...props }) => {
+const Accordion = ({ children, className, headingLevel = 'h3', hideOpenAll, isSmall, ...props }) => {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         if (ref.current) {
@@ -80,6 +84,7 @@ const Accordion = ({ children, className, headingLevel = 'h3', hideOpenAll, ...p
     }
     return (<div className={[
             'ds_accordion',
+            isSmall ? 'ds_accordion--small' : '',
             className
         ].join(' ')} ref={ref} {...props}>
             {!hideOpenAll && (<button className={[

package/dist/components/AspectBox/AspectBox.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const AspectBox: {
+    ({ children, className, ratio, ...props }: SGDS.Component.AspectBox): React.JSX.Element;
+    displayName: string;
+};
+export default AspectBox;

package/dist/components/BackToTop/BackToTop.d.ts

@@ -0,0 +1,5 @@
+declare const BackToTop: {
+    ({ className, href, ...props }: SGDS.Component.BackToTop): import("react").JSX.Element;
+    displayName: string;
+};
+export default BackToTop;

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,9 @@
+declare const Breadcrumbs: {
+    ({ children, ...props }: SGDS.Component.Breadcrumbs): import("react").JSX.Element;
+    displayName: string;
+    Item: {
+        ({ children, isHidden, href, linkComponent, ...props }: SGDS.Component.Breadcrumbs.Item): import("react").JSX.Element;
+        displayName: string;
+    };
+};
+export default Breadcrumbs;

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,5 @@
+declare const Button: {
+    ({ buttonStyle, children, className, icon, hasLinkStyle, href, isIconLeft, isIconOnly, isSmall, type, width, ...props }: SGDS.Component.Button): import("react").JSX.Element;
+    displayName: string;
+};
+export default Button;

package/dist/components/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,5 @@
+declare const ButtonGroup: {
+    ({ children, className, isInline, ...props }: SGDS.Component.ButtonGroup): import("react").JSX.Element;
+    displayName: string;
+};
+export default ButtonGroup;

package/dist/components/ButtonGroup/ButtonGroup.jsx

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const ButtonGroup = ({ children, className, isInline, ...props }) => {
+    return (<div className={[
+            "ds_button-group",
+            isInline ? "ds_button-group--inline" : undefined,
+            className
+        ].join(' ')} {...props}>
+            {children}
+        </div>);
+};
+ButtonGroup.displayName = 'ButtonGroup';
+exports.default = ButtonGroup;

package/dist/components/CategoryItem/CategoryItem.d.ts

@@ -0,0 +1,5 @@
+declare const CategoryItem: {
+    ({ children, className, headingLevel, href, linkComponent, tagName, title, ...props }: SGDS.Component.CategoryItem): import("react").JSX.Element;
+    displayName: string;
+};
+export default CategoryItem;

package/dist/components/CategoryList/CategoryList.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const CategoryList: {
+    ({ children, className, isGrid, isOrdered, ...props }: SGDS.Component.CategoryList): React.JSX.Element;
+    displayName: string;
+};
+export default CategoryList;

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,5 @@
+declare const Checkbox: {
+    ({ checked, hintText, id, isSmall, isExclusive, label, name, onBlur, onChange }: SGDS.Component.Checkbox): import("react").JSX.Element;
+    displayName: string;
+};
+export default Checkbox;

package/dist/components/Checkbox/CheckboxGroup.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const CheckboxGroup: {
+    ({ children, className, isSmall, ...props }: SGDS.Component.Checkbox.Group): React.JSX.Element;
+    displayName: string;
+};
+export default CheckboxGroup;

package/dist/components/ConfirmationMessage/ConfirmationMessage.d.ts

@@ -0,0 +1,5 @@
+declare const ConfirmationMessage: {
+    ({ ariaLive, children, className, headingLevel, title, ...props }: SGDS.Component.ConfirmationMessage): import("react").JSX.Element;
+    displayName: string;
+};
+export default ConfirmationMessage;

package/dist/components/ContentsNav/ContentsNav.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare const ContentsNav: {
+    ({ ariaLabel, children, className, title, ...props }: SGDS.Component.ContentsNav): React.JSX.Element;
+    displayName: string;
+    Item: {
+        ({ children, isCurrent, href, linkComponent }: SGDS.Component.ContentsNav.ContentsNavItem): React.JSX.Element;
+        displayName: string;
+    };
+};
+export default ContentsNav;

package/dist/components/CookieBanner/CookieBanner.d.ts

@@ -0,0 +1,9 @@
+declare const CookieBanner: {
+    ({ children, className, title, ...props }: SGDS.Common.AbstractNotificationBanner): import("react").JSX.Element;
+    displayName: string;
+    Buttons: {
+        ({ children }: SGDS.Common.AbstractNotificationBanner.Buttons): import("react").JSX.Element;
+        displayName: string;
+    };
+};
+export default CookieBanner;

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,5 @@
+declare const DatePicker: {
+    ({ className, dateSelectCallback, disabledDates, errorMessage, hasError, hintText, id, iconPath, label, maxDate, minDate, multiple, name, onBlur, onChange, value, width, ...props }: SGDS.Component.DatePicker): import("react").JSX.Element;
+    displayName: string;
+};
+export default DatePicker;

package/dist/components/Details/Details.d.ts

@@ -0,0 +1,5 @@
+declare const Details: {
+    ({ children, className, summary, ...props }: SGDS.Component.Details): import("react").JSX.Element;
+    displayName: string;
+};
+export default Details;

package/dist/components/ErrorMessage/ErrorMessage.d.ts

@@ -0,0 +1,5 @@
+declare const ErrorMessage: {
+    ({ children, className, id, ...props }: SGDS.Component.ErrorMessage): import("react").JSX.Element;
+    displayName: string;
+};
+export default ErrorMessage;

package/dist/components/ErrorSummary/ErrorSummary.d.ts

@@ -0,0 +1,9 @@
+declare const ErrorSummary: {
+    ({ children, className, title, ...props }: SGDS.Component.ErrorSummary): import("react").JSX.Element;
+    displayName: string;
+    Item: {
+        ({ children, fragmentId, linkComponent }: SGDS.Component.ErrorSummary.Item): import("react").JSX.Element;
+        displayName: string;
+    };
+};
+export default ErrorSummary;

package/dist/components/FileDownload/FileDownload.d.ts

@@ -0,0 +1,5 @@
+declare const FileDownload: {
+    ({ className, cover, icon, isHighlighted, fileSize, fileType, fileUrl, title, ...props }: SGDS.Component.FileDownload): import("react").JSX.Element;
+    displayName: string;
+};
+export default FileDownload;

package/dist/components/HideThisPage/HideThisPage.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const HideThisPage: {
+    ({ className, escapeUrl, ...props }: SGDS.Component.HideThisPage): React.JSX.Element;
+    displayName: string;
+};
+export default HideThisPage;

package/dist/components/InsetText/InsetText.d.ts

@@ -0,0 +1,5 @@
+declare const InsetText: {
+    ({ children, className, ...props }: SGDS.Component.InsetText): import("react").JSX.Element;
+    displayName: string;
+};
+export default InsetText;

package/dist/components/NotificationBanner/NotificationBanner.d.ts

@@ -0,0 +1,9 @@
+declare const NotificationBanner: {
+    ({ children, className, hasColourIcon, hasIcon, hasInverseIcon, isDismissable, title, ...props }: SGDS.Common.AbstractNotificationBanner): import("react").JSX.Element;
+    displayName: string;
+    Buttons: {
+        ({ children }: SGDS.Common.AbstractNotificationBanner.Buttons): import("react").JSX.Element;
+        displayName: string;
+    };
+};
+export default NotificationBanner;

package/dist/components/NotificationPanel/NotificationPanel.d.ts

@@ -0,0 +1,5 @@
+declare const NotificationPanel: {
+    ({ ariaLive, children, className, headingLevel, title, ...props }: SGDS.Component.NotificationPanel): import("react").JSX.Element;
+    displayName: string;
+};
+export default NotificationPanel;

package/dist/components/PageHeader/PageHeader.d.ts

@@ -0,0 +1,5 @@
+declare const PageHeader: {
+    ({ children, className, label, title, titleId, ...props }: SGDS.Component.PageHeader): import("react").JSX.Element;
+    displayName: string;
+};
+export default PageHeader;

package/dist/components/PageHeader/PageHeader.jsx

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const PageHeader = ({ children, className, label, title, ...props }) => {
+const PageHeader = ({ children, className, label, title, titleId, ...props }) => {
     return (<header className={[
             'ds_page-header',
             className
         ].join(' ')} {...props}>
             {label && <span className="ds_page-header__label  ds_content-label">{label}</span>}
-            <h1 className="ds_page-header__title">{title}</h1>
+            <h1 id={titleId} className="ds_page-header__title">{title}</h1>
 
             {children}
         </header>);

package/dist/components/PageMetadata/PageMetadata.d.ts

@@ -0,0 +1,9 @@
+declare const Metadata: {
+    ({ children, className, isInline, ...props }: SGDS.Component.Metadata): import("react").JSX.Element;
+    displayName: string;
+    Item: {
+        ({ children, className, name, ...props }: SGDS.Component.Metadata.Item): import("react").JSX.Element;
+        displayName: string;
+    };
+};
+export default Metadata;

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,7 @@
+export declare const Page: ({ ariaLabel, children, className, href, isCurrent, linkComponent, onClick }: SGDS.Component.Pagination.Page) => import("react").JSX.Element;
+export declare const Ellipsis: () => import("react").JSX.Element;
+declare const Pagination: {
+    ({ ariaLabel, className, onClick, padding, page, pattern, totalPages, linkComponent, ...props }: SGDS.Component.Pagination): import("react").JSX.Element;
+    displayName: string;
+};
+export default Pagination;

package/dist/components/PhaseBanner/PhaseBanner.d.ts

@@ -0,0 +1,5 @@
+declare const PhaseBanner: {
+    ({ children, className, phaseName, ...props }: SGDS.Component.PhaseBanner): import("react").JSX.Element;
+    displayName: string;
+};
+export default PhaseBanner;

package/dist/components/Question/Question.d.ts

@@ -0,0 +1,5 @@
+declare const Question: {
+    ({ children, className, errorMessage, hasError, hintText, legend, tagName, ...props }: SGDS.Component.Question): import("react").JSX.Element;
+    displayName: string;
+};
+export default Question;

package/dist/components/RadioButton/RadioButton.d.ts

@@ -0,0 +1,5 @@
+declare const RadioButton: {
+    ({ checked, hintText, id, isSmall, label, name, onBlur, onChange }: SGDS.Component.RadioButton): import("react").JSX.Element;
+    displayName: string;
+};
+export default RadioButton;

package/dist/components/RadioButton/RadioGroup.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const RadioGroup: {
+    ({ children, className, isInline, isSmall, name, ...props }: SGDS.Component.RadioButton.Group): React.JSX.Element;
+    displayName: string;
+};
+export default RadioGroup;

package/dist/components/RadioButton/RadioGroup.jsx

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const context_1 = require("../../utils/context");
-const RadioGroup = ({ children, className, isInline, isSmall, name, ...props }) => {
+const RadioGroup = ({ children, className, isInline, isSmall, name = '', ...props }) => {
     return (<div className={[
             'ds_radios',
             'ds_field-group',

package/dist/components/SearchFacets/SearchFacets.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+declare const Facets: {
+    ({ children, className, ...props }: SGDS.Component.SearchFacets): React.JSX.Element;
+    displayName: string;
+    Item: {
+        ({ accessibleName, joinContent, onClick, title, ...props }: SGDS.Component.SearchFacets.Item): React.JSX.Element;
+        displayName: string;
+    };
+    Group: {
+        ({ children, joinContent, title, ...props }: SGDS.Component.SearchFacets.Group): React.JSX.Element;
+        displayName: string;
+    };
+};
+export default Facets;