@wayke-se/components-react 3.0.0-beta.1 → 3.0.0-beta.10

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { MediaButtonWrapper } from './wrapper';
+import { ButtonSecondary, ButtonContent } from '../Button/index';
+const MediaButton = ({ text, onClick }) => (React.createElement(MediaButtonWrapper, null,
+    React.createElement(ButtonSecondary, { onClick: onClick, title: text },
+        React.createElement(ButtonContent, null, text))));
+export default MediaButton;

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

@@ -0,0 +1,119 @@
+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) => {
+        const element = quickNavRef.current?.querySelectorAll('li')?.[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?.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?.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?.length ? (media.map((m, i) => (React.createElement(Item, { key: m.files[0].url || i },
+                        m.type === 'image' && (React.createElement(Image, { src: m.files[0].formats.filter(notEmpty).find((x) => x.format === '1170x')?.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?.length ? (media.map((m, i) => {
+                    const src = m.files[0].formats.filter(notEmpty).find((x) => x.format === '225x150')?.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?.length && (React.createElement(Lightbox, { media: media, index: index, onClose: onToggleLightbox }))));
+};
+export default Gallery;

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

@@ -1,12 +1,9 @@
 import styled, { css } from 'styled-components';
-
 import { size } from '../../layout/helpers';
 import { ButtonReset } from '../Button/index';
 import { Wrapper as Container } from '../Container/wrapper';
-
 const quickNavWidth = 83; // 75px + 8px
-
-export const Wrapper = styled.div`
+export const Wrapper = styled.div `
   ${(props) => props.theme.breakpoint.LtMd} {
     ${Container} & {
       margin-left: ${size(-3)};
@@ -26,8 +23,7 @@ export const Wrapper = styled.div`
     padding-right: ${quickNavWidth}px;
   }
 `;
-
-export const Main = styled.div`
+export const Main = styled.div `
   position: relative;
   height: 0;
   padding-bottom: 66.66666667%;
@@ -52,8 +48,7 @@ export const Main = styled.div`
     }
   }
 `;
-
-export const Alt = styled.div`
+export const Alt = styled.div `
   position: absolute;
   top: 0;
   bottom: 0;
@@ -76,8 +71,7 @@ export const Alt = styled.div`
     pointer-events: none;
   }
 `;
-
-export const Item = styled.div`
+export const Item = styled.div `
   position: relative;
   width: 100%;
   height: 100%;
@@ -92,8 +86,7 @@ export const Item = styled.div`
     transition: border-radius 150ms ease;
   }
 `;
-
-export const SliderWrapper = styled.div`
+export const SliderWrapper = styled.div `
   position: absolute;
   top: 0;
   bottom: 0;
@@ -106,76 +99,6 @@ export const SliderWrapper = styled.div`
     bottom: 0;
     left: 0;
     right: 0;
-    user-select: none;
-    touch-action: pan-y;
-    -webkit-tap-highlight-color: transparent;
-
-    .slick-list,
-    .slick-track {
-      transform: translate3d(0, 0, 0);
-    }
-  }
-
-  .slick-list {
-    position: relative;
-    display: block;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-
-    &:focus {
-      outline: none;
-    }
-
-    &.dragging {
-      cursor: pointer;
-      cursor: hand;
-    }
-  }
-
-  .slick-track {
-    position: relative;
-    top: 0;
-    left: 0;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-
-    &::before,
-    &::after {
-      content: '';
-      display: table;
-    }
-
-    &::after {
-      clear: both;
-    }
-  }
-
-  .slick-slide {
-    display: none;
-    float: left;
-    min-height: 1px;
-  }
-
-  .slick-loading {
-    .slick-track {
-      visibility: hidden;
-    }
-
-    img {
-      display: none;
-    }
-  }
-
-  .slick-initialized {
-    .slick-slide {
-      display: block;
-    }
-  }
-
-  .slick-slide.dragging img {
-    pointer-events: none;
   }
 
   ${(props) => props.theme.breakpoint.LtMd} {
@@ -203,8 +126,7 @@ export const SliderWrapper = styled.div`
     }
   }
 `;
-
-export const Image = styled.img`
+export const Image = styled.img `
   display: block;
   position: absolute;
   left: 0;
@@ -217,8 +139,7 @@ export const Image = styled.img`
   object-fit: cover;
   cursor: pointer;
 `;
-
-export const ImageFull = styled.img`
+export const ImageFull = styled.img `
   display: block;
   position: absolute;
   top: 0;
@@ -227,10 +148,8 @@ export const ImageFull = styled.img`
   height: 100%;
   object-fit: cover;
 `;
-
 // Arrow Nav
-
-const Arrow = styled(ButtonReset)`
+const Arrow = styled(ButtonReset) `
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
@@ -276,18 +195,14 @@ const Arrow = styled(ButtonReset)`
     display: none;
   }
 `;
-
-export const ArrowLeft = styled(Arrow)`
+export const ArrowLeft = styled(Arrow) `
   left: ${size(2)};
 `;
-
-export const ArrowRight = styled(Arrow)`
+export const ArrowRight = styled(Arrow) `
   right: ${size(2)};
 `;
-
 // Quick Nav
-
-export const QuickNav = styled.ul`
+export const QuickNav = styled.ul `
   position: relative;
   max-height: 100%;
   list-style: none;
@@ -296,26 +211,17 @@ export const QuickNav = styled.ul`
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 `;
-
-type QuickNavItemProps = React.DetailedHTMLProps<
-  React.HTMLAttributes<HTMLLIElement>,
-  HTMLLIElement
-> & {
-  active?: boolean;
-};
-
 export const QuickNavItem = styled.li.attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-text',
-}))<QuickNavItemProps>`
+    className: 'wayke__theme wayke__color--primary-text',
+})) `
   position: relative;
 
   & + & {
     margin-top: ${size(1)};
   }
 
-  ${({ active }) =>
-    active &&
-    css`
+  ${({ active }) => active &&
+    css `
       :before {
         content: '';
         position: absolute;
@@ -328,8 +234,7 @@ export const QuickNavItem = styled.li.attrs(() => ({
       }
     `}
 `;
-
-export const QuickNavBtn = styled(ButtonReset)`
+export const QuickNavBtn = styled(ButtonReset) `
   position: relative;
   display: block;
   width: 100%;
@@ -361,8 +266,7 @@ export const QuickNavBtn = styled(ButtonReset)`
     transform: scale(0.95);
   }
 `;
-
-export const QuickNavImg = styled.img`
+export const QuickNavImg = styled.img `
   display: block;
   position: absolute;
   top: 0;
@@ -371,20 +275,16 @@ export const QuickNavImg = styled.img`
   height: 100%;
   object-fit: cover;
 `;
-
 // Media Button
-
-export const MediaButtonWrapper = styled.div`
+export const MediaButtonWrapper = styled.div `
   position: absolute;
   bottom: ${size(2)};
   left: 50%;
   transform: translateX(-50%);
   z-index: 1;
 `;
-
 // Sphere Close Button
-
-export const EnableNavigationButton = styled.div`
+export const EnableNavigationButton = styled.div `
   position: absolute;
   bottom: ${size(2)};
   left: 50%;

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Wrapper, List, Item } from './wrapper';
+import ProductCard from '../ProductCard/index';
+import { numberSeparator } from '../../utils/formats';
+const resolveImage = (document) => {
+    const img = document.featuredImage?.files?.[0]?.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?.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/{src/components/Grid/wrapper.tsx → dist-src/components/Grid/wrapper.js}

@@ -1,18 +1,14 @@
 import styled from 'styled-components';
-
 import { size } from '../../layout/helpers';
-
-export const Wrapper = styled.div``;
-
-export const List = styled.ul`
+export const Wrapper = styled.div ``;
+export const List = styled.ul `
   display: flex;
   flex-wrap: wrap;
   list-style: none;
   padding: 0;
   margin: ${size(-2)} ${size(-1)};
 `;
-
-export const Item = styled.li`
+export const Item = styled.li `
   flex: 1 1 auto;
   width: 100%;
   max-width: 100%;

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

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

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

@@ -0,0 +1,10 @@
+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/{src/components/InputCheckbox/wrapper.tsx → dist-src/components/InputCheckbox/wrapper.js}

@@ -1,11 +1,9 @@
 import * as React from 'react';
 import styled, { css } from 'styled-components';
-
 import { size } from '../../layout/helpers';
-
 export const Label = styled.label.attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-text',
-}))`
+    className: 'wayke__theme wayke__color--primary-text',
+})) `
   position: relative;
   display: flex;
   align-items: flex-start;
@@ -33,14 +31,12 @@ export const Label = styled.label.attrs(() => ({
     margin-top: -2px;
   }
 `;
-
-export const Wrapper = styled((props) => <div {...props} />).attrs(({ type, checked }) => ({
-  role: type || 'checkbox',
-  'aria-checked': checked,
-}))`
-  ${({ error }) =>
-    error &&
-    css`
+export const Wrapper = styled((props) => React.createElement("div", { ...props })).attrs(({ type, checked }) => ({
+    role: type || 'checkbox',
+    'aria-checked': checked,
+})) `
+  ${({ error }) => error &&
+    css `
       ${Label} {
         color: ${(props) => props.theme.color.ui.negative};
 
@@ -50,13 +46,10 @@ export const Wrapper = styled((props) => <div {...props} />).attrs(({ type, chec
       }
     `}
 `;
-
-export const Input = styled((props) => (
-  <input {...props} className={`${props.checked ? 'checked' : undefined} ${props.className}`} />
-)).attrs(({ type, checked }) => ({
-  checked,
-  type: type || 'checkbox',
-}))`
+export const Input = styled((props) => (React.createElement("input", { ...props, className: `${props.checked ? 'checked' : undefined} ${props.className}` }))).attrs(({ type, checked }) => ({
+    checked,
+    type: type || 'checkbox',
+})) `
   position: fixed;
   left: -9999px;
   opacity: 0;
@@ -81,7 +74,6 @@ export const Input = styled((props) => (
     }
   }
 `;
-
-export const LabelText = styled.div`
+export const LabelText = styled.div `
   color: ${(props) => props.theme.color.textDark};
 `;

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;