@scottish-government/designsystem-react 0.12.1 → 1.0.0

package/dist/components/NotificationTag/index.d.ts

@@ -0,0 +1 @@
+export { default } from './NotificationTag';

package/dist/components/NotificationTag/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var NotificationTag_1 = require("./NotificationTag");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(NotificationTag_1).default; } });

package/dist/components/NotificationTag/types.d.ts

@@ -0,0 +1,5 @@
+export interface NotificationTagProps extends React.AllHTMLAttributes<HTMLElement> {
+    description?: string;
+    isHidden?: boolean;
+    label?: string;
+}

package/dist/components/NotificationTag/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

package/dist/components/PageHeader/PageHeader.jsx

@@ -1,10 +1,14 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+const clsx_1 = __importDefault(require("clsx"));
 const PageHeader = ({ children, className, label, title, titleId, ...props }) => {
-    return (<header className={[
+    return (<header className={(0, clsx_1.default)([
             'ds_page-header',
             className
-        ].join(' ')} {...props}>
+        ])} {...props}>
             {label && <span className="ds_page-header__label  ds_content-label">{label}</span>}
             <h1 id={titleId} className="ds_page-header__title">{title}</h1>
 

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

@@ -0,0 +1,5 @@
+export interface PageHeaderProps extends React.AllHTMLAttributes<HTMLHeadingElement> {
+    label?: string;
+    title: string;
+    titleId?: string;
+}

package/dist/components/PageHeader/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -1,8 +1,9 @@
+import { MetdataItemProps, MetadataProps } from "./types";
 declare const Metadata: {
-    ({ children, className, isInline, ...props }: SGDS.Component.Metadata): import("react").JSX.Element;
+    ({ children, className, isInline, ...props }: MetadataProps): import("react").JSX.Element;
     displayName: string;
     Item: {
-        ({ children, className, name, ...props }: SGDS.Component.Metadata.Item): import("react").JSX.Element;
+        ({ children, className, name, ...props }: MetdataItemProps): import("react").JSX.Element;
         displayName: string;
     };
 };

package/dist/components/PageMetadata/PageMetadata.jsx

@@ -1,10 +1,14 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+const clsx_1 = __importDefault(require("clsx"));
 const MetadataItem = ({ children, className, name, ...props }) => {
-    return (<div className={[
+    return (<div className={(0, clsx_1.default)([
             'ds_metadata__item',
             className
-        ].join(' ')} {...props}>
+        ])} {...props}>
             <dt className="ds_metadata__key">{name}</dt>{' '}
             <dd className="ds_metadata__value">
                 {children}{' '}
@@ -12,11 +16,11 @@ const MetadataItem = ({ children, className, name, ...props }) => {
         </div>);
 };
 const Metadata = ({ children, className, isInline, ...props }) => {
-    return (<dl className={[
+    return (<dl className={(0, clsx_1.default)([
             'ds_metadata',
             isInline && 'ds_metadata--inline',
             className
-        ].join(' ')} {...props}>
+        ])} {...props}>
             {children}
         </dl>);
 };

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

@@ -0,0 +1,6 @@
+export interface MetdataItemProps extends React.AllHTMLAttributes<HTMLElement> {
+    name: string;
+}
+export interface MetadataProps extends React.AllHTMLAttributes<HTMLDListElement> {
+    isInline?: boolean;
+}

package/dist/components/PageMetadata/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -1,7 +1,8 @@
-export declare const Page: ({ ariaLabel, children, className, href, isCurrent, linkComponent, onClick }: SGDS.Component.Pagination.Page) => import("react").JSX.Element;
+import { PaginationPageProps, PaginationProps } from "./types";
+export declare const Page: ({ ariaLabel, children, className, href, isCurrent, linkComponent, onClick }: PaginationPageProps) => 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;
+    ({ ariaLabel, className, onClick, padding, page, pattern, totalPages, linkComponent, ...props }: PaginationProps): import("react").JSX.Element;
     displayName: string;
 };
 export default Pagination;

package/dist/components/Pagination/Pagination.jsx

@@ -5,18 +5,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Ellipsis = exports.Page = void 0;
 const Icon_1 = __importDefault(require("../../common/Icon"));
+const clsx_1 = __importDefault(require("clsx"));
 const Page = ({ ariaLabel, children, className, href, isCurrent = false, linkComponent, onClick }) => {
     function handleClick(event) {
+        /* istanbul ignore else */
         if (typeof onClick === 'function') {
             onClick(event);
         }
     }
     function processChildren(children) {
-        const classNames = [
+        const classNames = (0, clsx_1.default)([
             'ds_pagination__link',
             className,
-            isCurrent ? 'ds_current' : undefined
-        ].join(' ');
+            isCurrent && 'ds_current'
+        ]);
         const linkProps = {
             'aria-label': ariaLabel,
             href: href,
@@ -77,10 +79,10 @@ const Pagination = ({ ariaLabel = 'Pages', className, onClick, padding = 1, page
     if ((page + padding < totalPages - 1)) {
         includeLast = true;
     }
-    return (<nav className={[
+    return (<nav className={(0, clsx_1.default)([
             'ds_pagination',
             className
-        ].join(' ')} aria-label={ariaLabel} {...props}>
+        ])} aria-label={ariaLabel} {...props}>
             <ul className="ds_pagination__list">
                 {page > 1 && (<exports.Page ariaLabel="Previous page" className="ds_pagination__link--text  ds_pagination__link--icon" data-search="pagination-previous" href={pattern.replace('$1', String(page - 1))} onClick={onClick}>
                         <Icon_1.default icon="ChevronLeft"/>

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

@@ -0,0 +1,18 @@
+import { LinkComponent } from '../../shared-types';
+export interface PaginationPageProps extends React.AllHTMLAttributes<HTMLElement> {
+    ariaLabel: React.AriaAttributes['aria-label'];
+    isCurrent?: boolean;
+    href: string;
+    linkComponent?: LinkComponent;
+    onClick?: React.EventHandler<React.FormEvent>;
+}
+export interface PaginationProps extends React.AllHTMLAttributes<HTMLElement> {
+    ariaLabel: React.AriaAttributes['aria-label'];
+    className?: string;
+    linkComponent?: LinkComponent;
+    onClick?: React.EventHandler<React.FormEvent>;
+    padding: number;
+    page: number;
+    pattern: string;
+    totalPages: number;
+}

package/dist/components/Pagination/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

package/dist/components/PhaseBanner/PhaseBanner.jsx

@@ -4,11 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const Tag_1 = __importDefault(require("../Tag/Tag"));
+const clsx_1 = __importDefault(require("clsx"));
 const PhaseBanner = ({ children, className, phaseName, ...props }) => {
-    return (<div className={[
+    return (<div className={(0, clsx_1.default)([
             'ds_phase-banner',
             className
-        ].join(' ')} {...props}>
+        ])} {...props}>
             <div className="ds_wrapper">
                 <p className="ds_phase-banner__content">
                     {phaseName && <Tag_1.default className="ds_phase-banner__tag">{phaseName}</Tag_1.default>}

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

@@ -0,0 +1,3 @@
+export interface PhaseBannerProps extends React.AllHTMLAttributes<HTMLDivElement> {
+    phaseName: string;
+}

package/dist/components/PhaseBanner/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

package/dist/components/Question/Question.jsx

@@ -6,14 +6,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const ErrorMessage_1 = __importDefault(require("../ErrorMessage"));
 const HintText_1 = __importDefault(require("../../common/HintText"));
 const WrapperTag_1 = __importDefault(require("../../common/WrapperTag"));
+const clsx_1 = __importDefault(require("clsx"));
 const Question = function ({ children, className, errorMessage, hasError, hintText, legend, tagName = 'div', ...props }) {
-    return (<WrapperTag_1.default tagName={tagName} className={[
+    return (<WrapperTag_1.default tagName={tagName} className={(0, clsx_1.default)([
             'ds_question',
             hasError && 'ds_question--error',
             className
-        ].join(' ')} {...props}>
+        ])} {...props}>
             {legend && <legend>{legend}</legend>}
-            {hintText && <HintText_1.default text={hintText}/>}
+            {hintText && <HintText_1.default>{hintText}</HintText_1.default>}
             {hasError && errorMessage && <ErrorMessage_1.default>{errorMessage}</ErrorMessage_1.default>}
             {children}
         </WrapperTag_1.default>);

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

@@ -0,0 +1,9 @@
+type QuestionTags = 'div' | 'fieldset';
+export interface QuestionProps extends React.AllHTMLAttributes<HTMLElement> {
+    errorMessage?: string | React.ReactNode;
+    hasError?: boolean;
+    hintText?: string | React.ReactNode;
+    legend?: string;
+    tagName: QuestionTags;
+}
+export {};

package/dist/components/Question/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

package/dist/components/RadioButton/RadioButton.jsx

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const HintText_1 = __importDefault(require("../../common/HintText"));
 const context_1 = require("../../utils/context");
+const clsx_1 = __importDefault(require("clsx"));
 const RadioButton = ({ checked, hintText, id, isSmall, label, name, onBlur, onChange }) => {
     const hintTextId = `hint-text-${id}`;
     function handleBlur(event) {
@@ -20,13 +21,13 @@ const RadioButton = ({ checked, hintText, id, isSmall, label, name, onBlur, onCh
     }
     isSmall = isSmall || (0, react_1.useContext)(context_1.CheckboxRadioContext).isSmall;
     name = name || (0, react_1.useContext)(context_1.CheckboxRadioContext).name;
-    return (<div className={[
+    return (<div className={(0, clsx_1.default)([
             'ds_radio',
             isSmall && 'ds_radio--small'
-        ].join(' ')}>
+        ])}>
             <input aria-describedby={hintText ? hintTextId : undefined} className="ds_radio__input" defaultChecked={!!checked} id={id} name={name} onBlur={handleBlur} onChange={handleChange} type="radio"/>
             <label className="ds_radio__label" htmlFor={id}>{label}</label>
-            {hintText && <HintText_1.default id={hintTextId} text={hintText}/>}
+            {hintText && <HintText_1.default id={hintTextId}>{hintText}</HintText_1.default>}
         </div>);
 };
 RadioButton.displayName = 'RadioButton';

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

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

package/dist/components/RadioButton/RadioGroup.jsx

@@ -5,13 +5,14 @@ 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 clsx_1 = __importDefault(require("clsx"));
 const RadioGroup = ({ children, className, isInline, isSmall, name = '', ...props }) => {
-    return (<div className={[
+    return (<div className={(0, clsx_1.default)([
             'ds_radios',
             'ds_field-group',
             isInline && 'ds_field-group--inline',
             className
-        ].join(' ')} {...props}>
+        ])} {...props}>
             <context_1.CheckboxRadioContext value={{ isSmall: !!isSmall, name }}>
                 {children}
             </context_1.CheckboxRadioContext>

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

@@ -0,0 +1,10 @@
+import { CheckboxRadioBase } from "../../shared-types";
+export interface RadioGroupProps extends React.AllHTMLAttributes<HTMLElement> {
+    isInline?: boolean;
+    name?: string;
+    isSmall?: boolean;
+}
+export interface RadioButtonProps extends CheckboxRadioBase<HTMLInputElement> {
+    id: string;
+    name?: string;
+}

package/dist/components/RadioButton/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

package/dist/components/SearchFacets/SearchFacets.jsx

@@ -39,6 +39,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const Icon_1 = __importDefault(require("../../common/Icon"));
 const icons_1 = require("../../../src/images/icons");
+const clsx_1 = __importDefault(require("clsx"));
 const FacetsItem = ({ accessibleName, joinContent, onClick, title, ...props }) => {
     accessibleName = accessibleName ? accessibleName : title;
     return (<dd className="ds_facet-wrapper" {...props}>
@@ -78,10 +79,10 @@ const Facets = ({ children, className, ...props }) => {
     react_1.Children.forEach(children, child => {
         processChild(child);
     });
-    return (<div className={[
+    return (<div className={(0, clsx_1.default)([
             "ds_facets",
             className
-        ].join(' ')} {...props}>
+        ])} {...props}>
             <p className="visually-hidden">There {facetCount === 1 ? 'is' : 'are'} {facetCount} search {facetCount === 1 ? 'filter' : 'filters'} applied</p>
             <dl className="ds_facets__list">
                 {children}

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

@@ -0,0 +1,12 @@
+export interface SearchFacetsGroupProps extends React.AllHTMLAttributes<HTMLElement> {
+    joinContent?: string;
+    title: string;
+}
+export interface SearchFacetsItemProps extends React.AllHTMLAttributes<HTMLElement> {
+    accessibleName?: string;
+    joinContent?: string;
+    title: string;
+}
+export interface SearchFacetsProps extends React.AllHTMLAttributes<HTMLElement> {
+    headingId?: string;
+}

package/dist/components/SearchFacets/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/SearchFilters/SearchFilters.d.ts

@@ -1,15 +1,16 @@
+import { SearchFiltersPanelProps, SearchFiltersCheckboxGroupProps, SearchFiltersProps } from "./types";
 export declare const FilterPanel: {
-    ({ activeFilterCount, children, isScrollable, legend, heading, ...props }: SGDS.Component.SearchFilters.Panel): import("react").JSX.Element;
+    ({ activeFilterCount, children, isScrollable, legend, heading, ...props }: SearchFiltersPanelProps): import("react").JSX.Element;
     displayName: string;
 };
 declare const Filters: {
-    ({ children, searchResultsContainerId, ...props }: SGDS.Component.SearchFilters): import("react").JSX.Element;
+    ({ children, searchResultsContainerId, ...props }: SearchFiltersProps): import("react").JSX.Element;
     Panel: {
-        ({ activeFilterCount, children, isScrollable, legend, heading, ...props }: SGDS.Component.SearchFilters.Panel): import("react").JSX.Element;
+        ({ activeFilterCount, children, isScrollable, legend, heading, ...props }: SearchFiltersPanelProps): import("react").JSX.Element;
         displayName: string;
     };
     CheckboxGroup: {
-        ({ children, ...props }: any): import("react").JSX.Element;
+        ({ children, ...props }: SearchFiltersCheckboxGroupProps): import("react").JSX.Element;
         displayName: string;
     };
 };

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

@@ -0,0 +1,12 @@
+export interface SearchFiltersPanelProps extends React.AllHTMLAttributes<HTMLElement> {
+    activeFilterCount?: number;
+    heading: string | React.ReactNode;
+    isScrollable?: boolean;
+    legend: string;
+}
+export interface SearchFiltersCheckboxGroupProps {
+    children: React.ReactNode;
+}
+export interface SearchFiltersProps extends React.AllHTMLAttributes<HTMLElement> {
+    searchResultsContainerId?: string;
+}

package/dist/components/SearchFilters/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/SearchResult/SearchResult.d.ts

@@ -1,27 +1,24 @@
+import { SearchResultContextProps, SearchResultProps } from './types';
 declare const SearchResult: {
-    ({ children, href, isPromoted, linkComponent, promotedTitle, title, ...props }: SGDS.Component.SearchResult): import("react").JSX.Element;
+    ({ children, href, isPromoted, linkComponent, promotedTitle, title, ...props }: SearchResultProps): import("react").JSX.Element;
     Content: {
-        ({ children }: SGDS.Component.SearchResult.Content): import("react").JSX.Element;
+        ({ children }: React.AllHTMLAttributes<HTMLElement>): import("react").JSX.Element;
         displayName: string;
     };
     Context: {
-        ({ children, title }: SGDS.Component.SearchResult.Context): import("react").JSX.Element;
+        ({ children, title }: SearchResultContextProps): import("react").JSX.Element;
         displayName: string;
     };
     ContextItem: {
-        ({ children }: SGDS.Component.SearchResult.ContextItem): import("react").JSX.Element;
+        ({ children }: React.AllHTMLAttributes<HTMLElement>): import("react").JSX.Element;
         displayName: string;
     };
     Media: {
-        ({ children }: SGDS.Component.SearchResult.Media): import("react").JSX.Element;
+        ({ children }: React.AllHTMLAttributes<HTMLElement>): import("react").JSX.Element;
         displayName: string;
     };
-    Meta: {
-        ({ children }: SGDS.Component.SearchResult.Meta): import("react").JSX.Element;
-        displayName: string;
-    };
-    MetaItem: {
-        ({ children, className, name, ...props }: SGDS.Component.Metadata.Item): import("react").JSX.Element;
+    Metadata: {
+        ({ children }: React.AllHTMLAttributes<HTMLElement>): import("react").JSX.Element;
         displayName: string;
     };
 };

package/dist/components/SearchResult/SearchResult.jsx

@@ -7,6 +7,7 @@ const react_1 = require("react");
 const ConditionalWrapper_1 = __importDefault(require("../../common/ConditionalWrapper"));
 const AspectBox_1 = __importDefault(require("../AspectBox"));
 const PageMetadata_1 = __importDefault(require("../PageMetadata"));
+const clsx_1 = __importDefault(require("clsx"));
 const SearchResultLinkHrefContext = (0, react_1.createContext)('');
 const SearchResultContent = ({ children }) => {
     const otherChildren = [];
@@ -58,10 +59,10 @@ const SearchResultMeta = ({ children }) => {
 };
 const SearchResult = ({ children, href, isPromoted, linkComponent, promotedTitle = 'Recommended', title, ...props }) => {
     const LINK_CLASS = 'ds_search-result__link';
-    return (<div className={[
+    return (<div className={(0, clsx_1.default)([
             'ds_search-result',
-            isPromoted ? 'ds_search-result--promoted' : ''
-        ].join(' ')} {...props}>
+            isPromoted && 'ds_search-result--promoted'
+        ])} {...props}>
             <ConditionalWrapper_1.default condition={!!isPromoted} wrapper={(children) => <div className="ds_search-result--promoted-content">
                     <header className="ds_search-result--promoted-title">{promotedTitle}</header>
                     {children}
@@ -82,12 +83,10 @@ SearchResult.Content = SearchResultContent;
 SearchResult.Context = SearchResultContext;
 SearchResult.ContextItem = SearchResultContextItem;
 SearchResult.Media = SearchResultMedia;
-SearchResult.Meta = SearchResultMeta;
-SearchResult.MetaItem = PageMetadata_1.default.Item;
+SearchResult.Metadata = SearchResultMeta;
 SearchResultContent.displayName = 'SearchResult.Content';
 SearchResultContext.displayName = 'SearchResult.Context';
 SearchResultContextItem.displayName = 'SearchResult.ContextItem';
 SearchResultMedia.displayName = 'SearchResult.Media';
-SearchResultMeta.displayName = 'SearchResult.Meta';
-SearchResult.MetaItem.displayName = 'SearchResult.MetaItem';
+SearchResultMeta.displayName = 'SearchResult.Metadata';
 exports.default = SearchResult;

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

@@ -0,0 +1,11 @@
+import { LinkComponent } from "../../shared-types";
+export interface SearchResultContextProps extends React.AllHTMLAttributes<HTMLDListElement> {
+    title: string;
+}
+export interface SearchResultProps extends React.AllHTMLAttributes<HTMLElement> {
+    href: string;
+    isPromoted?: boolean;
+    linkComponent?: LinkComponent;
+    promotedTitle?: string;
+    title: string;
+}

package/dist/components/SearchResult/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/SearchSort/SearchSort.d.ts

@@ -1,6 +1,7 @@
 import { AllHTMLAttributes } from "react";
+import { SearchSortProps } from "./types";
 declare const SearchSort: {
-    ({ children, className, id, label, onApply, ...props }: SGDS.Component.SearchSort): import("react").JSX.Element;
+    ({ children, className, id, label, onApply, ...props }: SearchSortProps): import("react").JSX.Element;
     displayName: string;
     Option: {
         ({ children, value }: AllHTMLAttributes<HTMLOptionElement>): import("react").JSX.Element;

package/dist/components/SearchSort/SearchSort.jsx

@@ -5,16 +5,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const Button_1 = __importDefault(require("../Button"));
 const Select_1 = __importDefault(require("../Select"));
+const clsx_1 = __importDefault(require("clsx"));
 const Option = ({ children, value }) => {
     return (<option value={value}>
             {children}
         </option>);
 };
 const SearchSort = ({ children, className, id = 'sort-by', label = 'Sort by', onApply, ...props }) => {
-    return (<div className={[
+    return (<div className={(0, clsx_1.default)([
             'ds_sort-options',
             className
-        ].join(' ')} {...props}>
+        ])} {...props}>
             <Select_1.default id={id} label={label}>
                 {children}
             </Select_1.default>

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

@@ -0,0 +1,7 @@
+export interface SearchSortProps extends React.AllHTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+    className?: string;
+    id?: string;
+    label?: string;
+    onApply?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}

package/dist/components/SearchSort/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/Select/Select.d.ts

@@ -1,5 +1,6 @@
+import { SelectProps } from './types';
 declare const Select: {
-    ({ children, className, defaultValue, errorMessage, hasError, hintText, id, label, name, onBlur, onChange, placeholder, width, ...props }: SGDS.Component.Select): import("react").JSX.Element;
+    ({ children, className, defaultValue, errorMessage, hasError, hintText, id, label, name, onBlur, onChange, placeholder, width, ...props }: SelectProps): import("react").JSX.Element;
     displayName: string;
 };
 export default Select;

package/dist/components/Select/Select.jsx

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const ErrorMessage_1 = __importDefault(require("../ErrorMessage"));
 const HintText_1 = __importDefault(require("../../common/HintText"));
+const clsx_1 = __importDefault(require("clsx"));
 const Select = function ({ children, className, defaultValue, errorMessage, hasError, hintText, id, label, name, onBlur, onChange, placeholder, width, ...props }) {
     const errorMessageId = `error-message-${id}`;
     const hintTextId = `hint-text-${id}`;
@@ -29,14 +30,14 @@ const Select = function ({ children, className, defaultValue, errorMessage, hasE
     }
     return (<>
             <label className="ds_label" htmlFor={id}>{label}</label>
-            {hintText && <HintText_1.default id={hintTextId} text={hintText}/>}
+            {hintText && <HintText_1.default id={hintTextId}>{hintText}</HintText_1.default>}
             {errorMessage && <ErrorMessage_1.default id={errorMessageId}>{errorMessage}</ErrorMessage_1.default>}
-            <div className={[
+            <div className={(0, clsx_1.default)([
             "ds_select-wrapper",
             hasError && 'ds_input--error',
             width && `ds_input--${width}`,
             className
-        ].join(' ')} {...props}>
+        ])} {...props}>
                 <select aria-describedby={describedbys.join(' ')} aria-invalid={hasError} className="ds_select" defaultValue={defaultValue} id={id} name={name || id} onBlur={handleBlur} onChange={handleChange}>
                     <option value="">{placeholder}</option>
                     {children}