@wayke-se/components-react 3.0.0-beta.12 → 3.0.0-beta.14

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { PdfListItem, PdfSubtitle, PdfTitle, PdfContainer, PdfListInner, PdfLink, PdfColumn, } from './wrapper';
+export const PdfDownloadItem = ({ document }) => (React.createElement(PdfListItem, null,
+    React.createElement(PdfListInner, null,
+        React.createElement(PdfColumn, null,
+            React.createElement(PdfTitle, null, document.name),
+            React.createElement(PdfSubtitle, null, document.contentType)),
+        React.createElement(PdfColumn, null,
+            React.createElement(PdfLink, { href: document.url, rel: "noopener noreferrer nofollow", target: "_blank" }, "\u00D6ppna")))));
+export const PdfDownloadContainer = ({ documents }) => (React.createElement(PdfContainer, null, documents.map((document, i) => (React.createElement(PdfDownloadItem, { key: `${document.url}-${i}`, document: document })))));
+export default PdfDownloadContainer;

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

@@ -0,0 +1,55 @@
+import styled from 'styled-components';
+import { size } from '../../layout/helpers';
+export const PdfListItem = styled.li.attrs(() => ({
+    className: 'wayke__theme wayke__color--primary-text',
+})) `
+  flex: 0 0 50%;
+  padding: ${size(1)};
+
+  ${({ theme }) => theme.breakpoint.LtSm} {
+    flex: 0 0 100%;
+  }
+`;
+export const PdfContainer = styled.ul `
+  list-style: none;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  margin: ${size(-1)};
+`;
+export const PdfLink = styled.a.attrs(() => ({
+    className: 'wayke__theme wayke__color--primary-text wayke__font--bold',
+})) `
+  text-decoration: none;
+  font-size: 0.875rem;
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+`;
+export const PdfTitle = styled.div `
+  color: ${(props) => props.theme.color.textDark};
+`;
+export const PdfSubtitle = styled.div `
+  color: ${(props) => props.theme.color.textDarkLighten};
+`;
+export const PdfColumn = styled.div `
+  flex 0 0 auto;
+  &:first-child {
+    flex: 1 1 auto;
+  }
+`;
+export const PdfListInner = styled.div `
+  position: relative;
+  border: 1px solid ${(props) => props.theme.color.border};
+  padding: ${size(1.5)};
+  display: flex;
+  align-items: center;
+  :hover {
+    background-color: ${(props) => props.theme.color.hoverOverlay};
+  }
+`;

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

@@ -0,0 +1,13 @@
+import React, { useState, useCallback } from 'react';
+import { TableColumnRow, TableColumnCell } from '../TableColumn/index';
+import { ButtonContent, ButtonInlineBold } from '../Button/index';
+const PhoneNumber = ({ phoneNumber }) => {
+    const [visible, setVisible] = useState(false);
+    const onClick = useCallback(() => !visible && setVisible(true), [visible]);
+    return (React.createElement(TableColumnRow, null,
+        React.createElement(TableColumnCell, null, "Telefonnummer"),
+        React.createElement(TableColumnCell, null, visible ? (React.createElement(ButtonInlineBold, { as: "a", href: `tel:${phoneNumber}`, title: `Ring ${phoneNumber}` },
+            React.createElement(ButtonContent, null, phoneNumber))) : (React.createElement(ButtonInlineBold, { onClick: onClick, title: "Visa telefonnummer" },
+            React.createElement(ButtonContent, null, "Visa telefonnummer"))))));
+};
+export default PhoneNumber;

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

@@ -0,0 +1,4 @@
+import * as PortalNamespace from './portal-namespace';
+export { default as PortalElement } from './portal-element';
+export { default as Portal } from './portal';
+export { PortalNamespace };

package/dist-src/components/Portal/portal-element.js

@@ -0,0 +1,3 @@
+import * as React from 'react';
+const PortalElement = ({ id }) => React.createElement("div", { id: id });
+export default PortalElement;

package/dist-src/components/Portal/portal-namespace.js

@@ -0,0 +1 @@
+export const DefaultPortal = 'DEFAULT_PORTAL';

package/dist-src/components/Portal/portal.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+const Portal = ({ id, children }) => {
+    const el = React.useRef(document.getElementById(id) || document.createElement('div'));
+    if (!el.current) {
+        return null;
+    }
+    const { current } = el;
+    const [dynamic] = React.useState(!current.parentElement);
+    React.useEffect(() => {
+        if (dynamic) {
+            current.id = id;
+            if (document.body) {
+                document.body.appendChild(current);
+            }
+        }
+        return () => {
+            if (dynamic && current.parentElement) {
+                current.parentElement.removeChild(current);
+            }
+        };
+    }, [id]);
+    return ReactDOM.createPortal(children, current);
+};
+export default React.memo(Portal);

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

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+export const Price = styled.div.attrs(() => ({
+    className: 'wayke__theme wayke__color--primary-text wayke__font--bold',
+})) `
+  font-size: 1.375rem;
+`;
+export const OldPrice = styled.div `
+  color: ${(props) => props.theme.color.textDarkLighten};
+  text-decoration: line-through;
+`;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { List, Item, Value, Label } from './wrapper';
+import { VisualHeading } from '../Heading/index';
+import { Price, OldPrice } from '../Price/index';
+import { numberSeparator } from '../../utils/formats';
+const PriceTable = ({ price, oldPrice }) => (React.createElement(List, null,
+    React.createElement(Item, null,
+        React.createElement(Label, null,
+            React.createElement(VisualHeading, null, "Pris")),
+        React.createElement(Value, null,
+            React.createElement(Price, null,
+                numberSeparator(price),
+                " kr"))),
+    oldPrice !== undefined && (React.createElement(Item, null,
+        React.createElement(Label, null),
+        React.createElement(Value, null,
+            React.createElement(OldPrice, null,
+                numberSeparator(oldPrice),
+                " kr"))))));
+export default PriceTable;

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

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+import { size } from '../../layout/helpers';
+export const List = styled.ul `
+  list-style: none;
+  padding: 0;
+  margin: 0;
+`;
+export const Item = styled.li `
+  display: flex;
+  align-items: flex-end;
+  line-height: 1;
+
+  & + & {
+    margin-top: ${size(0.5)};
+  }
+`;
+export const Label = styled.div `
+  flex: 1 1 auto;
+`;
+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/dist-src/components/ProductCard/wrapper.js

@@ -0,0 +1,129 @@
+import styled from 'styled-components';
+import { size } from '../../layout/helpers';
+export const Wrapper = styled.article `
+  position: relative;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  transform-origin: 50% 50%;
+  transition: transform 150ms ease;
+
+  :active {
+    transform: scale(0.98);
+  }
+`;
+export const Image = styled.div `
+  flex-shrink: 0;
+  position: relative;
+  height: 0;
+  padding-bottom: 66.666%;
+  background-color: ${(props) => props.theme.color.accentDark};
+  border-radius: 3px;
+
+  :before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    border-radius: 3px;
+    opacity: 0;
+    transition: opacity 200ms ease;
+  }
+
+  ${Wrapper}:hover & {
+    :before {
+      opacity: 1;
+    }
+  }
+`;
+export const Picture = styled.picture ``;
+export const Source = styled.source ``;
+export const Img = styled.img `
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  top: auto;
+  left: auto;
+  border-radius: 3px;
+`;
+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 `
+  margin-top: auto;
+  padding-top: ${size(1)};
+`;
+export const Heading = styled.h1.attrs(() => ({
+    className: 'wayke__theme wayke__font--bold',
+})) `
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  font-weight: 400;
+  margin: 0;
+  font-size: 1rem;
+`;
+export const Link = styled.a `
+  display: block;
+  color: inherit;
+  text-decoration: none;
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+
+  :before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  :focus {
+    text-decoration: underline;
+  }
+`;
+export const Description = styled.div `
+  font-size: 0.875rem;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  margin-top: ${size(0.25)};
+`;
+export const Usp = styled.div `
+  margin-top: ${size(1)};
+`;
+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',
+})) `
+  font-size: 1rem;
+  margin-right: ${size(1)};
+`;
+export const PriceCell = styled.div `
+  flex: 1 1 auto;
+  padding-right: ${size(1)};
+`;
+export const OldPrice = styled.div `
+  text-decoration: line-through;
+  color: ${(props) => props.theme.color.textDarkLighten};
+  font-size: 0.875rem;
+`;
+export const Label = styled.label `
+  color: ${(props) => props.theme.color.disabledText};
+  font-size: 0.875rem;
+`;

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

@@ -0,0 +1,85 @@
+import styled from 'styled-components';
+import { size } from '../../layout/helpers';
+import { Wrapper as Container } from '../Container/wrapper';
+export const ProductPage = styled.div `
+  display: flex;
+  flex-direction: column;
+
+  ${(props) => props.theme.breakpoint.Md} {
+    flex-direction: row;
+  }
+`;
+export const ProductPageAside = styled.div `
+  ${(props) => props.theme.breakpoint.LtMd} {
+    display: contents;
+  }
+
+  ${(props) => props.theme.breakpoint.Md} {
+    flex-shrink: 0;
+    width: calc(375px + ${size(2)});
+    padding-right: ${size(2)};
+  }
+`;
+export const ProductPageMain = styled.div `
+  ${(props) => props.theme.breakpoint.LtMd} {
+    display: contents;
+  }
+
+  ${(props) => props.theme.breakpoint.Md} {
+    flex: 1 1 100%;
+    min-width: 0;
+    padding-left: ${size(2)};
+  }
+`;
+export const ProductPageAsideSection = styled.div `
+  ${(props) => props.theme.breakpoint.LtMd} {
+    order: ${(props) => props.mobileOrder};
+
+    & + & {
+      margin-top: ${size(2)};
+    }
+
+    :last-child {
+      margin-bottom: ${size(4)};
+    }
+
+    ${ProductPageMain} & {
+      margin-top: ${size(2)};
+    }
+  }
+
+  ${(props) => props.theme.breakpoint.Md} {
+    & + & {
+      margin-top: ${size(4)};
+    }
+
+    ${ProductPageMain} & {
+      margin-bottom: ${size(8)};
+    }
+  }
+`;
+export const ProductPageMainSection = styled.div `
+  ${(props) => props.theme.breakpoint.LtMd} {
+    order: 99;
+    padding: ${size(4)} 0;
+    border-top: ${size(1)} solid ${(props) => props.theme.color.accent};
+
+    ${Container} & {
+      margin-left: ${size(-2)};
+      margin-right: ${size(-2)};
+      padding-left: ${size(2)};
+      padding-right: ${size(2)};
+    }
+  }
+
+  ${(props) => props.theme.breakpoint.Md} {
+    & + & {
+      margin-top: ${size(8)};
+      padding-top: ${size(8)};
+      border-top: 1px solid ${(props) => props.theme.color.border};
+    }
+  }
+`;
+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/dist-src/components/ProgressBar/wrapper.js

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+import { size } from '../../layout/helpers';
+export const Wrapper = styled.div `
+  text-align: center;
+`;
+export const Description = styled.div `
+  margin-bottom: ${size(1.5)};
+  font-size: 0.875rem;
+`;
+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',
+})) `
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background-color: ${(props) => props.theme.color.textDark};
+`;

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?.[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() }));