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

package/{src/components/InputGroup/index.tsx → dist-src/components/InputGroup/index.js}

@@ -1,16 +1,13 @@
 import styled from 'styled-components';
-
 import { size } from '../../layout/helpers';
-
-export const InputGroup = styled.div`
+export const InputGroup = styled.div `
   ${(props) => props.theme.breakpoint.Sm} {
     display: flex;
     align-items: flex-start;
     margin: ${size(-0.5)};
   }
 `;
-
-export const InputGroupColumn = styled.div`
+export const InputGroupColumn = styled.div `
   ${(props) => props.theme.breakpoint.LtSm} {
     & + & {
       margin-top: ${size(1)};

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

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

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

@@ -1,10 +1,8 @@
 import styled from 'styled-components';
-
 import { size } from '../../layout/helpers';
-
 export const Wrapper = styled.label.attrs(() => ({
-  className: 'wayke__theme wayke__font--bold',
-}))`
+    className: 'wayke__theme wayke__font--bold',
+})) `
   margin-bottom: ${size(0.5)};
   font-size: 0.875rem;
 `;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Wrapper, Search, Action, ActionBtn, Input, Label } from './wrapper';
+import { IconSearch } from '../Icon/index';
+const InputSearch = React.forwardRef(({ placeholder, label, value, id, onSearch, onChange, onKeyDown }, ref) => (React.createElement(Wrapper, { ref: ref },
+    React.createElement(Label, { htmlFor: id }, label),
+    React.createElement(Search, null,
+        React.createElement(Input, { placeholder: placeholder, name: "search", value: value, id: id, onChange: onChange, onKeyDown: onKeyDown })),
+    React.createElement(Action, null,
+        React.createElement(ActionBtn, { onClick: onSearch, title: `Genomför ${label}`, "aria-label": `Genomför ${label}` },
+            React.createElement(IconSearch, { block: true }))))));
+InputSearch.displayName = 'InputSearch';
+export default InputSearch;

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

@@ -1,17 +1,14 @@
 import styled from 'styled-components';
-
 import { size } from '../../layout/helpers';
 import { ButtonReset } from '../Button/index';
-
 export const Wrapper = styled.div.attrs(() => ({
-  role: 'search',
-}))`
+    role: 'search',
+})) `
   display: flex;
   align-items: stretch;
   border-radius: 3px;
 `;
-
-export const Label = styled.label`
+export const Label = styled.label `
   position: absolute;
   width: 1px;
   height: 1px;
@@ -22,8 +19,7 @@ export const Label = styled.label`
   white-space: nowrap;
   border: 0;
 `;
-
-export const Search = styled.div`
+export const Search = styled.div `
   flex: 1 1 auto;
   position: relative;
   display: flex;
@@ -32,14 +28,12 @@ export const Search = styled.div`
   border-top-left-radius: 3px;
   border-bottom-left-radius: 3px;
 `;
-
-export const Action = styled.div`
+export const Action = styled.div `
   flex-shrink: 0;
 `;
-
 export const ActionBtn = styled(ButtonReset).attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-bg',
-}))`
+    className: 'wayke__theme wayke__color--primary-bg',
+})) `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -49,11 +43,10 @@ export const ActionBtn = styled(ButtonReset).attrs(() => ({
   border-bottom-right-radius: 3px;
   font-size: 1rem;
 `;
-
 export const Input = styled.input.attrs(() => ({
-  type: 'search',
-  className: 'wayke__theme wayke__font--regular',
-}))`
+    type: 'search',
+    className: 'wayke__theme wayke__font--regular',
+})) `
   flex: 1 1 auto;
   display: block;
   width: 100%;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Wrapper, Select, Option, Icon } from './wrapper';
+import { IconChevronDown } from '../Icon/index';
+const InputSelect = ({ value, options, onChange, unit, title }) => (React.createElement(Wrapper, null,
+    React.createElement(Select, { value: value, onChange: onChange, title: title, "aria-label": title }, options === null || options === void 0 ? void 0 : options.map((option) => (React.createElement(Option, { key: option.value, value: option.value },
+        option.displayName || option.value,
+        unit ? ` ${unit}` : '')))),
+    React.createElement(Icon, null,
+        React.createElement(IconChevronDown, { block: true }))));
+export default InputSelect;

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

@@ -1,19 +1,15 @@
 import styled from 'styled-components';
-
 import { size } from '../../layout/helpers';
-
 const iconSize = '0.875rem';
 const selectPadding = size(2);
-
-export const Wrapper = styled.div`
+export const Wrapper = styled.div `
   position: relative;
   background-color: ${(props) => props.theme.color.accent};
   border-radius: 3px;
 `;
-
 export const Select = styled.select.attrs(() => ({
-  className: 'wayke__theme wayke__font--regular',
-}))`
+    className: 'wayke__theme wayke__font--regular',
+})) `
   position: relative;
   display: block;
   width: 100%;
@@ -45,12 +41,10 @@ export const Select = styled.select.attrs(() => ({
     border: 0;
   }
 `;
-
-export const Option = styled.option`
+export const Option = styled.option `
   color: ${(props) => props.theme.color.textDark};
 `;
-
-export const Icon = styled.div`
+export const Icon = styled.div `
   position: absolute;
   top: 50%;
   right: ${selectPadding};

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Wrapper, Input } from './wrapper';
+const InputText = ({ placeholder, label, value, id, onChange, onKeyDown }) => (React.createElement(Wrapper, null,
+    React.createElement(Input, { placeholder: placeholder, value: value, id: id, "aria-label": label, onChange: onChange, onKeyDown: onKeyDown })));
+export default InputText;

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

@@ -1,19 +1,16 @@
 import styled from 'styled-components';
-
 import { size } from '../../layout/helpers';
-
-export const Wrapper = styled.div`
+export const Wrapper = styled.div `
   position: relative;
   display: flex;
   align-items: stretch;
   background-color: ${(props) => props.theme.color.accent};
   border-radius: 3px;
 `;
-
 export const Input = styled.input.attrs(() => ({
-  type: 'text',
-  className: 'wayke__theme wayke__font--regular',
-}))`
+    type: 'text',
+    className: 'wayke__theme wayke__font--regular',
+})) `
   flex: 1 1 auto;
   display: block;
   width: 100%;

package/dist-src/components/InsuranceOptions/Insurance.js

@@ -0,0 +1,26 @@
+import React, { useState, useCallback } from 'react';
+import { Repeat, RepeatTiny } from '../Repeat/index';
+import { VisualHeading } from '../Heading/index';
+import OptionBox from '../OptionBox/index';
+import { OptionBoxHeading, OptionBoxContent } from '../OptionBox/wrapper';
+import { ButtonInline } from '../Button/index';
+import InsuranceModal from './InsuranceModal';
+const Insurance = ({ id, branch, insuranceOptions }) => {
+    const [modal, setModal] = useState(false);
+    const toggleModal = useCallback(() => setModal(!modal), [modal]);
+    if (!insuranceOptions.length) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
+        modal && (React.createElement(InsuranceModal, { id: id, branch: branch, onClose: toggleModal, insuranceOptions: insuranceOptions[0] })),
+        React.createElement(Repeat, null,
+            React.createElement(RepeatTiny, null,
+                React.createElement(VisualHeading, null, "V\u00E4lj till f\u00F6rs\u00E4kring")),
+            React.createElement(RepeatTiny, null,
+                React.createElement(React.Fragment, null, insuranceOptions.map((insuranceOption, index) => (React.createElement(OptionBox, { key: `${insuranceOption.url}-${index}`, logo: insuranceOption.logotype || undefined, logoAlt: insuranceOption.name || 'Logotyp' },
+                    React.createElement(OptionBoxHeading, null, "F\u00E5 prisf\u00F6rslag"),
+                    React.createElement(OptionBoxContent, null,
+                        React.createElement("p", null,
+                            React.createElement(ButtonInline, { onClick: toggleModal }, "Mer information")))))))))));
+};
+export default Insurance;

package/dist-src/components/InsuranceOptions/InsuranceFree.js

@@ -0,0 +1,31 @@
+import React, { useState, useCallback } from 'react';
+import { Repeat, RepeatTiny } from '../Repeat/index';
+import { VisualHeading } from '../Heading/index';
+import OptionBox from '../OptionBox/index';
+import { OptionBoxContent } from '../OptionBox/wrapper';
+import Content from '../Content/index';
+import { marked } from 'marked';
+import { ButtonInline } from '../Button/index';
+import InsuranceFreeModal from './InsuranceFreeModal';
+const Insurance = ({ insuranceOptions }) => {
+    var _a, _b;
+    const [modal, setModal] = useState(false);
+    const toggleModal = useCallback(() => setModal(!modal), [modal]);
+    if (!insuranceOptions.length) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
+        modal && React.createElement(InsuranceFreeModal, { onClose: toggleModal, insuranceOptions: insuranceOptions[0] }),
+        React.createElement(Repeat, null,
+            React.createElement(RepeatTiny, null,
+                React.createElement(VisualHeading, null, (_b = (_a = insuranceOptions[0]) === null || _a === void 0 ? void 0 : _a.insuranceHeader) !== null && _b !== void 0 ? _b : 'Försäkring')),
+            React.createElement(RepeatTiny, null,
+                React.createElement(React.Fragment, null, insuranceOptions.map((insuranceOption, index) => (React.createElement(OptionBox, { key: `${insuranceOption.url}-${index}`, logo: insuranceOption.logotype || undefined, logoAlt: insuranceOption.name || 'Logotyp' },
+                    insuranceOption.description && (React.createElement(Content, { dangerouslySetInnerHTML: {
+                            __html: marked(insuranceOption.description),
+                        } })),
+                    React.createElement(OptionBoxContent, null,
+                        React.createElement("p", null,
+                            React.createElement(ButtonInline, { onClick: toggleModal }, "Mer information")))))))))));
+};
+export default Insurance;

package/dist-src/components/InsuranceOptions/InsuranceFreeModal.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import Modal from '../Modal/index';
+import Content from '../Content/index';
+import { Repeat } from '../Repeat/index';
+import { ButtonInline } from '../Button/index';
+import LogoBox from '../LogoBox/index';
+import { marked } from 'marked';
+const InsuranceFreeModal = ({ onClose, insuranceOptions }) => {
+    var _a;
+    return (React.createElement(Modal, { title: (_a = insuranceOptions === null || insuranceOptions === void 0 ? void 0 : insuranceOptions.insuranceHeader) !== null && _a !== void 0 ? _a : 'Försäkring', onClose: onClose },
+        (insuranceOptions === null || insuranceOptions === void 0 ? void 0 : insuranceOptions.longDescription) && (React.createElement(Repeat, null,
+            React.createElement(Content, { dangerouslySetInnerHTML: {
+                    __html: marked(insuranceOptions.longDescription),
+                } }))),
+        (insuranceOptions === null || insuranceOptions === void 0 ? void 0 : insuranceOptions.url) && (React.createElement(Repeat, null,
+            React.createElement(ButtonInline, { as: "a", href: insuranceOptions.url, target: "_blank", rel: "noopener noreferrer" }, "L\u00E4s mer om f\u00F6rs\u00E4kringen (\u00D6ppnas i ett nytt f\u00F6nster)"))),
+        (insuranceOptions === null || insuranceOptions === void 0 ? void 0 : insuranceOptions.logotype) && (React.createElement(Repeat, null,
+            React.createElement(LogoBox, { logo: insuranceOptions.logotype, alt: insuranceOptions.name || 'Logotyp', wide: true })))));
+};
+export default InsuranceFreeModal;

package/dist-src/components/InsuranceOptions/InsuranceModal.js

@@ -0,0 +1,105 @@
+import React, { useState, useCallback } from 'react';
+import Modal from '../Modal/index';
+import Content from '../Content/index';
+import { Repeat, RepeatTiny, RepeatSmall } from '../Repeat/index';
+import LogoBox from '../LogoBox/index';
+import DetailBox from '../DetailBox/index';
+import ExtendInfo from '../ExtendInfo/index';
+import Snackbar from '../Snackbar/index';
+import { UtilityTextBold } from '../Utility/index';
+import InputLabel from '../InputLabel/index';
+import InputText from '../InputText/index';
+import InputCheckbox from '../InputCheckbox/index';
+import InputSelect from '../InputSelect/index';
+import { H4 } from '../Heading/index';
+import { InputGroup, InputGroupColumn } from '../InputGroup/index';
+import { ButtonPrimary, ButtonContent, ButtonInline } from '../Button/index';
+import { ContentLogo, ContentLogoText, ContentLogoMedia } from '../ContentLogo/index';
+import { ColumnRow, ColumnRowItem } from '../ColumnRow/index';
+import useInsuranceCalculation from '../../hooks/useInsurance';
+import { ssnIsValid } from '../../utils/ssn';
+import Loader from '../Loader/index';
+import { numberSeparator } from '../../utils/formats';
+import { DrivingDistance } from '../../@types/codegen/types';
+import PubSub from '../../utils/pubsub/pubsub';
+const InsuranceModal = ({ id, branch, onClose, insuranceOptions }) => {
+    const [form, setForm] = useState({
+        ssn: '',
+        drivingDistance: DrivingDistance.Between0And1000,
+    });
+    const [payload, setPayload] = useState();
+    const { loading, data, error } = useInsuranceCalculation(id, (branch === null || branch === void 0 ? void 0 : branch.id) ? branch === null || branch === void 0 ? void 0 : branch.id : undefined, ssnIsValid(payload === null || payload === void 0 ? void 0 : payload.ssn) ? payload === null || payload === void 0 ? void 0 : payload.ssn : undefined, payload === null || payload === void 0 ? void 0 : payload.drivingDistance);
+    const onChangeSsn = useCallback((e) => setForm({ ...form, ssn: e.currentTarget.value }), [form]);
+    const onChangeDrivingDistance = useCallback((e) => setForm({ ...form, drivingDistance: e.currentTarget.value }), [form]);
+    const onShowInsurances = useCallback(() => {
+        PubSub.publish('InsuranceInterest');
+        setPayload(form);
+    }, [form]);
+    const onKeyDown = useCallback((e) => {
+        if (e.keyCode === 13 && ssnIsValid(form.ssn) && !loading) {
+            onShowInsurances();
+        }
+    }, [form]);
+    const options = [
+        { value: DrivingDistance.Between0And1000, displayName: '0 - 1000' },
+        { value: DrivingDistance.Between1000And1500, displayName: '1000 - 1500' },
+        { value: DrivingDistance.Between1500And2000, displayName: '1500 - 2000' },
+        { value: DrivingDistance.Between2000And2500, displayName: '2000 - 2500' },
+        { value: DrivingDistance.Over2500, displayName: '2500+' },
+    ];
+    return (React.createElement(Modal, { title: "F\u00F6rs\u00E4kring", onClose: onClose },
+        ((insuranceOptions === null || insuranceOptions === void 0 ? void 0 : insuranceOptions.description) || (insuranceOptions === null || insuranceOptions === void 0 ? void 0 : insuranceOptions.logotype)) && (React.createElement(Repeat, null,
+            React.createElement(ContentLogo, null,
+                insuranceOptions.description && (React.createElement(ContentLogoText, null,
+                    React.createElement(Content, null,
+                        React.createElement("p", null, insuranceOptions.description)))),
+                insuranceOptions.logotype && (React.createElement(ContentLogoMedia, null,
+                    React.createElement(LogoBox, { logo: insuranceOptions.logotype, alt: insuranceOptions.name || 'Logotyp', wide: true })))))),
+        React.createElement(Repeat, null,
+            React.createElement(RepeatSmall, null,
+                React.createElement(RepeatTiny, null,
+                    React.createElement(InputGroup, null,
+                        React.createElement(InputGroupColumn, null,
+                            React.createElement(InputLabel, { htmlFor: "input-insurance-personalnumber" }, "Personnummer"),
+                            React.createElement(InputText, { placeholder: "\u00C5\u00C5\u00C5\u00C5MMDD-XXXX", label: "Personnummer", value: form.ssn, onChange: onChangeSsn, onKeyDown: onKeyDown, id: "input-insurance-personalnumber" })),
+                        React.createElement(InputGroupColumn, null,
+                            React.createElement(InputLabel, { htmlFor: "input-insurance-mileage" }, "Uppskattad k\u00F6rstr\u00E4cka per \u00E5r"),
+                            React.createElement(InputSelect, { value: form.drivingDistance, onChange: onChangeDrivingDistance, options: options, unit: "mil", title: "Uppskattad k\u00F6rstr\u00E4cka per \u00E5r" })))),
+                React.createElement(RepeatTiny, null,
+                    React.createElement(ButtonPrimary, { fullWidth: true, disabled: !ssnIsValid(form.ssn) || loading, onClick: onShowInsurances },
+                        React.createElement(ButtonContent, null, "Visa f\u00F6rs\u00E4kringar")))),
+            false && (React.createElement(RepeatSmall, null,
+                React.createElement(InputCheckbox, { id: "input-insurance-save-personalnumber" }, "Spara personnummer p\u00E5 denna enhet"))),
+            React.createElement(RepeatSmall, null,
+                React.createElement(Content, { small: true },
+                    React.createElement("p", null, "Spara personnummer p\u00E5 denna dator f\u00F6r att direkt visa f\u00F6rs\u00E4kringskostnaderna i Wayke. Personnumret lagras inte hos Wayke utan finns bara sparad i din webbl\u00E4sare.")))),
+        loading && (React.createElement(Repeat, null,
+            React.createElement(Loader, null))),
+        error && (React.createElement(Repeat, null,
+            React.createElement(Snackbar, { severity: "error", icon: true, heading: "Ett fel har intr\u00E4ffat" }, "Kunde inte h\u00E4mta f\u00F6rs\u00E4kringar. V\u00E4nligen f\u00F6rs\u00F6k igen."))),
+        React.createElement(React.Fragment, null, (data === null || data === void 0 ? void 0 : data.insurances) && (React.createElement(Repeat, null, data === null || data === void 0 ? void 0 : data.insurances.map((insurance) => (React.createElement(Repeat, { key: insurance.name },
+            React.createElement(DetailBox, { heading: `${numberSeparator(insurance.price)} ${insurance.unit}`, description: insurance.name },
+                React.createElement(Repeat, null,
+                    React.createElement(React.Fragment, null, insurance.description && (React.createElement(RepeatTiny, null,
+                        React.createElement(Content, null,
+                            React.createElement("p", null, insurance.description))))),
+                    React.createElement(React.Fragment, null, insurance.url && (React.createElement(RepeatTiny, null,
+                        React.createElement(ButtonInline, { as: "a", href: insurance.url || '', target: "_blank", rel: "noopener noreferrer nofollow" }, "F\u00F6rk\u00F6psinformation och villkor (\u00F6ppnas i ny flik)"))))),
+                insurance.items && insurance.items.length > 0 && (React.createElement(Repeat, null,
+                    React.createElement(H4, null, "F\u00F6rs\u00E4kringen inneh\u00E5ller"),
+                    insurance.items.map((item) => (React.createElement(RepeatSmall, { key: item.name || '' },
+                        React.createElement(ExtendInfo, { title: item.name || '' }, item.description)))))),
+                insurance.addons && insurance.addons.length > 0 && (React.createElement(Repeat, null,
+                    React.createElement(H4, null, "V\u00E4lj till"),
+                    insurance.addons.map((addon) => (React.createElement(RepeatSmall, { key: addon.title || '' },
+                        React.createElement(ColumnRow, null,
+                            React.createElement(ColumnRowItem, null,
+                                React.createElement(ExtendInfo, { title: addon.title || '' }, addon.description)),
+                            React.createElement(ColumnRowItem, null,
+                                React.createElement(UtilityTextBold, null,
+                                    "+",
+                                    addon.price,
+                                    " ",
+                                    addon.unit)))))))))))))))));
+};
+export default InsuranceModal;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import Insurance from './Insurance';
+import InsuranceFree from './InsuranceFree';
+const InsuranceOptions = ({ id, branch, insuranceOptions }) => {
+    if (!insuranceOptions.length) {
+        return null;
+    }
+    if (insuranceOptions.length > 0) {
+        if (insuranceOptions[0].requiresDistance && insuranceOptions[0].requiresPersonalNumber)
+            return React.createElement(Insurance, { id: id, branch: branch, insuranceOptions: insuranceOptions });
+        return React.createElement(InsuranceFree, { insuranceOptions: insuranceOptions });
+    }
+    return null;
+};
+export default InsuranceOptions;

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Wrapper, UiBlock, Item, Img, CloseBtn } from './wrapper';
+import { IconCancel } from '../Icon/index';
+import EmbeddedVideoLightbox from '../Video/EmbeddedVideoLightbox';
+import SphereLightbox from '../Sphere/SphereLightbox';
+import ThreeSixtyLightbox from '../ThreeSixty/ThreeSixtLightbox';
+const Lightbox = ({ index, media, onClose }) => {
+    const onRef = (ref) => {
+        if (ref) {
+            setTimeout(() => {
+                ref.scrollIntoView();
+            }, 300);
+        }
+    };
+    const onKeyDown = (e) => {
+        if (e.keyCode === 27) {
+            onClose();
+        }
+    };
+    return (React.createElement(Wrapper, { ref: (ref) => ref === null || ref === void 0 ? void 0 : ref.focus(), onKeyDown: onKeyDown, tabIndex: 0 },
+        React.createElement(UiBlock, { onClick: onClose, "aria-hidden": true }),
+        media.map((m, i) => (React.createElement(Item, { key: i, ref: index === i ? onRef : undefined },
+            m.type === 'image' && (React.createElement(Img, { id: `lightbox-image-${i}`, src: m.files[0].url, alt: `Bild ${i + 1}` })),
+            m.type === 'threesixty' && React.createElement(ThreeSixtyLightbox, { urls: m.files.map((x) => x.url) }),
+            m.type === 'sphere' && React.createElement(SphereLightbox, { url: m.files[0].url }),
+            m.type === 'embedded' && React.createElement(EmbeddedVideoLightbox, { url: m.files[0].url })))),
+        React.createElement(CloseBtn, { onClick: onClose, title: "St\u00E4ng" },
+            React.createElement(IconCancel, { block: true }))));
+};
+export default Lightbox;

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

@@ -1,9 +1,7 @@
 import styled from 'styled-components';
-
 import { size } from '../../layout/helpers';
 import { ButtonReset } from '../Button/index';
-
-export const Wrapper = styled.div`
+export const Wrapper = styled.div `
   position: fixed;
   top: 0;
   bottom: 0;
@@ -17,10 +15,9 @@ export const Wrapper = styled.div`
     padding: ${size(2)};
   }
 `;
-
 export const UiBlock = styled.div.attrs(() => ({
-  role: 'button',
-}))`
+    role: 'button',
+})) `
   position: fixed;
   top: 0;
   bottom: 0;
@@ -29,16 +26,14 @@ export const UiBlock = styled.div.attrs(() => ({
   background-color: rgba(0, 0, 0, 0.3);
   z-index: -1;
 `;
-
-export const Item = styled.div`
+export const Item = styled.div `
   position: relative;
 
   & + & {
     margin-top: ${size(1)};
   }
 `;
-
-export const Img = styled.img`
+export const Img = styled.img `
   position: relative;
   display: block;
   max-width: 100%;
@@ -50,8 +45,7 @@ export const Img = styled.img`
     max-height: calc(100vh - ${size(4)});
   }
 `;
-
-export const CloseBtn = styled(ButtonReset)`
+export const CloseBtn = styled(ButtonReset) `
   display: flex;
   align-items: center;
   justify-content: center;

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { Spinner, Wrapper } from './wrapper';
+import { SrOnly } from '../SrOnly/index';
+const Loader = ({ inline, center }) => (React.createElement(Wrapper, { inline: inline, center: center },
+    React.createElement(Spinner, { "aria-hidden": "true" }),
+    React.createElement(SrOnly, null, "Laddar...")));
+export default Loader;

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

@@ -1,9 +1,7 @@
 import styled, { css } from 'styled-components';
-
 import { size } from '../../layout/helpers';
 import { rotate } from '../../layout/keyframes';
-
-export const Spinner = styled.div`
+export const Spinner = styled.div `
   display: block;
   margin: 0 auto;
   width: ${size(4)};
@@ -13,22 +11,12 @@ export const Spinner = styled.div`
   border-top-color: transparent;
   animation: ${rotate} 600ms linear infinite;
 `;
-
-type WrapperProps = React.DetailedHTMLProps<
-  React.HTMLAttributes<HTMLDivElement>,
-  HTMLDivElement
-> & {
-  inline?: boolean;
-  center?: boolean;
-};
-
 export const Wrapper = styled.div.attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-text',
-  role: 'status',
-}))<WrapperProps>`
-  ${({ inline }) =>
-    inline &&
-    css`
+    className: 'wayke__theme wayke__color--primary-text',
+    role: 'status',
+})) `
+  ${({ inline }) => inline &&
+    css `
       display: inline-block;
       vertical-align: middle;
       color: currentColor !important;
@@ -39,9 +27,8 @@ export const Wrapper = styled.div.attrs(() => ({
       }
     `}
 
-  ${({ center }) =>
-    center &&
-    css`
+  ${({ center }) => center &&
+    css `
       position: absolute;
       top: 50%;
       left: 50%;

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Logo } from './wrapper';
+const LogoBox = ({ logo, logo2x, alt, wide }) => {
+    let logoRetina = logo;
+    if (logo2x) {
+        logoRetina = `${logo2x} 2x`;
+    }
+    return React.createElement(Logo, { src: logo, srcSet: logoRetina, alt: alt, wide: wide });
+};
+export default LogoBox;

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

@@ -1,19 +1,12 @@
 import styled, { css } from 'styled-components';
-
 import { size } from '../../layout/helpers';
-
-type LogoProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
-  wide?: boolean;
-};
-
-export const Logo = styled.img<LogoProps>`
+export const Logo = styled.img `
   display: block;
   max-width: ${size(9.5)};
   max-height: ${size(6)};
 
-  ${({ wide }) =>
-    wide &&
-    css`
+  ${({ wide }) => wide &&
+    css `
       max-width: ${size(20)};
     `}
 `;

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

@@ -0,0 +1,27 @@
+import React, { useState, useCallback } from 'react';
+import useSettings from '../../State/Settings/useSettings';
+import { Wrapper, Image, Placeholder, PlaceholderAction } from './wrapper';
+import { ButtonSecondary, ButtonContent } from '../Button/index';
+const StaticMap = ({ position }) => {
+    const { googleMapsApiKey, googleMapsMarker } = useSettings();
+    const [visible, setVisible] = useState(false);
+    const onShowMap = useCallback((e) => {
+        if (googleMapsApiKey) {
+            e.preventDefault();
+            setVisible(true);
+        }
+    }, []);
+    if (!position) {
+        return null;
+    }
+    const { latitude, longitude } = position;
+    if (visible && googleMapsApiKey) {
+        return (React.createElement(Wrapper, { href: `http://maps.google.com/maps?q=${latitude},${longitude}`, title: "Visa p\u00E5 Google Maps", target: "_blank", rel: "nofollow noopener noreferrer" },
+            React.createElement(Image, { src: `https://maps.googleapis.com/maps/api/staticmap?center=${latitude},${longitude}&zoom=10&size=640x280&maptype=roadmap&markers=${googleMapsMarker ? `icon:${encodeURIComponent(googleMapsMarker)}` : ''}%7C${latitude},${longitude}&key=${googleMapsApiKey}`, alt: "Karta" })));
+    }
+    return (React.createElement(Placeholder, { href: `http://maps.google.com/maps?q=${latitude},${longitude}`, target: "_blank", rel: "noopener noreferrer nofollow", onClick: onShowMap },
+        React.createElement(PlaceholderAction, null,
+            React.createElement(ButtonSecondary, { as: "div" },
+                React.createElement(ButtonContent, null, "Visa karta")))));
+};
+export default StaticMap;

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

@@ -1,16 +1,13 @@
 import styled from 'styled-components';
-
-export const Wrapper = styled.a`
+export const Wrapper = styled.a `
   display: block;
 `;
-
-export const Image = styled.img`
+export const Image = styled.img `
   display: block;
   width: 100%;
   border-radius: 3px;
 `;
-
-export const Placeholder = styled.a`
+export const Placeholder = styled.a `
   display: block;
   position: relative;
   width: 100%;
@@ -20,8 +17,7 @@ export const Placeholder = styled.a`
   border-radius: 3px;
   color: ${(props) => props.theme.color.textDark};
 `;
-
-export const PlaceholderAction = styled.div`
+export const PlaceholderAction = styled.div `
   position: absolute;
   top: 50%;
   left: 50%;