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

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

@@ -1,14 +1,11 @@
 import styled from 'styled-components';
-
 import { size } from '../../layout/helpers';
-
-export const List = styled.ul`
+export const List = styled.ul `
   list-style: none;
   padding: 0;
   margin: 0;
 `;
-
-export const Item = styled.li`
+export const Item = styled.li `
   display: flex;
   align-items: flex-end;
   line-height: 1;
@@ -17,11 +14,9 @@ export const Item = styled.li`
     margin-top: ${size(0.5)};
   }
 `;
-
-export const Label = styled.div`
+export const Label = styled.div `
   flex: 1 1 auto;
 `;
-
-export const Value = styled.div`
+export const Value = styled.div `
   flex-shrink: 0;
 `;

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

@@ -0,0 +1,38 @@
+import React, { useCallback, useMemo } from 'react';
+import LazyLoad from 'react-lazyload';
+import { Wrapper, Image, Picture, Source, Img, Content, ContentBody, ContentFooter, Heading, Link, Description, Usp, Price, CurrentPrice, OldPrice, PriceCell, Label, } from './wrapper';
+import UspList from '../UspList/index';
+import { DEFAULT_PLACEHOLDER_IMAGE } from '../../utils/constants';
+import usePath from '../../State/Path/usePath';
+const ProductCard = ({ id, title, href, image, pathRoute, placeholderImage, description, uspList, price, oldPrice, leasingPrice, onClick, }) => {
+    const { pushState } = usePath();
+    const _onClick = useMemo(() => (onClick ? () => onClick(id) : undefined), [id]);
+    const onHrefClick = useCallback((e) => {
+        if (!!pathRoute && href) {
+            e.preventDefault();
+            pushState(href);
+        }
+    }, [id, pathRoute, href]);
+    return (React.createElement(Wrapper, { onClick: _onClick },
+        React.createElement(Image, null,
+            React.createElement(LazyLoad, null, image ? (React.createElement(React.Fragment, null,
+                React.createElement(Picture, null,
+                    React.createElement(Source, { type: "image/webp", srcSet: `${image}?spec=822x548&format=webp 822w, ${image}?spec=750x500&format=webp 750w, ${image}?spec=411x274&format=webp 411w`, sizes: "(min-width: 600px) calc(((100vw - 48px) / 2) - 8px), (min-width: 900px) calc(((100vw - 48px) / 3) - 10.666px), (min-width: 1312px) 410px, calc(100vw - 32px)" }),
+                    React.createElement(Img, { srcSet: `${image}?spec=822x548 822w, ${image}?spec=750x500 750w, ${image}?spec=411x274 411w`, sizes: "(min-width: 600px) calc(((100vw - 48px) / 2) - 8px), (min-width: 900px) calc(((100vw - 48px) / 3) - 10.666px), (min-width: 1312px) 410px, calc(100vw - 32px)", src: `${image}?spec=411x274`, alt: title })))) : (React.createElement(Picture, null,
+                React.createElement(Img, { src: placeholderImage || DEFAULT_PLACEHOLDER_IMAGE }))))),
+        React.createElement(Content, null,
+            React.createElement(ContentBody, null,
+                React.createElement(Heading, null, href ? (React.createElement(Link, { onClick: onHrefClick, href: href, title: title, "aria-label": title }, title)) : (title)),
+                description && React.createElement(Description, null, description),
+                uspList && (React.createElement(Usp, null,
+                    React.createElement(UspList, { small: true, items: uspList })))),
+            React.createElement(ContentFooter, null,
+                React.createElement(Price, null,
+                    React.createElement(PriceCell, null,
+                        oldPrice ? React.createElement(OldPrice, null, oldPrice) : React.createElement(Label, null, "Pris"),
+                        React.createElement(CurrentPrice, null, price)),
+                    leasingPrice && (React.createElement(PriceCell, null,
+                        React.createElement(Label, null, "Leasingpris"),
+                        React.createElement(CurrentPrice, null, leasingPrice))))))));
+};
+export default ProductCard;

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

@@ -1,8 +1,6 @@
 import styled from 'styled-components';
-
 import { size } from '../../layout/helpers';
-
-export const Wrapper = styled.article`
+export const Wrapper = styled.article `
   position: relative;
   height: 100%;
   display: flex;
@@ -14,8 +12,7 @@ export const Wrapper = styled.article`
     transform: scale(0.98);
   }
 `;
-
-export const Image = styled.div`
+export const Image = styled.div `
   flex-shrink: 0;
   position: relative;
   height: 0;
@@ -42,12 +39,9 @@ export const Image = styled.div`
     }
   }
 `;
-
-export const Picture = styled.picture``;
-
-export const Source = styled.source``;
-
-export const Img = styled.img`
+export const Picture = styled.picture ``;
+export const Source = styled.source ``;
+export const Img = styled.img `
   position: absolute;
   width: 100%;
   height: 100%;
@@ -56,24 +50,20 @@ export const Img = styled.img`
   left: auto;
   border-radius: 3px;
 `;
-
-export const Content = styled.div`
+export const Content = styled.div `
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   margin-top: ${size(2)};
 `;
-
-export const ContentBody = styled.div``;
-
-export const ContentFooter = styled.div`
+export const ContentBody = styled.div ``;
+export const ContentFooter = styled.div `
   margin-top: auto;
   padding-top: ${size(1)};
 `;
-
 export const Heading = styled.h1.attrs(() => ({
-  className: 'wayke__theme wayke__font--bold',
-}))`
+    className: 'wayke__theme wayke__font--bold',
+})) `
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -82,8 +72,7 @@ export const Heading = styled.h1.attrs(() => ({
   margin: 0;
   font-size: 1rem;
 `;
-
-export const Link = styled.a`
+export const Link = styled.a `
   display: block;
   color: inherit;
   text-decoration: none;
@@ -102,8 +91,7 @@ export const Link = styled.a`
     text-decoration: underline;
   }
 `;
-
-export const Description = styled.div`
+export const Description = styled.div `
   font-size: 0.875rem;
   display: -webkit-box;
   -webkit-line-clamp: 3;
@@ -111,37 +99,31 @@ export const Description = styled.div`
   overflow: hidden;
   margin-top: ${size(0.25)};
 `;
-
-export const Usp = styled.div`
+export const Usp = styled.div `
   margin-top: ${size(1)};
 `;
-
-export const Price = styled.div`
+export const Price = styled.div `
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   width: 100%;
 `;
-
 export const CurrentPrice = styled.div.attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-text wayke__font--bold',
-}))`
+    className: 'wayke__theme wayke__color--primary-text wayke__font--bold',
+})) `
   font-size: 1rem;
   margin-right: ${size(1)};
 `;
-
-export const PriceCell = styled.div`
+export const PriceCell = styled.div `
   flex: 1 1 auto;
   padding-right: ${size(1)};
 `;
-
-export const OldPrice = styled.div`
+export const OldPrice = styled.div `
   text-decoration: line-through;
   color: ${(props) => props.theme.color.textDarkLighten};
   font-size: 0.875rem;
 `;
-
-export const Label = styled.label`
+export const Label = styled.label `
   color: ${(props) => props.theme.color.disabledText};
   font-size: 0.875rem;
 `;

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

@@ -1,9 +1,7 @@
 import styled from 'styled-components';
-
 import { size } from '../../layout/helpers';
 import { Wrapper as Container } from '../Container/wrapper';
-
-export const ProductPage = styled.div`
+export const ProductPage = styled.div `
   display: flex;
   flex-direction: column;
 
@@ -11,8 +9,7 @@ export const ProductPage = styled.div`
     flex-direction: row;
   }
 `;
-
-export const ProductPageAside = styled.div`
+export const ProductPageAside = styled.div `
   ${(props) => props.theme.breakpoint.LtMd} {
     display: contents;
   }
@@ -23,8 +20,7 @@ export const ProductPageAside = styled.div`
     padding-right: ${size(2)};
   }
 `;
-
-export const ProductPageMain = styled.div`
+export const ProductPageMain = styled.div `
   ${(props) => props.theme.breakpoint.LtMd} {
     display: contents;
   }
@@ -35,15 +31,7 @@ export const ProductPageMain = styled.div`
     padding-left: ${size(2)};
   }
 `;
-
-type ProductPageAsideSectionProps = React.DetailedHTMLProps<
-  React.HTMLAttributes<HTMLDivElement>,
-  HTMLDivElement
-> & {
-  mobileOrder?: number;
-};
-
-export const ProductPageAsideSection = styled.div<ProductPageAsideSectionProps>`
+export const ProductPageAsideSection = styled.div `
   ${(props) => props.theme.breakpoint.LtMd} {
     order: ${(props) => props.mobileOrder};
 
@@ -70,8 +58,7 @@ export const ProductPageAsideSection = styled.div<ProductPageAsideSectionProps>`
     }
   }
 `;
-
-export const ProductPageMainSection = styled.div`
+export const ProductPageMainSection = styled.div `
   ${(props) => props.theme.breakpoint.LtMd} {
     order: 99;
     padding: ${size(4)} 0;
@@ -93,7 +80,6 @@ export const ProductPageMainSection = styled.div`
     }
   }
 `;
-
-export const ProductPageContentLimit = styled.div`
+export const ProductPageContentLimit = styled.div `
   max-width: 420px;
 `;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Wrapper, Description, Bar, BarActive } from './wrapper';
+const ProgressBar = ({ unit, valueCurrent, valueMax }) => {
+    const barWidth = (valueCurrent / valueMax) * 100;
+    return (React.createElement(Wrapper, null,
+        React.createElement(Description, null,
+            "Visar ",
+            valueCurrent.toString(),
+            " av ",
+            valueMax.toString(),
+            " ",
+            unit),
+        React.createElement(Bar, null,
+            React.createElement(BarActive, { style: { width: `${barWidth}%` }, "aria-valuenow": valueCurrent, "aria-valuemin": 0, "aria-valuemax": valueMax }))));
+};
+export default ProgressBar;

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

@@ -1,26 +1,21 @@
 import styled from 'styled-components';
-
 import { size } from '../../layout/helpers';
-
-export const Wrapper = styled.div`
+export const Wrapper = styled.div `
   text-align: center;
 `;
-
-export const Description = styled.div`
+export const Description = styled.div `
   margin-bottom: ${size(1.5)};
   font-size: 0.875rem;
 `;
-
-export const Bar = styled.div`
+export const Bar = styled.div `
   position: relative;
   width: 100%;
   height: 2px;
   background-color: ${(props) => props.theme.color.accentDark};
 `;
-
 export const BarActive = styled.div.attrs(() => ({
-  role: 'progressbar',
-}))`
+    role: 'progressbar',
+})) `
   position: absolute;
   top: 0;
   left: 0;

package/dist-src/components/RangeSlider/RangeSliderSimple.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Slider, Rail, Handles, Tracks } from 'react-compound-slider';
+import { Bar, RangeSpan, RangeSpanItem, Slider as OwnSlider } from './wrapper';
+import { Handle } from './handle';
+import { Track } from './track';
+import { numberSeparator } from '../../utils/formats';
+const RangeSliderSimple = ({ loading, values, domain, steps, unit, formatValues, onChange, onUpdate, }) => {
+    const first = steps[0];
+    const second = steps[1];
+    const step = second - first;
+    const currentMin = formatValues ? numberSeparator(domain[0]) : domain[0];
+    const currentMax = formatValues ? numberSeparator(domain[1]) : domain[1];
+    if (steps.length < 2) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(OwnSlider, null,
+            React.createElement(Slider, { disabled: loading, mode: 1, step: step, domain: domain, onChange: onChange, onUpdate: onUpdate, values: values, rootStyle: { position: 'relative' } },
+                React.createElement(Rail, null, ({ getRailProps }) => React.createElement(Bar, { ...getRailProps() })),
+                React.createElement(Handles, null, ({ handles, getHandleProps }) => (React.createElement("div", { className: "slider-handles" }, handles.map((handle) => (React.createElement(Handle, { key: handle.id, handle: handle, domain: domain, getHandleProps: getHandleProps })))))),
+                React.createElement(Tracks, { right: false }, ({ tracks, getTrackProps }) => (React.createElement("div", { className: "slider-tracks" }, tracks.map(({ id, source, target }) => (React.createElement(Track, { key: id, source: source, target: target, getTrackProps: getTrackProps })))))))),
+        false && (React.createElement(RangeSpan, null,
+            React.createElement(RangeSpanItem, null, `${currentMin}${unit ? ` ${unit}` : ''}`),
+            React.createElement(RangeSpanItem, null, `${currentMax}${unit ? ` ${unit}` : ''}`)))));
+};
+export default RangeSliderSimple;

package/dist-src/components/RangeSlider/SliderWithLabel.js

@@ -0,0 +1,21 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { numberSeparator } from '../../utils/formats';
+import RangeSliderLabel from '../RangeSliderLabel/index';
+import { RepeatTiny } from '../Repeat/index';
+import RangeSliderSimple from './RangeSliderSimple';
+const SliderWithLabel = ({ label, values, domain, steps, loading, unit, formatValues, onChange, }) => {
+    const [local, setLocal] = useState(steps);
+    const onUpdate = useCallback((nextValues) => {
+        setLocal([...nextValues]);
+    }, []);
+    useEffect(() => {
+        if (!loading)
+            setLocal(undefined);
+    }, [loading]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(RepeatTiny, null,
+            React.createElement(RangeSliderLabel, { label: label, value: `${numberSeparator((local === null || local === void 0 ? void 0 : local[0]) || values[0])}${unit ? ` ${unit}` : ''}` })),
+        React.createElement(RepeatTiny, null,
+            React.createElement(RangeSliderSimple, { loading: loading, values: values, domain: domain, steps: steps, onChange: onChange, onUpdate: onUpdate, unit: unit, formatValues: formatValues }))));
+};
+export default SliderWithLabel;

package/dist-src/components/RangeSlider/handle.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Handle as OwnHandle } from './wrapper';
+export const Handle = ({ domain: [min, max], handle: { id, value, percent }, getHandleProps, }) => (React.createElement(OwnHandle, { role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, style: {
+        left: `${percent}%`,
+    }, ...getHandleProps(id) }));

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

@@ -0,0 +1,50 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import { Slider, Rail, Handles, Tracks } from 'react-compound-slider';
+import { Bar, RangeSpan, RangeSpanItem, Slider as OwnSlider, Track as OwnTrack, Handle as OwnHandle, } from './wrapper';
+import { Handle } from './handle';
+import { Track } from './track';
+import { numberSeparator } from '../../utils/formats';
+const getSteps = (steps) => {
+    let current = Number.MAX_SAFE_INTEGER;
+    steps.forEach((step, index) => {
+        if (index !== 0) {
+            const c = step - steps[index - 1];
+            if (c < current) {
+                current = c;
+            }
+        }
+    });
+    return current;
+};
+const RangeSlider = ({ loading, values, domain, steps, unit, formatValues, maxPrefix, onChange, }) => {
+    const [current, setCurrent] = useState(values);
+    const onUpdate = useCallback((nextValues) => {
+        if (!isNaN(nextValues[0]) && !isNaN(nextValues[1])) {
+            setCurrent(nextValues.slice());
+        }
+    }, [values]);
+    const step = getSteps(steps);
+    const currentMin = formatValues ? numberSeparator(current[0]) : current[0];
+    const currentMax = formatValues ? numberSeparator(current[1]) : current[1];
+    const equal = domain[0] === domain[1];
+    const _maxPrefix = maxPrefix && domain[1] === current[1] ? maxPrefix : undefined;
+    useEffect(() => {
+        if (values[0] !== current[0] || values[1] !== current[1]) {
+            setCurrent(values);
+        }
+    }, [values]);
+    return (React.createElement(React.Fragment, null,
+        equal ? (React.createElement(OwnSlider, null,
+            React.createElement(Bar, null,
+                React.createElement(OwnTrack, { style: { left: '0', width: '100%' } }),
+                React.createElement(OwnHandle, { role: "slider", "aria-disabled": true, style: { left: '0' } }),
+                React.createElement(OwnHandle, { role: "slider", "aria-disabled": true, style: { left: '100%' } })))) : (React.createElement(OwnSlider, null,
+            React.createElement(Slider, { disabled: loading, mode: 1, step: step, domain: domain, onChange: onChange, onUpdate: onUpdate, values: values, rootStyle: { position: 'relative' } },
+                React.createElement(Rail, null, ({ getRailProps }) => React.createElement(Bar, { ...getRailProps() })),
+                React.createElement(Handles, null, ({ handles, getHandleProps }) => (React.createElement("div", { className: "slider-handles" }, handles.map((handle) => (React.createElement(Handle, { key: handle.id, handle: handle, domain: domain, getHandleProps: getHandleProps })))))),
+                React.createElement(Tracks, { left: false, right: false }, ({ tracks, getTrackProps }) => (React.createElement("div", { className: "slider-tracks" }, tracks.map(({ id, source, target }) => (React.createElement(Track, { key: id, source: source, target: target, getTrackProps: getTrackProps }))))))))),
+        React.createElement(RangeSpan, null,
+            React.createElement(RangeSpanItem, null, `${currentMin}${unit ? ` ${unit}` : ''}`),
+            React.createElement(RangeSpanItem, null, `${currentMax}${_maxPrefix ? _maxPrefix : ''}${unit ? ` ${unit}` : ''}`))));
+};
+export default RangeSlider;

package/dist-src/components/RangeSlider/track.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Track as OwnTrack } from './wrapper';
+export const Track = ({ source, target, getTrackProps }) => (React.createElement(OwnTrack, { style: {
+        left: `${source.percent}%`,
+        width: `${target.percent - source.percent}%`,
+    }, ...getTrackProps() }));

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

@@ -1,15 +1,12 @@
 import styled from 'styled-components';
-
 import { size } from '../../layout/helpers';
-
-export const RangeSpan = styled.div`
+export const RangeSpan = styled.div `
   display: flex;
   align-items: center;
   margin-top: ${size(1)};
   user-select: none;
 `;
-
-export const RangeSpanItem = styled.div`
+export const RangeSpanItem = styled.div `
   font-size: 0.875rem;
   color: ${(props) => props.theme.color.textDarkLighten};
 
@@ -21,12 +18,10 @@ export const RangeSpanItem = styled.div`
     flex-shrink: 0;
   }
 `;
-
-export const Slider = styled.div`
+export const Slider = styled.div `
   padding: 10px 12px;
 `;
-
-export const Bar = styled.div`
+export const Bar = styled.div `
   position: relative;
   height: 4px;
 
@@ -40,21 +35,19 @@ export const Bar = styled.div`
     background-color: ${(props) => props.theme.color.accentDark};
   }
 `;
-
 export const Track = styled.div.attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-bg',
-}))`
+    className: 'wayke__theme wayke__color--primary-bg',
+})) `
   position: absolute;
   top: 0;
   height: 4px;
   margin-left: -12px;
   margin-right: -12px;
 `;
-
 export const Handle = styled.div.attrs(() => ({
-  role: 'slider',
-  className: 'wayke__theme wayke__color--primary-bg',
-}))`
+    role: 'slider',
+    className: 'wayke__theme wayke__color--primary-bg',
+})) `
   position: absolute;
   top: 50%;
   transform-origin: 50% 50%;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Wrapper, Label, Value } from './wrapper';
+const RangeSliderLabel = ({ label, value, highlight }) => (React.createElement(Wrapper, null,
+    React.createElement(Label, null, label),
+    value && React.createElement(Value, { isHighlighted: highlight }, value)));
+export default RangeSliderLabel;

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

@@ -1,32 +1,23 @@
 import styled, { css } from 'styled-components';
-
 import { size } from '../../layout/helpers';
-
-export const Wrapper = styled.div`
+export const Wrapper = styled.div `
   display: flex;
   align-items: flex-end;
 `;
-
 export const Label = styled.div.attrs(() => ({
-  className: 'wayke__theme wayke__font--bold',
-}))`
+    className: 'wayke__theme wayke__font--bold',
+})) `
   flex: 1 1 auto;
 `;
-
-type ValueProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
-  isHighlighted?: boolean;
-};
-
 export const Value = styled.div.attrs(() => ({
-  className: 'wayke__theme wayke__font--bold wayke__color--primary-text',
-}))<ValueProps>`
+    className: 'wayke__theme wayke__font--bold wayke__color--primary-text',
+})) `
   flex-shrink: 0;
   padding-left: ${size(2)};
   font-size: 1.125rem;
 
-  ${({ isHighlighted }) =>
-    isHighlighted &&
-    css`
+  ${({ isHighlighted }) => isHighlighted &&
+    css `
       font-size: 1.375rem;
       color: ${(props) => props.theme.color.textDark} !important;
     `}

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

@@ -1,20 +1,16 @@
 import styled from 'styled-components';
-
 import { size } from '../../layout/helpers';
-
-export const Repeat = styled.div`
+export const Repeat = styled.div `
   & + & {
     margin-top: ${size(3)};
   }
 `;
-
-export const RepeatTiny = styled.div`
+export const RepeatTiny = styled.div `
   & + & {
     margin-top: ${size(1)};
   }
 `;
-
-export const RepeatSmall = styled.div`
+export const RepeatSmall = styled.div `
   & + & {
     margin-top: ${size(2)};
   }

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

@@ -0,0 +1,39 @@
+import React, { useCallback } from 'react';
+import { Wrapper, Header, HeaderCount, HeaderSort, Body, Footer, FooterProgress, FooterAction, ResultCount, } from './wrapper';
+import ProgressBar from '../ProgressBar/index';
+import { ButtonSecondary, ButtonContent } from '../Button/index';
+import Loader from '../Loader/index';
+import { numberSeparator } from '../../utils/formats';
+import useSearch from '../../State/Search/useSearch';
+import SortSelect from '../SortSelect/index';
+import { getTranslatedSortOptionDisplayName } from '../../utils/sortOptions';
+const Result = ({ children }) => {
+    var _a;
+    const { loading, response, documents, queryFilter, onLoadMore, onFilterUpdate } = useSearch();
+    const onSortOptionChange = useCallback((e) => onFilterUpdate(e.currentTarget.value), []);
+    const numberOfDocuments = (documents === null || documents === void 0 ? void 0 : documents.length) || 0;
+    const numberOfHits = (response === null || response === void 0 ? void 0 : response.documentList.numberOfHits) || 0;
+    const useSkeletons = !!(queryFilter === null || queryFilter === void 0 ? void 0 : queryFilter.concatResult);
+    const selectedSortOption = (_a = response === null || response === void 0 ? void 0 : response.documentList.sortOptions.find((x) => x.selected)) === null || _a === void 0 ? void 0 : _a.query;
+    const sortOptions = response === null || response === void 0 ? void 0 : response.documentList.sortOptions.filter((x) => x.displayName !== 'relevance').map((so) => ({
+        value: so.query,
+        displayName: getTranslatedSortOptionDisplayName(so.displayName),
+    }));
+    if (loading && !useSkeletons) {
+        return React.createElement(Loader, null);
+    }
+    return (React.createElement(Wrapper, null,
+        React.createElement(Header, null,
+            React.createElement(HeaderCount, null,
+                React.createElement(ResultCount, null, `${numberSeparator(numberOfHits)} ${numberOfHits === 1 ? 'bil' : 'bilar'}`)),
+            sortOptions && selectedSortOption && (React.createElement(HeaderSort, null,
+                React.createElement(SortSelect, { value: selectedSortOption, options: sortOptions, onChange: onSortOptionChange })))),
+        React.createElement(Body, null, children),
+        React.createElement(Footer, null,
+            React.createElement(FooterProgress, null,
+                React.createElement(ProgressBar, { unit: "bilar", valueCurrent: numberOfDocuments, valueMax: numberOfHits })),
+            numberOfDocuments !== numberOfHits && (React.createElement(FooterAction, null,
+                React.createElement(ButtonSecondary, { disabled: loading, onClick: onLoadMore, title: "Visa fler", "aria-label": "Visa fler" },
+                    React.createElement(ButtonContent, null, "Visa fler")))))));
+};
+export default Result;

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

@@ -1,39 +1,29 @@
 import styled from 'styled-components';
-
 import { size } from '../../layout/helpers';
-
-export const Wrapper = styled.div``;
-
-export const Header = styled.header`
+export const Wrapper = styled.div ``;
+export const Header = styled.header `
   display: flex;
   margin-bottom: ${size(4)};
 `;
-
-export const HeaderCount = styled.div`
+export const HeaderCount = styled.div `
   flex: 1 1 auto;
 `;
-
-export const HeaderSort = styled.div`
+export const HeaderSort = styled.div `
   flex-shrink: 0;
 `;
-
-export const Body = styled.div``;
-
-export const Footer = styled.footer`
+export const Body = styled.div ``;
+export const Footer = styled.footer `
   margin-top: ${size(8)};
   text-align: center;
 `;
-
-export const FooterProgress = styled.div`
+export const FooterProgress = styled.div `
   max-width: 175px;
   margin: 0 auto;
 `;
-
-export const FooterAction = styled.div`
+export const FooterAction = styled.div `
   margin-top: ${size(3)};
 `;
-
-export const ResultCount = styled.div`
+export const ResultCount = styled.div `
   color: ${(props) => props.theme.color.textDarkLighten};
   font-size: 0.875rem;
 `;