@wayke-se/components-react 3.0.0-beta.13 → 3.0.0-beta.14

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,29 @@
+import { useContext, useEffect } from 'react';
+import { CentralStorageContext } from './CentralStorageContext';
+import useSearchItemBranch from '../../hooks/useSearchItemBranch';
+const useCentralStorage = (vehicle) => {
+    const { centralStorageId, setCentralStorageId } = useContext(CentralStorageContext);
+    const connections = vehicle?.branch?.connections;
+    const branchId = centralStorageId
+        ? connections?.find((x) => x.id === centralStorageId)?.id
+        : undefined;
+    const { data, loading } = useSearchItemBranch(vehicle?.id, branchId);
+    useEffect(() => {
+        if ((connections?.length || 0) > 0) {
+            const match = centralStorageId
+                ? connections?.find((x) => x.id === centralStorageId)
+                : undefined;
+            if (!match) {
+                const first = connections?.[0];
+                if (first) {
+                    setCentralStorageId(first.id);
+                }
+            }
+        }
+    }, [connections]);
+    return {
+        vehicle: (connections?.length || 0) > 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(() => state.path.match(regexGuidAnyWhere)?.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?.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,176 @@
+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?.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?.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(() => {
+        if (response) {
+            if (!initialFacets && !useQueryParamsFromUrl) {
+                setInitialFacets(response.facets);
+            }
+            if (useQueryParamsFromUrl && response.query?.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?.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(() => {
+        if (response) {
+            setQueryFilter({
+                searchParams: new URLSearchParams(response?.documentList.pagination.nextPage?.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) => {
+                    if (!initialQueryParams?.getAll(key)?.some((v) => v === value)) {
+                        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/dist-src/State/Search/useSearch.js

@@ -0,0 +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/dist-src/State/Settings/useSettings.js

@@ -0,0 +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/dist-src/components/Accordion/wrapper.js

@@ -0,0 +1,92 @@
+import styled, { css } from 'styled-components';
+import { size } from '../../layout/helpers';
+import { ButtonReset } from '../Button/index';
+export const List = styled.ul `
+  list-style: none;
+  padding: 0;
+  margin: ${size(-1)} 0;
+  font-size: 1rem;
+`;
+export const Header = styled(ButtonReset) `
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: ${size(3)} 0;
+  text-align: left;
+  font: inherit;
+`;
+export const Label = styled.div `
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+`;
+export const Heading = styled.div `
+  line-height: 1;
+`;
+export const Indicator = styled.div.attrs(() => ({
+    className: 'wayke__theme wayke__color--primary-bg',
+})) `
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 ${size(0.375)};
+  margin-left: ${size(0.5)};
+  min-width: 1em;
+  height: 1em;
+  border-radius: 999px;
+  z-index: 1;
+`;
+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 `
+  position: relative;
+  flex-shrink: 0;
+  padding-left: ${size(1)};
+  transition: color 150ms ease;
+
+  :before {
+    content: '';
+    position: absolute;
+    top: ${size(-1)};
+    bottom: ${size(-1)};
+    left: 0;
+    right: ${size(-1)};
+    border-radius: 50%;
+    background-color: ${(props) => props.theme.color.accent};
+    z-index: -1;
+    opacity: 0;
+    transition: opacity 200ms ease;
+  }
+
+  ${Header}:hover & {
+    :before {
+      opacity: 1;
+    }
+  }
+`;
+export const Body = styled.div `
+  display: none;
+  padding-bottom: ${size(3)};
+`;
+export const Item = styled.li `
+  & + & {
+    border-top: 1px solid ${(props) => props.theme.color.border};
+  }
+
+  ${({ isOpen }) => isOpen &&
+    css `
+      ${Body} {
+        display: block;
+      }
+
+      ${Icon} {
+        svg {
+          transform: rotate(180deg);
+        }
+      }
+    `}
+`;

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

@@ -0,0 +1,18 @@
+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 }) => {
+    const email = contact?.email || branch?.contact?.email;
+    const phonenumber = contact?.phonenumber || branch?.contact?.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/dist-src/components/Avatar/wrapper.js

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

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;
+`;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Wrapper, Quote, Author, AvatarWrapper, Info, Name, Date } from './wrapper';
+import Avatar from '../Avatar/index';
+const Blockquote = ({ children, author, avatar, date }) => (React.createElement(Wrapper, null,
+    React.createElement(Quote, null, children),
+    author && (React.createElement(Author, null,
+        avatar && (React.createElement(AvatarWrapper, null,
+            React.createElement(Avatar, { image: avatar, alt: `${author} avatar` }))),
+        React.createElement(Info, null,
+            React.createElement(Name, null, author),
+            date && React.createElement(Date, null, date))))));
+export default Blockquote;