@wayke-se/components-react 2.16.0 → 3.0.0-beta.2

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

@@ -1,124 +0,0 @@
-import React, { useState, useCallback, useRef, useMemo } from 'react';
-import Slider from 'react-slick';
-import scrollIntoView from 'scroll-into-view-if-needed';
-import { Wrapper, SliderWrapper, Item, Image, ArrowLeft, ArrowRight, Main, Alt, QuickNav, QuickNavItem, QuickNavBtn, QuickNavImg, EnableNavigationButton, } from './wrapper';
-import { IconChevronLeft, IconChevronRight } from '../Icon/index';
-import { ButtonSecondary, ButtonContent } from '../Button/index';
-import Lightbox from '../Lightbox/index';
-import EmbededVideo from '../Video/EmbededVideo';
-import QuickNavEmbeded from '../Video/QuickNavEmbeded';
-import Sphere from '../Sphere/Sphere';
-import { notEmpty } from '../../utils/formats';
-import ThreeSixty from '../ThreeSixty/ThreeSixty';
-import PubSub from '../../utils/pubsub/pubsub';
-import { DEFAULT_PLACEHOLDER_IMAGE } from '../../utils/constants';
-const sliderSettings = {
-    dots: false,
-    arrows: false,
-    infinite: true,
-    speed: 300,
-    slidesToShow: 1,
-    slidesToScroll: 1,
-};
-const Gallery = ({ media, placeholderImage }) => {
-    const slider = useRef(null);
-    const quickNavRef = useRef(null);
-    const isDragging = useRef(false);
-    const [index, setIndex] = useState(0);
-    const [lightbox, setLightbox] = useState(false);
-    const [navigationDisabled, setNavigationDisabled] = useState(false);
-    const beforeChange = useCallback((_, newIndex) => {
-        var _a, _b;
-        const element = (_b = (_a = quickNavRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('li')) === null || _b === void 0 ? void 0 : _b[newIndex];
-        if (element) {
-            scrollIntoView(element, { scrollMode: 'if-needed', block: 'nearest', inline: 'nearest' });
-        }
-        setIndex(newIndex);
-    }, []);
-    const onMouseDown = useCallback(() => {
-        if (isDragging.current) {
-            isDragging.current = false;
-        }
-    }, []);
-    const onMouseMove = useCallback(() => {
-        if (!isDragging.current) {
-            isDragging.current = true;
-        }
-    }, []);
-    const onClick = useCallback(() => {
-        PubSub.publish('ImagesClick');
-        if (!isDragging.current && !lightbox && !!(media === null || media === void 0 ? void 0 : media.length)) {
-            setLightbox(true);
-        }
-    }, [lightbox, media]);
-    const nextImage = useCallback(() => {
-        if (!slider || !slider.current) {
-            return;
-        }
-        slider.current.slickNext();
-    }, [slider]);
-    const prevImage = useCallback(() => {
-        if (!slider || !slider.current) {
-            return;
-        }
-        slider.current.slickPrev();
-    }, [slider]);
-    const goTo = (target) => {
-        if (!slider || !slider.current) {
-            return;
-        }
-        if (slider.current) {
-            setIndex(target);
-            slider.current.slickGoTo(target);
-        }
-    };
-    const onDisableNavigation = () => {
-        if (!isDragging.current)
-            setNavigationDisabled(true);
-    };
-    const onEnableNavigation = (e) => {
-        e.stopPropagation();
-        isDragging.current = false;
-        setNavigationDisabled(false);
-    };
-    const onToggleLightbox = useCallback(() => setLightbox(!lightbox), [lightbox]);
-    const mediaLength = (media === null || media === void 0 ? void 0 : media.length) || 0;
-    const placeholder = useMemo(() => placeholderImage || DEFAULT_PLACEHOLDER_IMAGE, [placeholderImage]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Wrapper, null,
-            React.createElement(Main, null,
-                React.createElement(SliderWrapper, { onMouseDown: onMouseDown, onMouseMove: onMouseMove, onClick: onClick },
-                    React.createElement(Slider, { ...sliderSettings, swipe: !navigationDisabled, touchMove: !navigationDisabled, swipeToSlide: !navigationDisabled, ref: slider, beforeChange: beforeChange }, !!(media === null || media === void 0 ? void 0 : media.length) ? (media.map((m, i) => {
-                        var _a;
-                        return (React.createElement(Item, { key: m.files[0].url || i },
-                            m.type === 'image' && (React.createElement(Image, { src: (_a = m.files[0].formats.filter(notEmpty).find((x) => x.format === '1170x')) === null || _a === void 0 ? void 0 : _a.url, alt: `Bild ${i + 1}` })),
-                            m.type === 'threesixty' && (React.createElement(ThreeSixty, { urls: m.files.map((x) => x.url), visible: i === index, onDisableNavigation: onDisableNavigation, navigationDisabled: navigationDisabled })),
-                            m.type === 'embedded' && React.createElement(EmbededVideo, { src: m.files[0].url, index: i + 1 }),
-                            m.type === 'sphere' && (React.createElement(Sphere, { visible: i === index, url: m.files[0].url, preview: m.files[0].url, onDisableNavigation: onDisableNavigation, navigationDisabled: navigationDisabled }))));
-                    })) : (React.createElement(Item, { key: placeholder },
-                        React.createElement(Image, { src: placeholder, alt: `Bild 1` })))),
-                    navigationDisabled && mediaLength > 1 && (React.createElement(EnableNavigationButton, null,
-                        React.createElement(ButtonSecondary, { onClick: onEnableNavigation, title: "St\u00E4ng" },
-                            React.createElement(ButtonContent, null, "St\u00E4ng"))))),
-                !navigationDisabled && mediaLength > 1 && (React.createElement(React.Fragment, null,
-                    React.createElement(ArrowLeft, { onClick: prevImage, title: "F\u00F6reg\u00E5ende bild" },
-                        React.createElement(IconChevronLeft, { block: true })),
-                    React.createElement(ArrowRight, { onClick: nextImage, title: "N\u00E4sta bild" },
-                        React.createElement(IconChevronRight, { block: true }))))),
-            React.createElement(Alt, null,
-                React.createElement(QuickNav, { ref: quickNavRef }, !!(media === null || media === void 0 ? void 0 : media.length) ? (media.map((m, i) => {
-                    var _a;
-                    const src = ((_a = m.files[0].formats.filter(notEmpty).find((x) => x.format === '225x150')) === null || _a === void 0 ? void 0 : _a.url) ||
-                        m.files[0].url;
-                    return (React.createElement(QuickNavItem, { key: src || i, active: index === i },
-                        React.createElement(QuickNavBtn, { onClick: () => goTo(i), title: `Gå till bild ${i + 1}` },
-                            m.type === 'image' && React.createElement(QuickNavImg, { src: src, alt: `Bild ${i + 1}` }),
-                            m.type === 'threesixty' && React.createElement(QuickNavImg, { src: src, alt: `Bild ${i + 1}` }),
-                            m.type === 'embedded' && React.createElement(QuickNavEmbeded, { src: src, index: i }),
-                            m.type === 'sphere' && (React.createElement(QuickNavImg, { src: m.files[0].url, alt: `Bild ${i + 1}` })))));
-                })) : (React.createElement(QuickNavItem, { key: placeholder, active: true },
-                    React.createElement(QuickNavBtn, { onClick: () => goTo(0), title: `Gå till bild 0` },
-                        React.createElement(QuickNavImg, { src: placeholder, alt: `Bild 1` }))))))),
-        lightbox && !!(media === null || media === void 0 ? void 0 : media.length) && (React.createElement(Lightbox, { media: media, index: index, onClose: onToggleLightbox }))));
-};
-export default Gallery;

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

@@ -1,45 +0,0 @@
-import React from 'react';
-import { Wrapper, List, Item } from './wrapper';
-import ProductCard from '../ProductCard/index';
-import { numberSeparator } from '../../utils/formats';
-const resolveImage = (document) => {
-    var _a, _b, _c;
-    const img = (_c = (_b = (_a = document.featuredImage) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.url;
-    if (img) {
-        return `${img}?w=567&q=72`;
-    }
-    return undefined;
-};
-const Grid = ({ documents, placeholderImage, hashRoute, pathRoute, onClickItem }) => {
-    if (!documents) {
-        return null;
-    }
-    return (React.createElement(Wrapper, null,
-        React.createElement(List, null, documents.map((document) => {
-            const _path = pathRoute === null || pathRoute === void 0 ? void 0 : pathRoute.replace(/^\/|\/$/g, '');
-            const prefix = _path ? `/${_path}/` : '/';
-            const pathRouteUrl = window.location.pathname === '/'
-                ? `${prefix}${document._id}`
-                : `${window.location.pathname}${prefix}${document._id}`;
-            return (React.createElement(Item, { key: document._id },
-                React.createElement(ProductCard, { id: document._id, onClick: onClickItem, title: document.title, pathRoute: pathRoute, href: pathRoute ? pathRouteUrl : hashRoute ? `#${document._id}` : undefined, image: resolveImage(document), placeholderImage: placeholderImage, description: document.shortDescription, uspList: [
-                        {
-                            title: document.modelYear,
-                        },
-                        {
-                            title: `${numberSeparator(document.mileage)} mil`,
-                        },
-                        {
-                            title: document.gearboxType,
-                        },
-                        {
-                            title: document.fuelType,
-                        },
-                    ], price: `${numberSeparator(document.price)} kr`, leasingPrice: document.leasingPrice !== undefined
-                        ? `${numberSeparator(document.leasingPrice)} kr`
-                        : undefined, oldPrice: document.oldPrice !== undefined && document.price < document.oldPrice
-                        ? `${numberSeparator(document.oldPrice)} kr`
-                        : undefined })));
-        }))));
-};
-export default Grid;

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

@@ -1,54 +0,0 @@
-import styled, { css } from 'styled-components';
-import { size } from '../../layout/helpers';
-const HeadingBase = styled.div.attrs(() => ({
-    className: 'wayke__theme wayke__font--bold',
-})) `
-  margin-top: 0;
-  margin-bottom: ${size(2)};
-  font-weight: normal;
-  line-height: 1.2;
-
-  ${({ noMargin }) => noMargin &&
-    css `
-      margin-bottom: 0;
-    `}
-`;
-export const H1 = styled(HeadingBase).attrs((props) => ({
-    as: props.as || 'h1',
-})) `
-  font-size: 1.875rem;
-`;
-export const H2 = styled(HeadingBase).attrs((props) => ({
-    as: props.as || 'h2',
-})) `
-  font-size: 1.5rem;
-`;
-/*
-export const H3 = styled(HeadingBase).attrs<{ as: string }>((props) => ({
-  as: props.as || 'h3',
-}))`
-  font-size: 1.125rem;
-`;
-*/
-export const H4 = styled(HeadingBase).attrs((props) => ({
-    as: props.as || 'h4',
-})) `
-  font-size: 1rem;
-`;
-export const H5 = styled(HeadingBase).attrs((props) => ({
-    as: props.as || 'h5',
-})) `
-  font-size: 0.875rem;
-`;
-/*
-export const H6 = styled(HeadingBase).attrs<{ as: string }>((props) => ({
-  as: props.as || 'h6',
-}))`
-  font-size: 0.67rem;
-`;
-*/
-export const VisualHeading = styled.div.attrs(() => ({
-    className: 'wayke__theme wayke__font--bold',
-})) `
-  font-size: 1em;
-`;

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

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import styled, { css } from 'styled-components';
-const Icon = styled.svg.attrs(() => ({
-    xmlns: 'http://www.w3.org/2000/svg',
-})) `
-  display: inline-block;
-  vertical-align: middle;
-  width: 1em;
-  height: 1em;
-  fill: currentColor;
-
-  ${({ block }) => block &&
-    css `
-      display: block;
-    `}
-`;
-export const IconInfo = ({ block }) => (React.createElement(Icon, { viewBox: "0 0 24 24", block: block },
-    React.createElement("path", { d: "M12 0C5.371 0 0 5.371 0 12s5.371 12 12 12 12-5.371 12-12S18.629 0 12 0zm0 2c5.5234 0 10 4.4766 10 10s-4.4766 10-10 10S2 17.5234 2 12 6.4766 2 12 2zm0 3.8125c-.1836 0-.336-.004-.5.0313-.164.0351-.3164.125-.4375.2187-.121.0938-.211.2227-.2813.375s-.0937.332-.0937.5625c0 .2266.0234.4063.0938.5625.0703.1563.1601.2813.2812.375.121.0938.2734.1484.4375.1875.164.039.3164.0625.5.0625.1797 0 .371-.0234.5313-.0625.1601-.039.2851-.0938.4062-.1875.121-.0938.211-.2188.2813-.375.0703-.1523.125-.336.125-.5625 0-.2305-.0547-.4102-.125-.5625-.0704-.1523-.1602-.2813-.2813-.375-.121-.0938-.246-.1836-.4063-.2188-.1601-.0351-.3515-.0312-.5312-.0312zm-1.2188 3.3438v8.9687h2.4375V9.1562z" })));
-export const IconCancel = ({ block }) => (React.createElement(Icon, { viewBox: "0 0 16 16", block: block },
-    React.createElement("path", { d: "M15.7 14.3c.4.4.4 1 0 1.4-.2.2-.5.3-.7.3s-.5-.1-.7-.3L8 9.4l-6.3 6.3c-.2.2-.4.3-.7.3s-.5-.1-.7-.3c-.4-.4-.4-1 0-1.4L6.6 8 .3 1.7C-.1 1.3-.1.7.3.3c.4-.4 1-.4 1.4 0L8 6.6 14.3.3c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4L9.4 8l6.3 6.3z" })));
-export const IconChevronDown = ({ block }) => (React.createElement(Icon, { viewBox: "0 0 18 18", block: block },
-    React.createElement("path", { d: "M17.7 5L9 13.7.3 5l.7-.7 8 8 8-8 .7.7z" })));
-export const IconChevronLeft = ({ block }) => (React.createElement(Icon, { viewBox: "0 0 18 18", block: block },
-    React.createElement("path", { d: "M13 17.7L4.3 9 13 .3l.7.7-8 8 8 8-.7.7z" })));
-export const IconChevronRight = ({ block }) => (React.createElement(Icon, { viewBox: "0 0 18 18", block: block },
-    React.createElement("path", { d: "M5 .3L13.7 9 5 17.7l-.7-.7 8-8-8-8L5 .3z" })));
-export const IconCheck = ({ block }) => (React.createElement(Icon, { viewBox: "0 0 16 16", block: block },
-    React.createElement("path", { d: "M15.6 4.3l-9.3 9.4c-.5.5-1.4.5-1.9 0l-4-4c-.5-.5-.5-1.4 0-1.9s1.3-.5 1.9 0l3.1 3.1 8.4-8.5c.5-.5 1.4-.5 1.9 0s.4 1.3-.1 1.9z" })));
-export const IconRadio = ({ block }) => (React.createElement(Icon, { viewBox: "0 0 16 16", block: block },
-    React.createElement("path", { d: "M13 8c0 2.8-2.2 5-5 5s-5-2.2-5-5 2.2-5 5-5 5 2.2 5 5zm3 0c0 4.4-3.6 8-8 8s-8-3.6-8-8 3.6-8 8-8 8 3.6 8 8zm-1 0c0-3.9-3.1-7-7-7S1 4.1 1 8s3.1 7 7 7 7-3.1 7-7z" })));
-export const IconSearch = ({ block }) => (React.createElement(Icon, { viewBox: "0 0 16 16", block: block },
-    React.createElement("path", { d: "M15.5 15.3L11 10.8c1.2-1.1 2-2.7 2-4.5C13 2.9 10.2.1 6.8.1S.5 2.8.5 6.2s2.8 6.2 6.2 6.2c1.3 0 2.5-.4 3.5-1.1l4.6 4.6.7-.6zM1.4 6.2C1.4 3.3 3.8 1 6.7 1S12 3.3 12 6.2c0 1.5-.7 2.9-1.7 3.9l-.7.5c-.8.5-1.8.8-2.8.8-3 .1-5.4-2.3-5.4-5.2z" })));
-export const IconExclamationCircle = ({ block }) => (React.createElement(Icon, { viewBox: "0 0 32 32", block: block },
-    React.createElement("path", { d: "M14.482 21.893c0-0.857 0.694-1.551 1.551-1.551s1.551 0.694 1.551 1.551c0 0.857-0.694 1.551-1.551 1.551s-1.551-0.694-1.551-1.551zM16.033 2.838c-7.271 0-13.187 5.916-13.187 13.187s5.916 13.187 13.187 13.187 13.187-5.916 13.187-13.187c0-7.271-5.916-13.187-13.187-13.187zM16.033 27.203c-6.163 0-11.178-5.015-11.178-11.178s5.015-11.178 11.178-11.178c6.164 0 11.178 5.015 11.178 11.178s-5.014 11.178-11.178 11.178zM16.033 8.308c-0.555 0-1.004 0.45-1.004 1.004v8.227c0 0.555 0.45 1.004 1.004 1.004s1.004-0.45 1.004-1.004v-8.227c0-0.555-0.45-1.004-1.004-1.004z" })));
-export const IconExclamationTriangle = ({ block }) => (React.createElement(Icon, { viewBox: "0 0 32 32", block: block },
-    React.createElement("path", { d: "M15.951 19.663c-0.457 0-0.828-0.37-0.828-0.828v-4.357c0-0.457 0.37-0.828 0.828-0.828s0.828 0.37 0.828 0.828v4.357c0 0.457-0.371 0.828-0.828 0.828zM15.952 22.906c-0.305 0-0.606-0.126-0.821-0.341s-0.338-0.514-0.338-0.818 0.122-0.606 0.338-0.821c0.431-0.43 1.209-0.43 1.639 0 0.215 0.215 0.341 0.516 0.341 0.821s-0.126 0.603-0.341 0.818c-0.215 0.215-0.513 0.341-0.818 0.341zM27.049 27.070h-22.196c-0.352 0-0.677-0.186-0.855-0.489s-0.184-0.677-0.014-0.985l11.098-20.105c0.175-0.317 0.508-0.513 0.87-0.513s0.695 0.197 0.87 0.513l11.098 20.105c0.17 0.308 0.165 0.683-0.014 0.985s-0.504 0.489-0.856 0.489zM6.536 25.083h18.83l-9.415-17.056-9.415 17.056z" })));

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

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import { Input, Label, LabelText, Wrapper } from './wrapper';
-const InputCheckbox = ({ children, ...props }) => {
-    const { id } = props;
-    return (React.createElement(Wrapper, { "aria-labelledby": id ? `${id}-label` : undefined },
-        React.createElement(Input, { ...props }),
-        React.createElement(Label, { id: `${id}-label`, htmlFor: id },
-            React.createElement(LabelText, null, children))));
-};
-export default InputCheckbox;

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

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

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

@@ -1,12 +0,0 @@
-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/dist-src/components/InputSelect/index.js

@@ -1,10 +0,0 @@
-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/dist-src/components/InputText/index.js

@@ -1,5 +0,0 @@
-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/dist-src/components/InsuranceOptions/Insurance.js

@@ -1,26 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,105 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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/dist-src/components/Loader/index.js

@@ -1,7 +0,0 @@
-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/dist-src/components/LogoBox/index.js

@@ -1,10 +0,0 @@
-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/dist-src/components/Map/index.js

@@ -1,27 +0,0 @@
-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/dist-src/components/Modal/index.js

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { Portal, PortalNamespace } from '../Portal/index';
-import { H1 } from '../Heading/index';
-import { IconCancel } from '../Icon/index';
-import { Body, Content, Dialog, Header, Heading, UiBlock, Wrapper, Close, CloseBtn, } from './wrapper';
-const Modal = ({ id, title, onClose, children }) => {
-    return (React.createElement(Portal, { id: id || PortalNamespace.DefaultPortal },
-        React.createElement(Wrapper, { onClick: (e) => e.stopPropagation() },
-            React.createElement(UiBlock, { onClick: onClose, title: "St\u00E4ng modal" }),
-            React.createElement(Dialog, null,
-                React.createElement(Content, null,
-                    React.createElement(Header, null,
-                        React.createElement(Heading, null,
-                            React.createElement(H1, { noMargin: true }, title)),
-                        React.createElement(Close, null,
-                            React.createElement(CloseBtn, { onClick: onClose, title: "St\u00E4ng modal" },
-                                React.createElement(IconCancel, { block: true })))),
-                    React.createElement(Body, null, children))))));
-};
-export default Modal;