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

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

@@ -1,143 +0,0 @@
-import styled from 'styled-components';
-import { size } from '../../layout/helpers';
-import { fadeIn, noTransform } from '../../layout/keyframes';
-import { ButtonReset } from '../Button/index';
-import { H1 } from '../Heading/index';
-export const Wrapper = styled.div.attrs(() => ({
-    role: 'dialog',
-})) `
-  position: relative;
-  z-index: 80;
-`;
-export const UiBlock = styled.div.attrs(() => ({
-    'aria-hidden': 'true',
-    role: 'button',
-})) `
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: rgba(0, 0, 0, 0.35);
-  animation: ${fadeIn} 200ms ease;
-`;
-export const PanelWrapper = styled.article.attrs(() => ({
-    className: 'wayke__theme wayke__font--regular',
-})) `
-  display: flex;
-  flex-direction: column;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  width: 100%;
-  background-color: ${(props) => props.theme.color.accent};
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
-  z-index: 1;
-  animation: ${noTransform} 200ms ease forwards;
-
-  ${(props) => props.theme.breakpoint.Sm} {
-    max-width: 450px;
-    transform: translateX(100%);
-  }
-
-  ${(props) => props.theme.breakpoint.LtSm} {
-    top: auto;
-    max-height: 100%;
-    transform: translateY(100%);
-  }
-`;
-export const Header = styled.header `
-  position: relative;
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  min-height: 45px;
-  padding: ${size(3)};
-  padding-bottom: 0;
-
-  :after {
-    content: '';
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    height: ${size(3)};
-    background-image: linear-gradient(
-      ${(props) => props.theme.color.accent},
-      ${(props) => props.theme.color.accentTransparent}
-    );
-    z-index: 1;
-  }
-`;
-export const Heading = styled.div `
-  flex: 1 1 auto;
-
-  ${H1} {
-    font-size: 1.5rem;
-  }
-`;
-export const Close = styled.div `
-  flex-shrink: 0;
-  margin: ${size(-2)};
-  padding-left: ${size(3)};
-`;
-export const CloseBtn = styled(ButtonReset) `
-  position: relative;
-  display: block;
-  padding: ${size(2)};
-  transform-origin: 50% 50%;
-  transition: transform 200ms ease;
-  z-index: 2;
-
-  :before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    background-color: ${(props) => props.theme.color.accent};
-    opacity: 0;
-    transition: opacity 200ms ease;
-    z-index: -1;
-  }
-
-  :active {
-    transform: scale(0.9);
-  }
-
-  :hover {
-    :before {
-      opacity: 1;
-    }
-  }
-`;
-export const Body = styled.div `
-  flex: 1 1 auto;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-  padding: ${size(3)};
-`;
-export const Footer = styled.footer `
-  position: relative;
-  flex-shrink: 0;
-  padding: ${size(3)};
-  border-top: 1px solid ${(props) => props.theme.color.border};
-`;
-export const FooterAction = styled.div.attrs(() => ({
-    role: 'group',
-})) `
-  display: flex;
-  align-items: center;
-  margin: ${size(-0.5)};
-`;
-export const FooterActionItem = styled.div `
-  flex: 1 1 50%;
-  padding: ${size(0.5)};
-
-  ${ButtonReset} {
-    padding: ${size(1.75)} ${size(2)};
-  }
-`;

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

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

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

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

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

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

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

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

@@ -1,10 +0,0 @@
-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/PriceBox/index.js

@@ -1,6 +0,0 @@
-import React from 'react';
-import { Wrapper, Row, Label, Price } from './wrapper';
-const PriceBox = ({ prices }) => (React.createElement(Wrapper, null, prices?.map((item, i) => (React.createElement(Row, { key: `${item.label}-${i}`, "$oldPrice": item.oldPrice },
-    React.createElement(Label, null, item.label),
-    React.createElement(Price, null, item.price))))));
-export default PriceBox;

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

@@ -1,34 +0,0 @@
-import styled, { css } from 'styled-components';
-import { size } from '../../layout/helpers';
-export const Wrapper = styled.ul `
-  --price-box-gutter: ${size(2)};
-
-  list-style: none;
-  padding: var(--price-box-gutter);
-  margin: 0;
-  border: 1px solid ${(props) => props.theme.color.border};
-`;
-export const Row = styled.li `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--price-box-gutter);
-
-  & + & {
-    margin-top: calc(var(--price-box-gutter) / 4);
-  }
-
-  ${({ $oldPrice }) => $oldPrice &&
-    css `
-      --price-text-decoration: line-through;
-
-      color: ${(props) => props.theme.color.textDarkLighten};
-      font-size: 0.875rem;
-    `}
-`;
-export const Label = styled.div ``;
-export const Price = styled.div.attrs(() => ({
-    className: 'wayke__theme wayke__font--bold',
-})) `
-  text-decoration: var(--price-text-decoration);
-`;

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

@@ -1,20 +0,0 @@
-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, discount }) => (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"))),
-    discount !== undefined && (React.createElement(Item, null,
-        React.createElement(Label, null),
-        React.createElement(Value, null,
-            React.createElement(OldPrice, null,
-                numberSeparator(price + discount),
-                " kr"))))));
-export default PriceTable;

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

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

@@ -1,45 +0,0 @@
-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, PreHeading, } 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, branchName, description, uspList, price, oldPrice, leasingPrice, businessLeasingPrice, onClick, }) => {
-    const { pushState } = usePath();
-    const _onClick = useMemo(() => (onClick ? () => onClick(id) : undefined), [id]);
-    const onHrefClick = useCallback((e) => {
-        if (pathRoute && href) {
-            const reg = new RegExp('^((http|https)://)|//');
-            if (!pathRoute.match(reg) && !pathRoute.startsWith(location.origin)) {
-                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,
-                branchName && React.createElement(PreHeading, null, branchName),
-                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, "Privatleasing"),
-                        React.createElement(CurrentPrice, null, leasingPrice))),
-                    businessLeasingPrice && (React.createElement(PriceCell, null,
-                        React.createElement(Label, null, "F\u00F6retagsleasing"),
-                        React.createElement(CurrentPrice, null, businessLeasingPrice))))))));
-};
-export default ProductCard;

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

@@ -1,134 +0,0 @@
-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 PreHeading = styled.div `
-  margin-bottom: ${size(0.25)};
-  color: ${(props) => props.theme.color.textDarkLighten};
-  font-size: 0.75rem;
-`;
-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.75rem;
-`;

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

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

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

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

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

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

@@ -1,5 +0,0 @@
-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) }));