@scottish-government/designsystem-react 0.1.2 → 0.1.4

package/.svgrrc

@@ -0,0 +1,15 @@
+{
+    "dimensions": false,
+    "icon": true,
+    "outDir": "src/icons",
+    "svgo": true,
+    "svgoConfig": {
+        "plugins": [
+            "removeDimensions"
+        ]
+    },
+    "svgProps": {
+        "role": "img"
+    },
+    "typescript": true
+}

package/@types/common/Icon.d.ts

@@ -1,11 +1,9 @@
 declare namespace SGDS.Common {
     interface Icon extends React.AllHTMLAttributes<SVGSVGElement> {
-        accessible?: boolean,
+        ariaLabel?: string,
         className?: string,
         fill?: boolean,
-        icon: string
-        iconPath?: string,
-        iconSize?: string,
-        title?: string
+        icon: IconName,
+        iconSize?: string
     }
 }

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

@@ -4,7 +4,7 @@ declare namespace SGDS.Component {
     type ButtonWidth = 'fluid' | 'fixed' | 'max';
 
     interface Button extends React.AllHTMLAttributes<HTMLButtonElement> {
-        icon?: string,
+        icon?: IconName,
         iconLeft?: boolean
         iconOnly?: boolean,
         href?: string,

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

@@ -0,0 +1,21 @@
+declare namespace SGDS.Component {
+    namespace Pagination {
+        interface Page extends React.AllHTMLAttributes<HTMLElement> {
+            ariaLabel: string,
+            current?: boolean,
+            href: string,
+            onClick?: React.EventHandler<any>,
+            text: string
+        }
+    }
+
+    interface Pagination extends React.AllHTMLAttributes<HTMLElement> {
+        ariaLabel: string,
+        className?: string,
+        onClick?: React.EventHandler<any>,
+        padding: number,
+        page: number,
+        pattern: string,
+        totalPages: number
+    }
+}

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

@@ -1,6 +1,6 @@
 declare namespace SGDS.Component {
     interface TextInput extends TextInputBase<HTMLInputElement> {
-        buttonIcon?: string,
+        buttonIcon?: IconName,
         buttonText?: string,
         className?: string,
         currency?: boolean,

package/@types/sgds.d.ts

@@ -1,6 +1,7 @@
 declare namespace SGDS {
     type AriaLive = 'polite' | 'assertive';
     type HeaderLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    type IconName = 'ArrowUpward' | 'CalendarToday' | 'Cancel' | 'CheckCircle' | 'ChevronLeft' | 'ChevronRight' | 'Close' | 'Description' | 'DoubleChevronLeft' | 'DoubleChevronRight' | 'Error' | 'ExpandLess' | 'ExpandMore' | 'List' | 'Menu' | 'PriorityHigh' | 'Search';
     type InputWidth = 'fixed-20' | 'fixed-10' | 'fixed-5' | 'fixed-4' | 'fixed-3' | 'fixed-2' | 'fluid-three-quarters' | 'fluid-two-thirds' | 'fluid-half' | 'fluid-one-third' | 'fluid-one-quarter';
     type TagColour = 'grey' | 'green' | 'teal' | 'blue' | 'purple' | 'pink' | 'red' | 'orange' | 'yellow';
 

package/README.md

@@ -24,3 +24,6 @@ Run unit tests
 
 `npm run coverage`  
 Run unit tests and output a coverage report, located in `/coverage`
+
+`npm run svgr`
+Create icon components for each SVG icon used by the Design System. These icon components are present in the repository. You likely will never need to run this command as an end user.

package/dist/common/icon.jsx

@@ -1,14 +1,57 @@
 "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 Icon = ({ className, fill, icon, iconPath = './icons.stack.svg', iconSize, title }) => {
-    return (<svg aria-hidden={title ? undefined : true} aria-label={title} className={[
+const react_1 = __importDefault(require("react"));
+const Icons = __importStar(require("../icons"));
+const Icon = ({ ariaLabel, className, fill, icon, iconSize }) => {
+    const Component = react_1.default.createElement(Icons[icon], {
+        'aria-hidden': ariaLabel ? undefined : true,
+        'aria-label': ariaLabel,
+        className: [
             'ds_icon',
             className,
             fill && 'ds_icon--fill',
             iconSize && `ds_icon--${iconSize}`
-        ].join(' ')} role="img">
-            <use xlinkHref={`${iconPath}#${icon}`}/>
-        </svg>);
+        ].join(' ')
+    });
+    return (<>
+            {Component}
+        </>);
 };
 Icon.displayName = 'Icon';
 exports.default = Icon;

package/dist/components/back-to-top/back-to-top.jsx

@@ -19,7 +19,7 @@ const BackToTop = ({ className, href = '#page-top', ...props }) => {
             className
         ].join(' ')} ref={ref} {...props}>
             <a href={href} className="ds_back-to-top__button">Back to top
-                <icon_1.default className="ds_back-to-top__icon" icon="arrow_upward"/>
+                <icon_1.default className="ds_back-to-top__icon" icon="ArrowUpward"/>
             </a>
        </div>);
 };

package/dist/components/confirmation-message/confirmation-message.jsx

@@ -10,7 +10,7 @@ const ConfirmationMessage = ({ ariaLive = 'polite', children, className, headerL
             'ds_confirmation-message',
             className
         ].join(' ')} {...props}>
-            <icon_1.default className="ds_confirmation-message__icon" icon="check_circle" iconSize="24"/>
+            <icon_1.default className="ds_confirmation-message__icon" icon="CheckCircle" iconSize="24"/>
 
             <wrapper_tag_1.default className="ds_confirmation-message__title" tagName={headerLevel}>
                 {title}

package/dist/components/date-picker/date-picker.jsx

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 // @ts-ignore
 const date_picker_1 = __importDefault(require("@scottish-government/design-system/src/components/date-picker/date-picker"));
+const error_message_1 = __importDefault(require("../error-message/error-message"));
 const text_input_1 = __importDefault(require("../text-input/text-input"));
 const DatePicker = ({ className, disabledDates, error, errorMessage, hintText, id, iconPath = './', label, maxDate, minDate, multiple, name, onBlur, onChange, value, width = 'fixed-10', ...props }) => {
     // todo: dateSelectCallback function
@@ -32,6 +33,7 @@ const DatePicker = ({ className, disabledDates, error, errorMessage, hintText, i
         ].join(' ')} data-disableddates={disabledDates} data-maxdate={maxDate} data-mindate={minDate} data-module="ds-datepicker" ref={ref} {...props}>
             {(multiple ? (<fieldset className="ds_datepicker__input-wrapper">
                     <legend>{label}</legend>
+                    {errorMessage && <error_message_1.default text={errorMessage}/>}
                     <div>
                         <text_input_1.default className="js-datepicker-date" error={!!error} id={id + "-day"} hintText={hintText} label="Day" name={name + "-day"} onBlur={handleBlur} onChange={handleChange} value={value?.split('/')[0]} width="fixed-2"/>
                     </div>

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 // @ts-ignore
 const notification_banner_1 = __importDefault(require("@scottish-government/design-system/src/components/notification-banner/notification-banner"));
-const button_1 = __importDefault(require("../button/button"));
 const icon_1 = __importDefault(require("../../common/icon"));
 const screen_reader_text_1 = __importDefault(require("../../common/screen-reader-text"));
 const NotificationBanner = ({ children, className, close, icon, iconColour, iconInverse, title = 'Information', ...props }) => {
@@ -34,7 +33,7 @@ const NotificationBanner = ({ children, className, close, icon, iconColour, icon
                     iconInverse && 'ds_notification__icon--inverse',
                     iconColour && 'ds_notification__icon--colour'
                 ].join(' ')} aria-hidden="true">
-                            <icon_1.default icon="priority_high"/>
+                            <icon_1.default icon="PriorityHigh"/>
                         </span>}
 
                     <div className="ds_notification__text">
@@ -42,10 +41,10 @@ const NotificationBanner = ({ children, className, close, icon, iconColour, icon
                     </div>
 
                     {close &&
-            <button_1.default className="ds_notification__close js-close-notification">
+            <button type="button" className="ds_notification__close js-close-notification">
                             <screen_reader_text_1.default>Close this notification</screen_reader_text_1.default>
-                            <icon_1.default fill icon="close" aria-hidden="true"/>
-                        </button_1.default>}
+                            <icon_1.default fill icon="Close" aria-hidden="true"/>
+                        </button>}
                 </div>
             </div>
         </div>);

package/dist/components/pagination/pagination.jsx

@@ -0,0 +1,97 @@
+"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/select/select.jsx

@@ -40,7 +40,7 @@ const Select = function ({ className, defaultValue, error, errorMessage, hintTex
             width && `ds_input--${width}`,
             className
         ].join(' ')} {...props}>
-                <select aria-describedby={describedbys.join(' ')} className="ds_select" defaultValue={defaultValue} id={id} name={name || id} onBlur={handleBlur} onChange={handleChange}>
+                <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>

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

@@ -42,7 +42,7 @@ const SiteSearch = function ({ action = '/search', autocompleteEndpoint, autocom
             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>
+                    <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>

package/dist/components/text-input/text-input.jsx

@@ -44,7 +44,7 @@ const TextInput = ({ buttonIcon, buttonText, children, className, countThreshold
             {hintText && <hint_text_1.default id={hintTextId} text={hintText}/>}
             {errorMessage && <error_message_1.default id={errorMessageId} text={errorMessage}/>}
             <conditional_wrapper_1.default condition={hasButton || typeof currency !== 'undefined' && currency} wrapper={(children) => <div className={inputWrapperClasses} data-symbol={currencySymbol}>{children}</div>}>
-                <input aria-describedby={describedbys.join(' ')} className={[
+                <input aria-describedby={describedbys.join(' ')} aria-invalid={error} className={[
             'ds_input',
             className,
             error ? 'ds_input--error' : '',

package/dist/components/textarea/textarea.jsx

@@ -42,7 +42,7 @@ const Textarea = ({ className, countThreshold, error, errorMessage, hintText, id
             {hintText && <hint_text_1.default id={hintTextId} text={hintText}/>}
             {errorMessage && <error_message_1.default id={errorMessageId} text={errorMessage}/>}
 
-            <textarea aria-describedby={describedbys.join(' ')} className={[
+            <textarea aria-describedby={describedbys.join(' ')} aria-invalid={error} className={[
             'ds_input',
             error && 'ds_input--error',
             className

package/dist/icons/ArrowUpward.jsx

@@ -0,0 +1,41 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const SvgArrowUpward = (props) => (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000" role="img" {...props}>
+        <path d="M0 0h24v24H0V0z" fill="none"/>
+        <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/>
+    </svg>);
+exports.default = SvgArrowUpward;

package/dist/icons/CalendarToday.jsx

@@ -0,0 +1,41 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const SvgCalendarToday = (props) => (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000" role="img" {...props}>
+        <path d="M0 0h24v24H0z" fill="none"/>
+        <path d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/>
+    </svg>);
+exports.default = SvgCalendarToday;

package/dist/icons/Cancel.jsx

@@ -0,0 +1,40 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const SvgCancel = (props) => (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" role="img" {...props}>
+        <path d="m336-280 144-144 144 144 56-56-144-144 144-144-56-56-144 144-144-144-56 56 144 144-144 144 56 56ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/>
+    </svg>);
+exports.default = SvgCancel;

package/dist/icons/CheckCircle.jsx

@@ -0,0 +1,41 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const SvgCheckCircle = (props) => (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000" role="img" {...props}>
+        <path d="M0 0h24v24H0z" fill="none"/>
+        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+    </svg>);
+exports.default = SvgCheckCircle;

package/dist/icons/ChevronLeft.jsx

@@ -0,0 +1,41 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const SvgChevronLeft = (props) => (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000" role="img" {...props}>
+        <path d="M0 0h24v24H0z" fill="none"/>
+        <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
+    </svg>);
+exports.default = SvgChevronLeft;

package/dist/icons/ChevronRight.jsx

@@ -0,0 +1,41 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const SvgChevronRight = (props) => (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000" role="img" {...props}>
+        <path d="M0 0h24v24H0z" fill="none"/>
+        <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
+    </svg>);
+exports.default = SvgChevronRight;