@scottish-government/designsystem-react 0.7.0 → 0.8.0-beta.0

package/dist/components/page-metadata/page-metadata.jsx

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const MetadataItem = ({ children, className, name, ...props }) => {
-    return (<div className={[
-            'ds_metadata__item',
-            className
-        ].join(' ')} {...props}>
-            <dt className="ds_metadata__key">{name}</dt>{' '}
-            <dd className="ds_metadata__value">
-                {children}
-            </dd>
-        </div>);
-};
-const Metadata = ({ children, className, inline, ...props }) => {
-    return (<dl className={[
-            'ds_metadata',
-            inline && 'ds_metadata--inline',
-            className
-        ].join(' ')} {...props}>
-            {children}
-        </dl>);
-};
-Metadata.displayName = 'Metadata';
-MetadataItem.displayName = 'Metadata.Item';
-Metadata.Item = MetadataItem;
-exports.default = Metadata;

package/dist/components/pagination/pagination.jsx

@@ -1,97 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Ellipsis = exports.Page = void 0;
-const icon_1 = __importDefault(require("../../common/icon"));
-const Page = ({ ariaLabel, current = false, href, onClick, text }) => {
-    function handleClick(event) {
-        if (typeof onClick === 'function') {
-            onClick(event);
-        }
-    }
-    return (<li className="ds_pagination__item">
-            <a aria-label={ariaLabel} className={[
-            'ds_pagination__link',
-            current ? 'ds_current' : undefined
-        ].join(' ')} href={href} aria-current={current ? "page" : undefined} onClick={handleClick}>
-                <span className="ds_pagination__link-label">{text}</span>
-            </a>
-        </li>);
-};
-exports.Page = Page;
-const Ellipsis = () => {
-    return (<li className="ds_pagination__item" aria-hidden="true">
-            <span className="ds_pagination__link  ds_pagination__link--ellipsis">&hellip;</span>
-        </li>);
-};
-exports.Ellipsis = Ellipsis;
-const Pagination = ({ ariaLabel = 'Pages', className, onClick, padding = 1, page = 1, pattern = '/search?page=$1', totalPages, ...props }) => {
-    padding = Number(padding);
-    page = Number(page);
-    const minToShow = padding + 2;
-    let includeFirst, includeLast;
-    let pages = [];
-    if (page <= minToShow) {
-        for (let i = 1; i <= minToShow + 1; i++) {
-            pages.push(Number(i));
-        }
-    }
-    else if (page <= totalPages - minToShow) {
-        pages = [page];
-        for (let i = 0; i < padding; i++) {
-            pages.unshift(page - 1 - i);
-            pages.push(Number(page) + 1 + i);
-        }
-    }
-    else {
-        for (let i = totalPages; i > totalPages - minToShow - 1; i--) {
-            pages.push(Number(i));
-        }
-        pages.reverse();
-    }
-    // filter out pages that are out of bounds
-    pages = pages.filter(item => item > 0 && item <= totalPages);
-    if ((page - padding) > 2) {
-        includeFirst = true;
-    }
-    if ((page + padding < totalPages - 1)) {
-        includeLast = true;
-    }
-    return (<nav className={[
-            'ds_pagination',
-            className
-        ].join(' ')} aria-label={ariaLabel} {...props}>
-            <ul className="ds_pagination__list">
-                {page > 1 && (<li className="ds_pagination__item">
-                        <a aria-label="Previous page" className="ds_pagination__link  ds_pagination__link--text  ds_pagination__link--icon" href={pattern.replace('$1', String(page - 1))} data-search="pagination-previous" onClick={onClick}>
-                            <icon_1.default icon="ChevronLeft"/>
-                            <span className="ds_pagination__link-label">Previous</span>
-                        </a>
-                    </li>)}
-
-                {includeFirst && (<>
-                        <exports.Page ariaLabel="Page 1" href={pattern.replace('$1', String(1))} onClick={onClick} text="1"/>
-                        <exports.Ellipsis />
-                    </>)}
-
-                {pages && pages.map((item, index) => (<exports.Page ariaLabel={`Page ${item}`} current={item === page} href={pattern.replace('$1', String(item))} key={`pagination${index}`} onClick={onClick} pattern={pattern} text={item.toString()}/>))}
-
-                {includeLast && (<>
-                        <exports.Ellipsis />
-                        <exports.Page ariaLabel={`Page ${totalPages}`} href={pattern.replace('$1', String(totalPages))} onClick={onClick} pattern={pattern} text={totalPages.toString()}/>
-                    </>)}
-
-                {page < totalPages && (<li className="ds_pagination__item">
-                        <a aria-label="Next page" className="ds_pagination__link  ds_pagination__link--text  ds_pagination__link--icon" href={pattern.replace('$1', String(page + 1))} data-search="pagination-next" onClick={onClick}>
-                            <span className="ds_pagination__link-label">Next</span>
-                            <icon_1.default icon="ChevronRight"/>
-                        </a>
-                    </li>)}
-
-            </ul>
-        </nav>);
-};
-Pagination.displayName = 'Pagination';
-exports.default = Pagination;

package/dist/components/phase-banner/phase-banner.jsx

@@ -1,23 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const tag_1 = __importDefault(require("../tag/tag"));
-const PhaseBanner = ({ children, className, content, phaseName, ...props }) => {
-    return (<div className={[
-            'ds_phase-banner',
-            className
-        ].join(' ')} {...props}>
-            <div className="ds_wrapper">
-                <p className="ds_phase-banner__content">
-                    {phaseName && <tag_1.default title={phaseName} className="ds_phase-banner__tag"/>}
-                    <span className="ds_phase-banner__text">
-                        {content ? content : children || "This is a new service"}
-                    </span>
-                </p>
-            </div>
-        </div>);
-};
-PhaseBanner.displayName = 'PhaseBanner';
-exports.default = PhaseBanner;

package/dist/components/question/question.jsx

@@ -1,22 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const error_message_1 = __importDefault(require("../error-message/error-message"));
-const hint_text_1 = __importDefault(require("../../common/hint-text"));
-const wrapper_tag_1 = __importDefault(require("../../common/wrapper-tag"));
-const Question = function ({ children, className, error, errorMessage, hintText, legend, tagName = 'div', ...props }) {
-    return (<wrapper_tag_1.default tagName={tagName} className={[
-            'ds_question',
-            error && 'ds_question--error',
-            className
-        ].join(' ')} {...props}>
-            {legend && <legend>{legend}</legend>}
-            {hintText && <hint_text_1.default text={hintText}/>}
-            {error && errorMessage && <error_message_1.default text={errorMessage}/>}
-            {children}
-        </wrapper_tag_1.default>);
-};
-Question.displayName = 'Question';
-exports.default = Question;

package/dist/components/radio-button/radio-button.jsx

@@ -1,43 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Radio = void 0;
-const hint_text_1 = __importDefault(require("../../common/hint-text"));
-const Radio = ({ checked, hintText, id, label, name, onBlur, onChange, small }) => {
-    const hintTextId = `hint-text-${id}`;
-    function handleBlur(event) {
-        if (typeof onBlur === 'function') {
-            onBlur(event);
-        }
-    }
-    function handleChange(event) {
-        if (typeof onChange === 'function') {
-            onChange(event);
-        }
-    }
-    return (<div className={[
-            'ds_radio',
-            small && '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 && <hint_text_1.default id={hintTextId} text={hintText}/>}
-        </div>);
-};
-exports.Radio = Radio;
-const RadioGroup = ({ className, inline, items, name, small, ...props }) => {
-    return (<div className={[
-            'ds_radios',
-            'ds_field-group',
-            inline && 'ds_field-group--inline',
-            className
-        ].join(' ')} {...props}>
-
-            {items && items.map((item, index) => (<exports.Radio checked={item.checked} hintText={item.hintText} id={item.id} key={'radio' + index} label={item.label} name={name} onBlur={item.onBlur} onChange={item.onChange} small={small || item.small}/>))}
-        </div>);
-};
-exports.Radio.displayName = 'Radio';
-RadioGroup.displayName = 'RadioGroup';
-exports.default = RadioGroup;

package/dist/components/select/select.jsx

@@ -1,52 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const error_message_1 = __importDefault(require("../error-message/error-message"));
-const hint_text_1 = __importDefault(require("../../common/hint-text"));
-const Option = function ({ text, value }) {
-    return (<option value={value}>{text}</option>);
-};
-const Select = function ({ className, defaultValue, error, errorMessage, hintText, id, label, name, onBlur, onChange, options, placeholder, width, ...props }) {
-    const errorMessageId = `error-message-${id}`;
-    const hintTextId = `hint-text-${id}`;
-    const describedbys = [];
-    if (hintText) {
-        describedbys.push(hintTextId);
-    }
-    ;
-    if (errorMessage) {
-        describedbys.push(errorMessageId);
-    }
-    ;
-    function handleBlur(event) {
-        if (typeof onBlur === 'function') {
-            onBlur(event);
-        }
-    }
-    function handleChange(event) {
-        if (typeof onChange === 'function') {
-            onChange(event);
-        }
-    }
-    return (<>
-            <label className="ds_label" htmlFor={id}>{label}</label>
-            {hintText && <hint_text_1.default id={hintTextId} text={hintText}/>}
-            {errorMessage && <error_message_1.default id={errorMessageId} text={errorMessage}/>}
-            <div className={[
-            "ds_select-wrapper",
-            error && 'ds_input--error',
-            width && `ds_input--${width}`,
-            className
-        ].join(' ')} {...props}>
-                <select aria-describedby={describedbys.join(' ')} aria-invalid={error} className="ds_select" defaultValue={defaultValue} id={id} name={name || id} onBlur={handleBlur} onChange={handleChange}>
-                    <option value="">{placeholder}</option>
-                    {options && options.map((option, index) => (<Option value={option.value} text={option.text} key={`option-${index}`}/>))}
-                </select>
-                <span className="ds_select-arrow" aria-hidden="true"></span>
-            </div>
-        </>);
-};
-Select.displayName = 'Select';
-exports.default = Select;

package/dist/components/sequential-navigation/sequential-navigation.jsx

@@ -1,31 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const NextLink = ({ href, title }) => {
-    return (<div className="ds_sequential-nav__item  ds_sequential-nav__item--next">
-            <a href={href} className="ds_sequential-nav__button  ds_sequential-nav__button--right">
-                <span className="ds_sequential-nav__text" data-label="Next">
-                    {title}
-                </span>
-            </a>
-        </div>);
-};
-const PrevLink = ({ href, title, }) => {
-    return (<div className="ds_sequential-nav__item  ds_sequential-nav__item--prev">
-            <a href={href} className="ds_sequential-nav__button  ds_sequential-nav__button--left">
-                <span className="ds_sequential-nav__text" data-label="Previous">
-                    {title}
-                </span>
-            </a>
-        </div>);
-};
-const SequentialNavigation = ({ ariaLabel = 'Article navigation', className, next, previous, ...props }) => {
-    return (<nav className={[
-            'ds_sequential-nav',
-            className
-        ].join(' ')} aria-label={ariaLabel} {...props}>
-            {previous && <PrevLink href={previous.href} title={previous.title}></PrevLink>}
-            {next && <NextLink href={next.href} title={next.title}></NextLink>}
-        </nav>);
-};
-SequentialNavigation.displayName = 'SequentialNavigation';
-exports.default = SequentialNavigation;

package/dist/components/side-navigation/side-navigation.jsx

@@ -1,52 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Link = exports.List = void 0;
-const react_1 = require("react");
-// @ts-ignore
-const side_navigation_1 = __importDefault(require("@scottish-government/design-system/src/components/side-navigation/side-navigation"));
-const List = function ({ items, root }) {
-    return (<ul className="ds_side-navigation__list" id={root ? 'side-navigation-root' : undefined}>
-            {items && items.map((item, index) => (<exports.Link title={item.title} href={item.href} items={item.items} current={item.current} key={'sidenavitem' + index}/>))}
-        </ul>);
-};
-exports.List = List;
-const Link = function ({ current = false, href, items, title }) {
-    return (<li className={[
-            'ds_side-navigation__item',
-            items && 'ds_side-navigation__item--has-children'
-        ].join(' ')}>
-            {current ?
-            <span className="ds_side-navigation__link  ds_current">{title}</span> :
-            <a href={href} className="ds_side-navigation__link">{title}</a>}
-
-            {items && <exports.List items={items}/>}
-        </li>);
-};
-exports.Link = Link;
-const SideNavigation = function ({ children, className, items, ...props }) {
-    const ref = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        if (ref.current) {
-            new side_navigation_1.default(ref.current).init();
-        }
-    }, [ref]);
-    return (<nav aria-label="Sections" className={[
-            'ds_side-navigation',
-            className
-        ].join(' ')} data-module="ds-side-navigation" ref={ref} {...props}>
-            <input type="checkbox" className="fully-hidden  js-toggle-side-navigation" id="show-side-navigation" aria-controls="side-navigation-root"/>
-            <label className="ds_side-navigation__expand  ds_link" htmlFor="show-side-navigation">
-                <span className="visually-hidden">Show all</span> Pages in this section
-                <span className="ds_side-navigation__expand-indicator"></span>
-            </label>
-
-            {items && <exports.List root items={items}/>}
-        </nav>);
-};
-SideNavigation.displayName = 'SideNavigation';
-exports.Link.displayName = 'SideNavLink';
-exports.List.displayName = 'SideNavList';
-exports.default = SideNavigation;

package/dist/components/site-header/site-header.jsx

@@ -1,68 +0,0 @@
-'use client';
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
-const icon_1 = __importDefault(require("../../common/icon"));
-const phase_banner_1 = __importDefault(require("../phase-banner/phase-banner"));
-const site_navigation_1 = __importDefault(require("../site-navigation/site-navigation"));
-const site_search_1 = __importDefault(require("../site-search/site-search"));
-// @ts-ignore
-const site_navigation_2 = __importDefault(require("@scottish-government/design-system/src/components/site-navigation/site-navigation"));
-const SiteHeader = ({ logo = {}, navigationItems, phaseBanner, siteSearch, siteTitle, ...props }) => {
-    const mobileMenuRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        if (mobileMenuRef.current) {
-            new site_navigation_2.default(mobileMenuRef.current).init();
-        }
-    }, [mobileMenuRef]);
-    return (<header className="ds_site-header" {...props}>
-            <div className="ds_wrapper">
-                <div className="ds_site-header__content">
-                    <div className="ds_site-branding">
-                        {logo &&
-            <a className="ds_site-branding__logo  ds_site-branding__link" href={logo.href ? logo.href : '/'}>
-                                <img className="ds_site-branding__logo-image" src={logo.src} alt={logo.alt}/>
-                            </a>}
-
-                        {siteTitle && <div className="ds_site-branding__title">
-                            {siteTitle}
-                        </div>}
-                    </div>
-
-                    {navigationItems &&
-            <div className="ds_site-header__controls">
-                            <label aria-controls="mobile-navigation" className="ds_site-header__control  js-toggle-menu" htmlFor="menu">
-                                <span className="ds_site-header__control-text">Menu</span>
-                                <icon_1.default fill className="ds_site-header__control-icon" icon="Menu" aria-hidden="true"/>
-                                <icon_1.default fill className="ds_site-header__control-icon  ds_site-header__control-icon--active-icon" icon="Close" aria-hidden="true"/>
-                            </label>
-                        </div>}
-
-                    {navigationItems &&
-            <input className="ds_site-navigation__toggle" id="menu" type="checkbox"/>}
-                    {navigationItems &&
-            <site_navigation_1.default id="mobile-navigation" className="ds_site-navigation--mobile" items={navigationItems} ref={mobileMenuRef}/>}
-
-                    {siteSearch &&
-            <site_search_1.default className="ds_site-header__search" {...siteSearch}/>}
-                </div>
-            </div>
-
-            {phaseBanner &&
-            <phase_banner_1.default phaseName={phaseBanner.phaseName}>
-                    {phaseBanner.content}
-                </phase_banner_1.default>}
-
-            {navigationItems &&
-            <div className="ds_site-header__navigation">
-                    <div className="ds_wrapper">
-                        <site_navigation_1.default items={navigationItems}/>
-                    </div>
-                </div>}
-        </header>);
-};
-SiteHeader.displayName = 'SiteHeader';
-exports.default = SiteHeader;

package/dist/components/site-navigation/site-navigation.jsx

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const SiteNavLink = ({ current = false, href, title }) => {
-    return (<li className="ds_site-navigation__item">
-            <a href={href} className={[
-            'ds_site-navigation__link',
-            current ? 'ds_current' : undefined
-        ].join(' ')}>{title}</a>
-        </li>);
-};
-const SiteNavigation = ({ className, items, ...props }) => {
-    return (<nav className={[
-            'ds_site-navigation',
-            className
-        ].join(' ')} {...props}>
-            <ul className="ds_site-navigation__list">
-                {items && items.map((item, index) => (<SiteNavLink current={item.current} href={item.href} title={item.title} key={`link-${index}`}/>))}
-            </ul>
-        </nav>);
-};
-SiteNavigation.displayName = 'SiteNavigation';
-exports.default = SiteNavigation;

package/dist/components/site-search/site-search.jsx

@@ -1,55 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
-// @ts-ignore
-const autocomplete_1 = __importDefault(require("@scottish-government/design-system/src/components/autocomplete/autocomplete"));
-const button_1 = __importDefault(require("../button/button"));
-const SiteSearch = function ({ action = '/search', autocompleteEndpoint, autocompleteSuggestionMappingFunction, className, id = 'site-search', method = 'GET', minLength = 3, name = 'q', placeholder = 'Search', ...props }) {
-    const ref = (0, react_1.useRef)(null);
-    const hasAutocomplete = !!autocompleteEndpoint;
-    let autocompleteId = hasAutocomplete ? id + '-autocomplete' : '';
-    (0, react_1.useEffect)(() => {
-        if (hasAutocomplete && ref.current) {
-            const options = {};
-            if (minLength) {
-                options.minLength = minLength;
-            }
-            if (autocompleteSuggestionMappingFunction) {
-                options.suggestionMappingFunction = autocompleteSuggestionMappingFunction;
-            }
-            const autocomplete = new autocomplete_1.default(document.getElementById(autocompleteId), autocompleteEndpoint, options);
-            autocomplete.init();
-        }
-    }, [ref, autocompleteEndpoint, autocompleteId, hasAutocomplete, minLength, autocompleteSuggestionMappingFunction]);
-    return (<div className={[
-            'ds_site-search', ,
-            className,
-            hasAutocomplete ? 'ds_autocomplete' : undefined
-        ].join(' ')} id={autocompleteId ? autocompleteId : undefined} ref={ref} {...props}>
-
-            <form role="search" className="ds_site-search__form" method={method} action={action}>
-                <label className="ds_label  visually-hidden" htmlFor={id} id={id + '-label'}>Search</label>
-
-                {hasAutocomplete && (<div role="status" aria-live="polite" id="autocomplete-status" className="visually-hidden"></div>)}
-
-                <div className="ds_input__wrapper  ds_input__wrapper--has-icon">
-                    <input aria-autocomplete={hasAutocomplete ? 'list' : undefined} aria-owns={hasAutocomplete ? 'autocomplete-suggestions' : undefined} autoComplete={hasAutocomplete ? 'off' : undefined} className={[
-            'ds_input',
-            'ds_site-search__input',
-            hasAutocomplete ? 'js-autocomplete-input' : undefined
-        ].join(' ')} id={id} name={name} placeholder={placeholder} required spellCheck="false" type="search"/>
-
-                    <button_1.default type="submit" icon="Search" iconOnly>Search</button_1.default>
-
-                    {hasAutocomplete && (<div id="autocomplete-suggestions" className="ds_autocomplete__suggestions">
-                            <ol className="ds_autocomplete__suggestions-list" role="listbox" aria-labelledby="site-search-label"></ol>
-                        </div>)}
-                </div>
-            </form>
-        </div>);
-};
-SiteSearch.displayName = 'SiteSearch';
-exports.default = SiteSearch;

package/dist/components/skip-links/skip-links.jsx

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SkipLink = void 0;
-const SkipLink = ({ targetId, title }) => {
-    return (<li className="ds_skip-links__item">
-            <a href={`#${targetId}`} className="ds_skip-links__link">{title}</a>
-        </li>);
-};
-exports.SkipLink = SkipLink;
-const SkipLinks = ({ items, mainContentId = 'main-content', mainLinkText = 'Skip to main content', ...props }) => {
-    return (<div className="ds_skip-links" {...props}>
-            <ul className="ds_skip-links__list">
-                <exports.SkipLink title={mainLinkText} targetId={mainContentId}/>
-
-                {items && items.map((item, index) => (<exports.SkipLink title={item.title} targetId={item.targetId} key={`skiplink-${index}`}/>))}
-            </ul>
-        </div>);
-};
-SkipLinks.displayName = 'SkipLinks';
-exports.SkipLink.displayName = 'SkipLink';
-exports.default = SkipLinks;

package/dist/components/summary-card/summary-card.jsx

@@ -1,67 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const summary_list_1 = __importStar(require("../summary-list/summary-list"));
-const wrapper_tag_1 = __importDefault(require("../../common/wrapper-tag"));
-function convertToSlug(string) {
-    return string.toLowerCase()
-        .replace(/[^\w ]+/g, "")
-        .replace(/ +/g, "-");
-}
-const SummaryCard = ({ actions, className, headerLevel = 'h3', items, title, ...props }) => {
-    const describedById = `summary-card-${convertToSlug(title)}`;
-    return (<div className={[
-            'ds_summary-card',
-            className
-        ].join(' ')} {...props}>
-            <div className="ds_summary-card__header">
-                <wrapper_tag_1.default className="ds_summary-card__header-title" id={describedById} tagName={headerLevel}>{title}</wrapper_tag_1.default>
-
-                <ul className="ds_summary-card__actions-list">
-                    {actions && actions.map((action, index) => (<li className="ds_summary-card__actions-list-item" key={'summarylistaction' + index}>
-                            <summary_list_1.Action describedby={describedById} href={action.href} onclick={action.onclick} title={action.title}/>
-                        </li>))}
-                </ul>
-            </div>
-            <div className="ds_summary-card__content">
-                <summary_list_1.default items={items}/>
-            </div>
-        </div>);
-};
-SummaryCard.displayName = 'SummaryCard';
-exports.default = SummaryCard;