@wayke-se/components-react 3.8.0 → 3.9.0-beta.1

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

@@ -1,53 +0,0 @@
-import styled from 'styled-components';
-import { size } from '../../layout/helpers';
-const iconSize = '0.875rem';
-const selectPadding = size(2);
-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',
-})) `
-  position: relative;
-  display: block;
-  width: 100%;
-  height: ${(props) => props.theme.distances.inputHeight};
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-  text-indent: 0.01px;
-  border: 0;
-  padding: 0 ${selectPadding};
-  padding-right: calc(${iconSize} + ${selectPadding});
-  background-color: transparent;
-  color: ${(props) => props.theme.color.textDark};
-  border-radius: 0;
-  font-size: 16px;
-  cursor: pointer;
-  z-index: 1;
-
-  :focus {
-    outline: none;
-  }
-
-  ::-ms-expand {
-    display: none;
-  }
-
-  ::-moz-focus-inner {
-    border: 0;
-  }
-`;
-export const Option = styled.option `
-  color: ${(props) => props.theme.color.textDark};
-`;
-export const Icon = styled.div `
-  position: absolute;
-  top: 50%;
-  right: ${selectPadding};
-  transform: translateY(-50%);
-  font-size: ${iconSize};
-`;

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/InputText/wrapper.js

@@ -1,54 +0,0 @@
-import styled from 'styled-components';
-import { size } from '../../layout/helpers';
-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',
-})) `
-  flex: 1 1 auto;
-  display: block;
-  width: 100%;
-  height: ${(props) => props.theme.distances.inputHeight};
-  padding: 0 ${size(2)};
-  background-color: transparent;
-  font-size: 16px;
-  border: none;
-  border-radius: 0;
-  box-shadow: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-
-  :focus {
-    outline: none;
-  }
-
-  &::-webkit-input-placeholder {
-    font-family: inherit;
-    color: ${(props) => props.theme.color.textDarkLighten};
-    font-size: 1em;
-  }
-
-  &:-moz-placeholder {
-    font-family: inherit;
-    color: ${(props) => props.theme.color.textDarkLighten};
-    font-size: 1em;
-  }
-
-  &::-moz-placeholder {
-    font-family: inherit;
-    color: ${(props) => props.theme.color.textDarkLighten};
-    font-size: 1em;
-  }
-
-  &:-ms-input-placeholder {
-    font-family: inherit;
-    color: ${(props) => props.theme.color.textDarkLighten};
-    font-size: 1em;
-  }
-`;

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,30 +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 }) => {
-    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, insuranceOptions[0]?.insuranceHeader ?? '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,19 +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 }) => {
-    return (React.createElement(Modal, { title: insuranceOptions?.insuranceHeader ?? 'Försäkring', onClose: onClose },
-        insuranceOptions?.longDescription && (React.createElement(Repeat, null,
-            React.createElement(Content, { dangerouslySetInnerHTML: {
-                    __html: marked(insuranceOptions.longDescription),
-                } }))),
-        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?.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?.id ? branch?.id : undefined, ssnIsValid(payload?.ssn) ? payload?.ssn : undefined, 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?.description || 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?.insurances && (React.createElement(Repeat, null, 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?.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/Lightbox/wrapper.js

@@ -1,91 +0,0 @@
-import styled from 'styled-components';
-import { size } from '../../layout/helpers';
-import { ButtonReset } from '../Button/index';
-export const Wrapper = styled.div `
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: ${size(3)};
-  z-index: 90;
-  overflow: auto;
-
-  ${(props) => props.theme.breakpoint.LtSm} {
-    padding: ${size(2)};
-  }
-`;
-export const UiBlock = styled.div.attrs(() => ({
-    role: 'button',
-})) `
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: rgba(0, 0, 0, 0.3);
-  z-index: -1;
-`;
-export const Item = styled.div `
-  position: relative;
-
-  & + & {
-    margin-top: ${size(1)};
-  }
-`;
-export const Img = styled.img `
-  position: relative;
-  display: block;
-  max-width: 100%;
-  max-height: calc(100vh - ${size(6)});
-  margin: 0 auto;
-  z-index: 1;
-
-  ${(props) => props.theme.breakpoint.LtSm} {
-    max-height: calc(100vh - ${size(4)});
-  }
-`;
-export const CloseBtn = styled(ButtonReset) `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: fixed;
-  top: ${size(2)};
-  right: ${size(2)};
-  width: ${size(5)};
-  height: ${size(5)};
-  border-radius: 50%;
-  background-color: ${(props) => props.theme.color.bg};
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  transform-origin: 50% 50%;
-  transition: 200ms ease, transform 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
-  z-index: 1;
-
-  :before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: ${(props) => props.theme.color.hoverOverlay};
-    border-radius: 50%;
-    opacity: 0;
-    transition: opacity 150ms ease;
-  }
-
-  :hover {
-    :before {
-      opacity: 1;
-    }
-  }
-
-  :active {
-    transform: scale(0.97);
-  }
-
-  ${(props) => props.theme.breakpoint.LtSm} {
-    top: ${size(1)};
-    right: ${size(1)};
-  }
-`;

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

@@ -1,28 +0,0 @@
-import styled, { css } from 'styled-components';
-export const Link = styled.a.attrs(() => ({
-    className: 'wayke__theme wayke__color--primary-text',
-})) `
-  text-decoration: none;
-  cursor: pointer;
-  text-decoration: underline;
-
-  :not(:hover) {
-    color: ${(props) => props.theme.color.textDark};
-  }
-
-  &:hover {
-    text-decoration: underline;
-  }
-
-  ${({ $hoverGhost }) => $hoverGhost &&
-    css `
-      &:before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-      }
-    `}
-`;

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/Loader/wrapper.js

@@ -1,37 +0,0 @@
-import styled, { css } from 'styled-components';
-import { size } from '../../layout/helpers';
-import { rotate } from '../../layout/keyframes';
-export const Spinner = styled.div `
-  display: block;
-  margin: 0 auto;
-  width: ${size(4)};
-  height: ${size(4)};
-  border-radius: 50%;
-  border: 2px solid currentColor;
-  border-top-color: transparent;
-  animation: ${rotate} 600ms linear infinite;
-`;
-export const Wrapper = styled.div.attrs(() => ({
-    className: 'wayke__theme wayke__color--primary-text',
-    role: 'status',
-})) `
-  ${({ inline }) => inline &&
-    css `
-      display: inline-block;
-      vertical-align: middle;
-      color: currentColor !important;
-
-      ${Spinner} {
-        width: 1em;
-        height: 1em;
-      }
-    `}
-
-  ${({ center }) => center &&
-    css `
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    `}
-`;

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/LogoBox/wrapper.js

@@ -1,12 +0,0 @@
-import styled, { css } from 'styled-components';
-import { size } from '../../layout/helpers';
-export const Logo = styled.img `
-  display: block;
-  max-width: ${size(9.5)};
-  max-height: ${size(6)};
-
-  ${({ wide }) => wide &&
-    css `
-      max-width: ${size(20)};
-    `}
-`;

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/Map/wrapper.js

@@ -1,25 +0,0 @@
-import styled from 'styled-components';
-export const Wrapper = styled.a `
-  display: block;
-`;
-export const Image = styled.img `
-  display: block;
-  width: 100%;
-  border-radius: 3px;
-`;
-export const Placeholder = styled.a `
-  display: block;
-  position: relative;
-  width: 100%;
-  height: 0;
-  padding-bottom: 43.75%; // Proportions of Google Static Map (640x280)
-  background-image: linear-gradient(-15deg, #dfe4ce, #c1d6ea, #dfe4ce);
-  border-radius: 3px;
-  color: ${(props) => props.theme.color.textDark};
-`;
-export const PlaceholderAction = styled.div `
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-`;

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;