@wayke-se/components-react 3.0.0-beta.7 → 3.0.0-beta.9

package/dist-src/@types/action.js

@@ -0,0 +1 @@
+export {};

package/dist-src/@types/codegen/types.js

@@ -0,0 +1,14 @@
+export var DrivingDistance;
+(function (DrivingDistance) {
+    DrivingDistance["Between0And1000"] = "BETWEEN0AND1000";
+    DrivingDistance["Between1000And1500"] = "BETWEEN1000AND1500";
+    DrivingDistance["Between1500And2000"] = "BETWEEN1500AND2000";
+    DrivingDistance["Between2000And2500"] = "BETWEEN2000AND2500";
+    DrivingDistance["Over2500"] = "OVER2500";
+})(DrivingDistance || (DrivingDistance = {}));
+export var FinancialOptionInclusion;
+(function (FinancialOptionInclusion) {
+    FinancialOptionInclusion["IncludesInsurance"] = "INCLUDES_INSURANCE";
+    FinancialOptionInclusion["IncludesService"] = "INCLUDES_SERVICE";
+    FinancialOptionInclusion["IncludesWintertires"] = "INCLUDES_WINTERTIRES";
+})(FinancialOptionInclusion || (FinancialOptionInclusion = {}));

package/dist-src/@types/filter.js

@@ -0,0 +1 @@
+export {};

package/dist-src/@types/queryFilter.js

@@ -0,0 +1 @@
+export {};

package/dist-src/@types/search.js

@@ -0,0 +1 @@
+export {};

package/dist-src/@types/vehicle-properties.js

@@ -0,0 +1 @@
+export {};

package/dist-src/State/CentralStorage/CentralStorageContext.js

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+export const CentralStorageContext = createContext({
+    setCentralStorageId: (_) => { },
+});

package/dist-src/State/CentralStorage/CentralStorageProvider.js

@@ -0,0 +1,9 @@
+import React, { useCallback } from 'react';
+import { CentralStorageContext } from './CentralStorageContext';
+import useSessionStorage from '../../hooks/useSessionStorage';
+const CentralStorageProvider = ({ children }) => {
+    const { value, set, remove } = useSessionStorage('centralStorage');
+    const setCentralStorageId = useCallback((id) => (id ? set(id) : remove()), []);
+    return (React.createElement(CentralStorageContext.Provider, { value: { centralStorageId: value, setCentralStorageId } }, children));
+};
+export default CentralStorageProvider;

package/dist-src/State/CentralStorage/useCentralStorage.js

@@ -0,0 +1,30 @@
+import { useContext, useEffect } from 'react';
+import { CentralStorageContext } from './CentralStorageContext';
+import useSearchItemBranch from '../../hooks/useSearchItemBranch';
+const useCentralStorage = (vehicle) => {
+    var _a, _b;
+    const { centralStorageId, setCentralStorageId } = useContext(CentralStorageContext);
+    const connections = (_a = vehicle === null || vehicle === void 0 ? void 0 : vehicle.branch) === null || _a === void 0 ? void 0 : _a.connections;
+    const branchId = centralStorageId
+        ? (_b = connections === null || connections === void 0 ? void 0 : connections.find((x) => x.id === centralStorageId)) === null || _b === void 0 ? void 0 : _b.id
+        : undefined;
+    const { data, loading } = useSearchItemBranch(vehicle === null || vehicle === void 0 ? void 0 : vehicle.id, branchId);
+    useEffect(() => {
+        if (((connections === null || connections === void 0 ? void 0 : connections.length) || 0) > 0) {
+            const match = centralStorageId
+                ? connections === null || connections === void 0 ? void 0 : connections.find((x) => x.id === centralStorageId)
+                : undefined;
+            if (!match) {
+                const first = connections === null || connections === void 0 ? void 0 : connections[0];
+                if (first) {
+                    setCentralStorageId(first.id);
+                }
+            }
+        }
+    }, [connections]);
+    return {
+        vehicle: ((connections === null || connections === void 0 ? void 0 : connections.length) || 0) > 0 ? data === null || data === void 0 ? void 0 : data.vehicle : vehicle,
+        loading,
+    };
+};
+export default useCentralStorage;

package/dist-src/State/Path/PathContext.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const PathContext = createContext(undefined);

package/dist-src/State/Path/PathProvider.js

@@ -0,0 +1,47 @@
+import React, { useCallback, useEffect, useMemo, useReducer } from 'react';
+import usePrevious from '../../hooks/usePrevious';
+import { PathContext } from './PathContext';
+import reducer, { initialState, SET_PATH } from './reducer';
+const regexGuidAnyWhere = /(\{){0,1}[0-9a-fA-F]{8}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{12}(\}){0,1}/g;
+const POP_STATE = 'popstate';
+const PathProvider = ({ children }) => {
+    const [state, dispatch] = useReducer(reducer, initialState);
+    const previousPath = usePrevious(state.path);
+    useEffect(() => {
+        const onPopState = () => {
+            dispatch({ type: SET_PATH, path: window.location.pathname });
+        };
+        window.addEventListener(POP_STATE, onPopState);
+        return () => {
+            window.removeEventListener(POP_STATE, onPopState);
+        };
+    }, []);
+    const pushState = useCallback((path) => {
+        const h1 = window.location.hash;
+        history.pushState(null, '', `${path}`);
+        const h2 = window.location.hash;
+        if (h1.localeCompare(h2) !== 0) {
+            window.dispatchEvent(new HashChangeEvent('hashchange'));
+        }
+        dispatch({ type: SET_PATH, path });
+    }, []);
+    const replaceState = useCallback((path) => {
+        const h1 = window.location.hash;
+        history.replaceState(null, '', path);
+        const h2 = window.location.hash;
+        if (h1.localeCompare(h2) !== 0) {
+            window.dispatchEvent(new HashChangeEvent('hashchange'));
+        }
+        dispatch({ type: SET_PATH, path });
+    }, []);
+    const id = useMemo(() => { var _a; return (_a = state.path.match(regexGuidAnyWhere)) === null || _a === void 0 ? void 0 : _a.pop(); }, [state.path]);
+    const value = useMemo(() => ({
+        ...state,
+        previousPath,
+        id,
+        pushState,
+        replaceState,
+    }), [state]);
+    return React.createElement(PathContext.Provider, { value: value }, children);
+};
+export default PathProvider;

package/dist-src/State/Path/reducer.js

@@ -0,0 +1,15 @@
+export const SET_PATH = 'SET_PATH';
+export const initialState = {
+    path: window.location.pathname,
+};
+const pathReducer = (state, action) => {
+    const next = { ...state };
+    switch (action.type) {
+        case SET_PATH:
+            next.path = action.path;
+            return next;
+        default:
+            throw new Error(`Unsupported action type`);
+    }
+};
+export default pathReducer;

package/dist-src/State/Path/usePath.js

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { PathContext } from './PathContext';
+const usePath = () => {
+    const context = useContext(PathContext);
+    if (!context) {
+        throw new Error('usePath must be used within a PathProvider');
+    }
+    return context;
+};
+export default usePath;

package/dist-src/State/RelatedSearch/RelatedSearchContext.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+export const RelatedSearchContext = createContext({
+    moreLikeThisUrl: false,
+    loading: false,
+    error: false,
+    response: undefined,
+    fetchRelated: (_) => { },
+});

package/dist-src/State/RelatedSearch/RelatedSearchProvider.js

@@ -0,0 +1,27 @@
+import React, { useState, useCallback } from 'react';
+import useFetch from '../../hooks/useFetch';
+import { RelatedSearchContext } from './RelatedSearchContext';
+const RelatedSearchProvider = ({ url, urlMlt, apiKey, children }) => {
+    const [queryFilter, setQueryFilter] = useState();
+    const query = queryFilter === null || queryFilter === void 0 ? void 0 : queryFilter.searchParams.toString();
+    const { loading, data: response, error, } = useFetch(`${urlMlt || url}${query ? `?${query}` : ''}`, {
+        headers: apiKey
+            ? {
+                'x-api-key': apiKey,
+            }
+            : {},
+    }, !queryFilter);
+    const fetchRelated = useCallback((searchParams) => setQueryFilter({
+        searchParams,
+    }), []);
+    const value = {
+        moreLikeThisUrl: !!urlMlt,
+        loading,
+        error,
+        response,
+        queryFilter,
+        fetchRelated,
+    };
+    return React.createElement(RelatedSearchContext.Provider, { value: value }, children);
+};
+export default RelatedSearchProvider;

package/dist-src/State/RelatedSearch/useRelatedSearch.js

@@ -0,0 +1,15 @@
+import { useContext, useEffect } from 'react';
+import { RelatedSearchContext } from './RelatedSearchContext';
+const useRelatedSearch = (id) => {
+    const data = useContext(RelatedSearchContext);
+    useEffect(() => {
+        const searchParams = new URLSearchParams();
+        searchParams.set('hits', '3');
+        if (data.moreLikeThisUrl && id) {
+            searchParams.set('id', id);
+        }
+        data.fetchRelated(searchParams);
+    }, [id]);
+    return data;
+};
+export default useRelatedSearch;

package/dist-src/State/Search/SearchContext.js

@@ -0,0 +1,12 @@
+import { createContext } from 'react';
+export const SearchContext = createContext({
+    loading: false,
+    error: false,
+    response: undefined,
+    documents: undefined,
+    initialFacets: undefined,
+    queryFilter: { searchParams: new URLSearchParams() },
+    onFilterUpdate: (_) => { },
+    onLoadMore: () => { },
+    onInitialize: (_) => { },
+});

package/dist-src/State/Search/SearchProvider.js

@@ -0,0 +1,179 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import useFetch from '../../hooks/useFetch';
+import { SearchContext } from './SearchContext';
+import { getUrlSearchParamsFromUrl } from '../../utils/url';
+import { WaykePubSub } from '../../index';
+import usePath from '../Path/usePath';
+const initialSearchParams = new URLSearchParams();
+initialSearchParams.set('hits', '30');
+initialSearchParams.set('sort', 'published-desc');
+const SearchProvider = ({ url, apiKey, useQueryParamsFromUrl, pathRoute, children, }) => {
+    const { replaceState, pushState } = usePath();
+    const [queryFilter, setQueryFilter] = useState({
+        searchParams: initialSearchParams,
+    });
+    const [initialFacets, setInitialFacets] = useState();
+    const [documents, setDocuments] = useState();
+    const [initialize, setInitialize] = useState(false);
+    const { data: initialDataRepsonse } = useFetch(`${url}?hits=0`, {
+        headers: apiKey
+            ? {
+                'x-api-key': apiKey,
+            }
+            : {},
+    }, !!initialFacets);
+    const query = queryFilter.searchParams.toString();
+    const { loading, data: response, error, } = useFetch(`${url}${query ? `?${query}` : ''}`, {
+        headers: apiKey
+            ? {
+                'x-api-key': apiKey,
+            }
+            : {},
+    }, !initialize || !!(queryFilter === null || queryFilter === void 0 ? void 0 : queryFilter.block));
+    const popStateEvent = (event) => {
+        const { currentTarget } = event;
+        if (currentTarget) {
+            const nextSearchParams = new URLSearchParams(currentTarget.location.search);
+            if (!nextSearchParams.has('sort')) {
+                nextSearchParams.set('sort', 'published-desc');
+            }
+            setQueryFilter({
+                searchParams: nextSearchParams,
+            });
+        }
+    };
+    useEffect(() => {
+        if (useQueryParamsFromUrl) {
+            window.addEventListener('popstate', popStateEvent);
+        }
+        const onFilterUpdateEvent = {
+            actionName: 'onFilterUpdate',
+            callback: onFilterUpdate,
+        };
+        WaykePubSub.subscribeAction(onFilterUpdateEvent);
+        return () => {
+            window.removeEventListener('popstate', popStateEvent);
+            WaykePubSub.unsubscribeAction(onFilterUpdateEvent);
+        };
+    }, []);
+    useEffect(() => {
+        if (initialDataRepsonse) {
+            setInitialFacets(initialDataRepsonse.facets);
+        }
+    }, [initialDataRepsonse]);
+    useEffect(() => {
+        if (useQueryParamsFromUrl) {
+            const nextSearchParams = new URLSearchParams(queryFilter.searchParams);
+            nextSearchParams.delete('hits');
+            nextSearchParams.delete('offset');
+            if (nextSearchParams.get('sort') === 'published-desc') {
+                nextSearchParams.delete('sort');
+            }
+            const nextSearch = nextSearchParams.toString() ? `?${nextSearchParams}` : '';
+            if (initialize) {
+                if (window.location.search.localeCompare(nextSearch) !== 0) {
+                    const _path = pathRoute === null || pathRoute === void 0 ? void 0 : pathRoute.replace(/^\/|\/$/g, '');
+                    const prefix = _path ? `/${_path}/` : '/';
+                    const index = _path ? window.location.pathname.indexOf(prefix) : -1;
+                    let pathname = window.location.pathname;
+                    if (index > -1) {
+                        pathname = pathname.substr(0, index);
+                    }
+                    pushState(`${pathname}${nextSearch}`);
+                }
+            }
+        }
+    }, [queryFilter, initialize, useQueryParamsFromUrl]);
+    useEffect(() => {
+        var _a;
+        if (response) {
+            if (!initialFacets && !useQueryParamsFromUrl) {
+                setInitialFacets(response.facets);
+            }
+            if (useQueryParamsFromUrl && ((_a = response.query) === null || _a === void 0 ? void 0 : _a.parameters)) {
+                const nextSearchParams = new URLSearchParams(response.query.parameters);
+                nextSearchParams.delete('hits');
+                nextSearchParams.delete('offset');
+                const nextSearch = nextSearchParams.toString() ? `?${nextSearchParams}` : '';
+                if (window.location.search.localeCompare(nextSearch) !== 0) {
+                    replaceState(`${window.location.pathname}${nextSearch}`);
+                    setQueryFilter({
+                        searchParams: new URLSearchParams(nextSearch),
+                        block: true,
+                    });
+                }
+            }
+            if (queryFilter === null || queryFilter === void 0 ? void 0 : queryFilter.concatResult) {
+                setDocuments([...(documents || []), ...(response.documentList.documents || [])]);
+            }
+            else {
+                setDocuments(response.documentList.documents || []);
+            }
+        }
+    }, [response, useQueryParamsFromUrl]);
+    const onFilterUpdate = useCallback((nextQuery) => {
+        {
+            if (!initialize) {
+                setInitialize(true);
+            }
+            setQueryFilter({
+                searchParams: new URLSearchParams(nextQuery),
+            });
+        }
+    }, [initialize]);
+    const onLoadMore = useCallback(() => {
+        var _a;
+        if (response) {
+            setQueryFilter({
+                searchParams: new URLSearchParams((_a = response === null || response === void 0 ? void 0 : response.documentList.pagination.nextPage) === null || _a === void 0 ? void 0 : _a.query),
+                concatResult: true,
+            });
+        }
+    }, [response]);
+    const onInitialize = useCallback((_initialQueryParams) => {
+        if (!initialize) {
+            const searchParamsFromUrl = getUrlSearchParamsFromUrl();
+            const initialQueryParams = useQueryParamsFromUrl
+                ? searchParamsFromUrl
+                : _initialQueryParams;
+            if (useQueryParamsFromUrl && _initialQueryParams) {
+                _initialQueryParams.forEach((value, key) => {
+                    var _a;
+                    if (!((_a = initialQueryParams === null || initialQueryParams === void 0 ? void 0 : initialQueryParams.getAll(key)) === null || _a === void 0 ? void 0 : _a.some((v) => v === value))) {
+                        initialQueryParams === null || initialQueryParams === void 0 ? void 0 : initialQueryParams.append(key, value);
+                    }
+                });
+            }
+            if (initialQueryParams) {
+                const nextSearchParams = new URLSearchParams(initialQueryParams);
+                nextSearchParams.delete('hits');
+                nextSearchParams.delete('offset');
+                if (!initialQueryParams.has('hits')) {
+                    initialQueryParams.set('hits', '30');
+                }
+                if (!initialQueryParams.has('sort')) {
+                    initialQueryParams.set('sort', 'published-desc');
+                }
+                const nextSearch = nextSearchParams.toString() ? `?${nextSearchParams}` : '';
+                setQueryFilter({
+                    searchParams: initialQueryParams,
+                });
+                replaceState(`${window.location.pathname}${nextSearch}`);
+            }
+            setInitialize(true);
+        }
+    }, [initialize]);
+    const value = {
+        loading,
+        error,
+        response,
+        documents,
+        initialFacets,
+        queryFilter,
+        onFilterUpdate,
+        onLoadMore,
+        onInitialize,
+    };
+    return React.createElement(SearchContext.Provider, { value: value }, children);
+};
+export default SearchProvider;

package/{src/State/Search/useSearch.ts → dist-src/State/Search/useSearch.js}

@@ -1,6 +1,4 @@
 import { useContext } from 'react';
 import { SearchContext } from './SearchContext';
-
 const useSearch = () => useContext(SearchContext);
-
 export default useSearch;

package/dist-src/State/Settings/SettingsContext.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const SettingsContext = createContext({});

package/dist-src/State/Settings/SettingsProvider.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SettingsContext } from './SettingsContext';
+const SettingsProvider = ({ googleMapsApiKey, googleMapsMarker, ecomSettings, children, }) => (React.createElement(SettingsContext.Provider, { value: { ecomSettings, googleMapsApiKey, googleMapsMarker } }, children));
+export default SettingsProvider;

package/{src/State/Settings/useSettings.ts → dist-src/State/Settings/useSettings.js}

@@ -1,7 +1,4 @@
 import { useContext } from 'react';
-
 import { SettingsContext } from './SettingsContext';
-
 const useSettings = () => useContext(SettingsContext);
-
 export default useSettings;

package/dist-src/components/Accordion/index.js

@@ -0,0 +1,18 @@
+import React, { useState, useCallback } from 'react';
+import { List, Item, Header, Label, Heading, Indicator, IndicatorValue, Icon, Body, } from './wrapper';
+import { IconChevronDown } from '../Icon/index';
+export const AccordionItem = ({ heading, children, activeCount, isActive }) => {
+    const [extend, setExtend] = useState(isActive || false);
+    const onToggleExtend = useCallback(() => setExtend(!extend), [extend]);
+    return (React.createElement(Item, { isOpen: extend },
+        React.createElement(Header, { onClick: onToggleExtend, title: "Visa mer" },
+            React.createElement(Label, null,
+                React.createElement(Heading, { className: activeCount && activeCount > 0 ? 'wayke__theme wayke__font--bold' : '' }, heading),
+                activeCount && activeCount > 0 && (React.createElement(Indicator, null,
+                    React.createElement(IndicatorValue, null, activeCount)))),
+            React.createElement(Icon, null,
+                React.createElement(IconChevronDown, { block: true }))),
+        React.createElement(Body, null, children)));
+};
+const Accordion = ({ children }) => React.createElement(List, null, children);
+export default Accordion;

package/{src/components/Accordion/wrapper.tsx → dist-src/components/Accordion/wrapper.js}

@@ -1,16 +1,13 @@
 import styled, { css } from 'styled-components';
-
 import { size } from '../../layout/helpers';
 import { ButtonReset } from '../Button/index';
-
-export const List = styled.ul`
+export const List = styled.ul `
   list-style: none;
   padding: 0;
   margin: ${size(-1)} 0;
   font-size: 1rem;
 `;
-
-export const Header = styled(ButtonReset)`
+export const Header = styled(ButtonReset) `
   display: flex;
   align-items: center;
   width: 100%;
@@ -18,20 +15,17 @@ export const Header = styled(ButtonReset)`
   text-align: left;
   font: inherit;
 `;
-
-export const Label = styled.div`
+export const Label = styled.div `
   display: flex;
   align-items: center;
   flex: 1 1 auto;
 `;
-
-export const Heading = styled.div`
+export const Heading = styled.div `
   line-height: 1;
 `;
-
 export const Indicator = styled.div.attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-bg',
-}))`
+    className: 'wayke__theme wayke__color--primary-bg',
+})) `
   flex-shrink: 0;
   display: flex;
   align-items: center;
@@ -43,14 +37,12 @@ export const Indicator = styled.div.attrs(() => ({
   border-radius: 999px;
   z-index: 1;
 `;
-
-export const IndicatorValue = styled.div`
+export const IndicatorValue = styled.div `
   font-family: sans-serif; // Default font to guarantee visibility
   font-size: 0.75rem;
   font-weight: bold;
 `;
-
-export const Icon = styled.div`
+export const Icon = styled.div `
   position: relative;
   flex-shrink: 0;
   padding-left: ${size(1)};
@@ -76,24 +68,17 @@ export const Icon = styled.div`
     }
   }
 `;
-
-export const Body = styled.div`
+export const Body = styled.div `
   display: none;
   padding-bottom: ${size(3)};
 `;
-
-type ItemProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLLIElement>, HTMLLIElement> & {
-  isOpen?: boolean;
-};
-
-export const Item = styled.li<ItemProps>`
+export const Item = styled.li `
   & + & {
     border-top: 1px solid ${(props) => props.theme.color.border};
   }
 
-  ${({ isOpen }) =>
-    isOpen &&
-    css`
+  ${({ isOpen }) => isOpen &&
+    css `
       ${Body} {
         display: block;
       }

package/dist-src/components/ActionList/index.js

@@ -0,0 +1,19 @@
+import React, { useCallback } from 'react';
+import ToggleItem from './toggle-item';
+import { formatPhonenumber } from '../../utils/phonenumbers';
+import PubSub from '../../utils/pubsub/pubsub';
+const ActionList = ({ contact, branch }) => {
+    var _a, _b;
+    const email = (contact === null || contact === void 0 ? void 0 : contact.email) || ((_a = branch === null || branch === void 0 ? void 0 : branch.contact) === null || _a === void 0 ? void 0 : _a.email);
+    const phonenumber = (contact === null || contact === void 0 ? void 0 : contact.phonenumber) || ((_b = branch === null || branch === void 0 ? void 0 : branch.contact) === null || _b === void 0 ? void 0 : _b.phonenumber);
+    const onClickMailVisible = useCallback(() => PubSub.publish('MailVisible'), []);
+    const onClickPhoneVisible = useCallback(() => PubSub.publish('PhonenumberVisible'), []);
+    const onClickPhoneValue = useCallback(() => PubSub.publish('PhonenumberCall'), []);
+    if (!email && !phonenumber) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
+        email && (React.createElement(ToggleItem, { onClickVisible: onClickMailVisible, title: "Visa mailadress", value: email, type: "mailto" })),
+        phonenumber && (React.createElement(ToggleItem, { title: "Visa telefonnummer", value: formatPhonenumber(phonenumber), type: "tel", onClickVisible: onClickPhoneVisible, onClickValue: onClickPhoneValue }))));
+};
+export default ActionList;

package/dist-src/components/ActionList/toggle-item.js

@@ -0,0 +1,27 @@
+import React, { useState, useCallback } from 'react';
+import { ButtonSecondary, ButtonContent } from '../Button/index';
+import { RepeatTiny } from '../Repeat/index';
+const initialValue = {};
+const getInitialValue = (title) => title && !!initialValue[title];
+const ToggleItem = ({ title, value, type, onClickVisible, onClickValue }) => {
+    const [visible, setVisible] = useState(() => getInitialValue(type));
+    const _onClickValue = useCallback(() => {
+        if (onClickValue) {
+            onClickValue();
+        }
+    }, []);
+    const onClick = useCallback(() => {
+        if (!visible) {
+            initialValue[type] = true;
+            setVisible(true);
+            if (onClickVisible) {
+                onClickVisible();
+            }
+        }
+    }, [visible]);
+    const visibleTitle = type === 'tel' ? 'Ring' : type === 'mailto' ? 'Skicka ett mail till' : '';
+    return (React.createElement(RepeatTiny, null, visible ? (React.createElement(ButtonSecondary, { onClick: _onClickValue, as: "a", href: `${type}:${value}`, title: `${visibleTitle} ${value}`, fullWidth: true },
+        React.createElement(ButtonContent, null, value))) : (React.createElement(ButtonSecondary, { onClick: onClick, title: title, fullWidth: true },
+        React.createElement(ButtonContent, null, title)))));
+};
+export default ToggleItem;

package/dist-src/components/Avatar/index.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Wrapper } from './wrapper';
+const Avatar = ({ image, alt }) => React.createElement(Wrapper, { image: image, "aria-label": alt });
+export default Avatar;

package/{src/components/Avatar/wrapper.tsx → dist-src/components/Avatar/wrapper.js}

@@ -1,19 +1,13 @@
 import styled from 'styled-components';
-
 import { size } from '../../layout/helpers';
-
-interface Wrapper {
-  image: string;
-}
-
 export const Wrapper = styled.div.attrs(() => ({
-  role: 'image',
-}))<Wrapper>`
+    role: 'image',
+})) `
   display: block;
   width: ${size(5)};
   height: ${size(5)};
   border-radius: 50%;
-  background-image: ${(props): string => `url(${props.image})`};
+  background-image: ${(props) => `url(${props.image})`};
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;

package/dist-src/components/Badge/index.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Wrapper } from './wrapper';
+const Badge = ({ label, severity }) => React.createElement(Wrapper, { severity: severity }, label);
+export default Badge;

package/dist-src/components/Badge/wrapper.js

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+import { size } from '../../layout/helpers';
+import theme from '../../layout/theme';
+const getBg = (severity) => {
+    let bg = theme.color.textDark;
+    if (severity === 'positive') {
+        bg = theme.color.ui.positive;
+    }
+    else if (severity === 'negative') {
+        bg = theme.color.ui.negative;
+    }
+    return bg;
+};
+export const Wrapper = styled.div.attrs(() => ({
+    className: 'wayke__theme wayke__font--bold',
+})) `
+  display: inline-block;
+  background-color: ${(props) => getBg(props.severity)};
+  padding: ${size(0.75)} ${size(1.5)};
+  color: ${(props) => props.theme.color.textLight};
+  border-radius: 3px;
+  font-size: 0.75rem;
+  line-height: 1.2;
+`;