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

package/dist-src/components/FilterPanel/rangeFacet.js

@@ -1,82 +0,0 @@
-import React, { useCallback, useState, useEffect } from 'react';
-import RangeSlider from '../RangeSlider/index';
-import useSearch from '../../State/Search/useSearch';
-const getInitialValues = (domain, facet, searchParams) => {
-    const facetMin = domain[0]; //parseInt(facet.filters[0].displayName, 10);
-    const _queryMin = searchParams?.get(`${facet.id}.min`) || null;
-    const facetMax = domain[domain.length - 1]; //parseInt(facet.filters[facet.filters.length - 1].displayName, 10);
-    const _queryMax = searchParams?.get(`${facet.id}.max`) || null;
-    const queryMin = parseInt(_queryMin === null ? `${facetMin}` : _queryMin, 10);
-    const min = facetMin > queryMin ? facetMin : queryMin;
-    const queryMax = parseInt(_queryMax === null ? `${facetMax}` : _queryMax, 10);
-    const max = queryMax > facetMax ? facetMin : queryMax;
-    return min || max ? [min ? min : domain[0], max ? max : domain[1]] : domain;
-};
-const averageDelta = ([x, ...xs]) => {
-    if (x === undefined)
-        return NaN;
-    return xs.reduce(([acc, last], x) => [acc + (x - last), x], [0, x])[0] / xs.length;
-};
-const getSteps = (initialAllValues) => {
-    const delta = averageDelta(initialAllValues);
-    const max = Math.floor(initialAllValues[initialAllValues.length - 1] * 1000) / 1000;
-    if (delta > 1000)
-        return new Array(max / 1000 + 1).fill('').map((x, i) => i * 1000);
-    if (delta <= 1000 && delta >= 500)
-        return new Array(max / 500 + 1).fill('').map((x, i) => i * 500);
-    return initialAllValues;
-};
-const RangeFacet = ({ facet, unit, formatValues }) => {
-    const { loading, queryFilter, initialFacets, onFilterUpdate } = useSearch();
-    const initialFacet = initialFacets?.find((x) => x.id === facet.id);
-    const maxPrefix = initialFacet?.filters[initialFacet?.filters.length - 1]?.displayName?.includes('+');
-    const [state, setValues] = useState(undefined);
-    useEffect(() => {
-        const _initialAllValues = initialFacet?.filters.map((f) => parseInt(f.displayName.replace(/[\<\>+-]+/g, ''), 10)) || [1, 2];
-        const _steps = getSteps(_initialAllValues);
-        const domain = [_steps[0], _steps[_steps.length - 1]];
-        setValues({
-            id: initialFacet?.id,
-            steps: _steps,
-            domain: [_steps[0], _steps[_steps.length - 1]],
-            values: initialFacet?.filters.length
-                ? getInitialValues(domain, initialFacet, queryFilter.searchParams)
-                : [0, 0],
-        });
-    }, [initialFacet?.id]);
-    useEffect(() => {
-        if (state?.id) {
-            const init = initialFacet?.filters.length
-                ? getInitialValues(state.domain, initialFacet, queryFilter.searchParams)
-                : [0, 0];
-            const minStr = queryFilter.searchParams?.get(`${facet.id}.min`);
-            const maxStr = queryFilter.searchParams?.get(`${facet.id}.max`);
-            const min = minStr ? parseFloat(minStr) : init[0];
-            const max = maxStr ? parseFloat(maxStr) : init[1];
-            if (min !== state.values[0] || max !== state.values[1]) {
-                onChange([min, max]);
-            }
-        }
-    }, [queryFilter.searchParams?.toString()]);
-    const onChange = useCallback((nextValues) => {
-        if (state?.id) {
-            if (state.values[0] !== nextValues[0] || state.values[1] !== nextValues[1]) {
-                setValues({ ...state, values: nextValues.slice() });
-                const query = new URLSearchParams(queryFilter.searchParams);
-                query.set('hits', '30');
-                query.delete(`${facet.id}.min`);
-                query.delete(`${facet.id}.max`);
-                if (nextValues[0] !== state.domain[0]) {
-                    query.set(`${facet.id}.min`, `${nextValues[0]}`);
-                }
-                if (nextValues[1] !== state.domain[1]) {
-                    query.set(`${facet.id}.max`, `${nextValues[1]}`);
-                }
-                query.sort();
-                onFilterUpdate(query.toString());
-            }
-        }
-    }, [queryFilter.searchParams, state]);
-    return (React.createElement(React.Fragment, null, state && (React.createElement(RangeSlider, { loading: loading, domain: state.domain, values: state.values, maxPrefix: maxPrefix ? '+' : undefined, steps: state.steps, unit: unit, onChange: onChange, formatValues: formatValues }))));
-};
-export default RangeFacet;

package/dist-src/components/FinancialOptions/LoanModal.js

@@ -1,127 +0,0 @@
-import React, { useState, useCallback, useEffect } from 'react';
-import useLoanCalculation from '../../hooks/useLoan';
-import Modal from '../Modal/index';
-import { ModalFoldout, ModalFoldoutBody } from '../Modal/wrapper';
-import Content from '../Content/index';
-import LogoBox from '../LogoBox/index';
-import { Repeat, RepeatSmall, RepeatTiny } from '../Repeat/index';
-import { numberSeparator } from '../../utils/formats';
-import { ButtonClear, ButtonContent } from '../Button/index';
-import { ContentLogo, ContentLogoText, ContentLogoMedia } from '../ContentLogo/index';
-import DataList from '../DataList/index';
-import PubSub from '../../utils/pubsub/pubsub';
-import SliderWithLabel from '../RangeSlider/SliderWithLabel';
-const stepGenerator = (step, max, steps = [], current) => {
-    if (step === 0 && current === undefined)
-        return steps;
-    if (current !== undefined && current >= max && step !== 0) {
-        return steps;
-    }
-    const nextCurrent = current ? step + current : step;
-    steps.push(nextCurrent);
-    return stepGenerator(step, max, steps, nextCurrent);
-};
-const LoanModal = ({ id, financialOption, onClose }) => {
-    const [tmp, setTmp] = useState();
-    const [extend, setExtend] = React.useState(false);
-    const onToggleExtend = React.useCallback(() => {
-        if (!extend) {
-            PubSub.publish('FinanceInterest');
-        }
-        setExtend(!extend);
-    }, [extend]);
-    const [variables, setVariables] = useState({
-        duration: financialOption.duration?.current,
-        downPayment: financialOption.downPayment?.current,
-        residual: financialOption.residual?.current,
-    });
-    const { duration, downPayment, residual } = variables;
-    const { loading, data } = useLoanCalculation(id, duration, downPayment, residual);
-    useEffect(() => {
-        if (data) {
-            setTmp(data);
-            setVariables({
-                duration: data?.loan?.duration?.current || 0,
-                downPayment: data?.loan?.downPayment?.current || 0,
-                residual: data?.loan?.residual?.current || 0,
-            });
-        }
-    }, [data]);
-    const loan = data?.loan || tmp?.loan;
-    const downPaymentCurrent = loan?.downPayment?.current || 0;
-    const downPaymentMin = loan?.downPayment?.min || 0;
-    const downPaymentMax = loan?.downPayment?.max || 0;
-    const downPaymentStep = loan?.downPayment?.step || 0;
-    const downPaymentSteps = stepGenerator(downPaymentStep, downPaymentMax);
-    const onDownPaymentChange = useCallback((values) => {
-        PubSub.publish('FinanceInterest');
-        setVariables({ ...variables, downPayment: values[0] });
-    }, [variables]);
-    const durationCurrent = loan?.duration?.current || 0;
-    const durationMin = loan?.duration?.min || 0;
-    const durationMax = loan?.duration?.max || 0;
-    const durationStep = loan?.duration?.step || 0;
-    const durationSteps = stepGenerator(durationStep, durationMax);
-    const onDurationChange = useCallback((values) => {
-        PubSub.publish('FinanceInterest');
-        setVariables({ ...variables, duration: values[0] });
-    }, [variables]);
-    const residualCurrent = (loan?.residual?.current || 0) * 100 || 0;
-    const residualMin = (loan?.residual?.min || 0) * 100 || 0;
-    const residualMax = (loan?.residual?.max || 0) * 100 || 0;
-    const residualStep = (loan?.residual?.step || 0) * 100 || 0;
-    const residualSteps = stepGenerator(residualStep, residualMax);
-    const onResidualChange = useCallback((values) => {
-        PubSub.publish('FinanceInterest');
-        setVariables({ ...variables, residual: values[0] / 100 });
-    }, [variables]);
-    const interestText = ((loan?.interest || 0) * 100).toFixed(2);
-    const effectiveInterestText = ((loan?.effectiveInterest || 0) * 100).toFixed(2);
-    return (React.createElement(Modal, { title: "L\u00E5nealternativ", onClose: onClose },
-        React.createElement(Repeat, null,
-            React.createElement(ContentLogo, null,
-                financialOption?.description && (React.createElement(ContentLogoText, null,
-                    React.createElement(Content, null,
-                        React.createElement("p", null, financialOption.description)))),
-                financialOption?.image && (React.createElement(ContentLogoMedia, null,
-                    React.createElement(LogoBox, { logo: financialOption.image, alt: financialOption.name || 'Logotyp', wide: true }))))),
-        React.createElement(Repeat, null,
-            React.createElement(RepeatSmall, null,
-                React.createElement(SliderWithLabel, { label: "Kontantinsatts", values: [downPaymentCurrent], domain: [downPaymentMin, downPaymentMax], steps: downPaymentSteps, unit: "kr", formatValues: true, loading: loading, onChange: onDownPaymentChange })),
-            React.createElement(RepeatSmall, null,
-                React.createElement(SliderWithLabel, { label: "Avbetalning", values: [durationCurrent], domain: [durationMin, durationMax], steps: durationSteps, unit: "m\u00E5n", loading: loading, onChange: onDurationChange })),
-            residual !== undefined && residualMax !== 0 && (React.createElement(RepeatSmall, null,
-                React.createElement(SliderWithLabel, { label: "Restskuld", values: [residualCurrent], domain: [residualMin, residualMax], steps: residualSteps, unit: "%", loading: loading, onChange: onResidualChange }))),
-            React.createElement(RepeatSmall, null,
-                React.createElement(RepeatTiny, null,
-                    React.createElement(Content, { small: true },
-                        React.createElement("p", null, `*Beräknat på ${interestText} % ränta (effektivt ${effectiveInterestText} %)${loan?.mileage !== null ? `och en årlig körsträcka om ${loan?.mileage} mil.` : ''}`)))),
-            React.createElement(RepeatSmall, null,
-                React.createElement(ButtonClear, { onClick: onToggleExtend, title: extend ? 'Visa mindre information' : 'Visa mer information' },
-                    React.createElement(ButtonContent, null, extend ? 'Mindre information' : 'Mer information'))),
-            React.createElement(React.Fragment, null, extend && (React.createElement(ModalFoldout, null,
-                React.createElement(ModalFoldoutBody, null,
-                    React.createElement(DataList, { items: [
-                            {
-                                label: 'Ränta',
-                                value: `${interestText} %`,
-                            },
-                            {
-                                label: 'Effektiv ränta',
-                                value: `${effectiveInterestText} %`,
-                            },
-                            {
-                                label: 'Uppläggningskostnad',
-                                value: `${numberSeparator(financialOption?.setupFee || 0)} kr`,
-                            },
-                            {
-                                label: 'Administrativa avgifter',
-                                value: `${numberSeparator(financialOption?.administrationFee || 0)} kr/mån`,
-                            },
-                            {
-                                label: 'Total kreditkostnad',
-                                value: `${numberSeparator(loan?.totalCreditCost || 0)} kr`,
-                            },
-                        ] }))))))));
-};
-export default LoanModal;

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

@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { Repeat, RepeatTiny } from '../Repeat/index';
-import { VisualHeading } from '../Heading/index';
-import Leasing from './leasing';
-import Loan from './loan';
-const FinancialOptions = ({ id, financialOptions }) => (React.createElement(Repeat, null,
-    React.createElement(RepeatTiny, null,
-        React.createElement(VisualHeading, null, "Andra finansieringsalternativ")),
-    React.createElement(RepeatTiny, null, financialOptions.map((financialOption, index) => (React.createElement(Fragment, { key: index },
-        (financialOption.type === 'leasing' || financialOption.type === 'business-leasing') && (React.createElement(Leasing, { financialOption: financialOption })),
-        financialOption.type === 'loan' && React.createElement(Loan, { id: id, financialOption: financialOption })))))));
-export default FinancialOptions;

package/dist-src/components/FinancialOptions/leasing.js

@@ -1,56 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import OptionBox from '../OptionBox/index';
-import { OptionBoxHeading, OptionBoxContent } from '../OptionBox/wrapper';
-import { UtilityTextPrimary } from '../Utility/index';
-import { ButtonInline } from '../Button/index';
-import { numberSeparator } from '../../utils/formats';
-import Modal from '../Modal/index';
-import { Image, ModalFoldout, ModalFoldoutBody } from '../Modal/wrapper';
-import Content from '../Content/index';
-import DataList from '../DataList/index';
-const Leasing = ({ financialOption }) => {
-    const [modal, setModal] = useState(false);
-    const toggleModal = useCallback(() => setModal(!modal), [modal]);
-    const { image, description, monthlyCost, duration, mileage, type, name } = financialOption;
-    const title = type === 'leasing' ? 'Privatleasa' : type === 'business-leasing' ? 'Företagsleasa' : type;
-    return (React.createElement(React.Fragment, null,
-        modal && (React.createElement(Modal, { title: title, onClose: toggleModal },
-            image && React.createElement(Image, { src: image, alt: title }),
-            description && React.createElement(Content, { dangerouslySetInnerHTML: { __html: description } }),
-            React.createElement(ModalFoldout, null,
-                React.createElement(ModalFoldoutBody, null,
-                    React.createElement(DataList, { items: [
-                            {
-                                label: 'Månadskostnad',
-                                value: `${numberSeparator(monthlyCost || 0)} kr/mån`,
-                            },
-                            {
-                                label: 'Bindningstid',
-                                value: `${duration?.current} månader`,
-                            },
-                            {
-                                label: 'Årlig körsträcka',
-                                value: `${numberSeparator(mileage?.current || 0)} mil/år`,
-                            },
-                        ] }))))),
-        React.createElement(OptionBox, null,
-            React.createElement(React.Fragment, null, monthlyCost !== null && monthlyCost !== undefined && (React.createElement(OptionBoxHeading, null, `ca ${numberSeparator(monthlyCost)} kr/mån`))),
-            React.createElement(OptionBoxContent, null,
-                React.createElement("p", null,
-                    title,
-                    ' ',
-                    mileage?.current && duration?.current && (React.createElement(React.Fragment, null,
-                        React.createElement(UtilityTextPrimary, null,
-                            numberSeparator(mileage?.current),
-                            " mil/\u00E5r"),
-                        ' ',
-                        "i ",
-                        React.createElement(UtilityTextPrimary, null,
-                            duration?.current,
-                            " m\u00E5n"),
-                        ".",
-                        ' '))),
-                name && (React.createElement("p", null,
-                    React.createElement(ButtonInline, { onClick: toggleModal }, "L\u00E4s mer")))))));
-};
-export default Leasing;

package/dist-src/components/FinancialOptions/loan.js

@@ -1,54 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import OptionBox from '../OptionBox/index';
-import { OptionBoxHeading, OptionBoxContent } from '../OptionBox/wrapper';
-import { UtilityTextPrimary } from '../Utility/index';
-import { ButtonInline } from '../Button/index';
-import { numberSeparator } from '../../utils/formats';
-import useLoanCalculation from '../../hooks/useLoan';
-import LoanModal from './LoanModal';
-const Loan = ({ id, financialOption }) => {
-    const [modal, setModal] = useState(false);
-    const toggleModal = useCallback(() => setModal(!modal), [modal]);
-    const { data } = useLoanCalculation(id, financialOption.duration?.current, financialOption.downPayment?.current, financialOption.residual?.current);
-    const interest = data?.loan?.interest;
-    const duration = data?.loan?.duration?.current;
-    const monthlyCost = data?.loan?.monthlyCost;
-    const logo = financialOption?.logotype || 'https://placehold.it/67x10';
-    // Skeleton?
-    if (financialOption.loanAmount === undefined ||
-        financialOption.loanAmount === null ||
-        interest === undefined ||
-        duration === undefined ||
-        monthlyCost === undefined ||
-        interest === null ||
-        duration === null ||
-        monthlyCost === null) {
-        return (React.createElement(OptionBox, { logo: logo, logoAlt: "Logotyp" },
-            React.createElement(OptionBoxHeading, null, "Laddar..."),
-            React.createElement(OptionBoxContent, null,
-                React.createElement("p", null, "Laddar..."))));
-    }
-    return (React.createElement(React.Fragment, null,
-        modal && React.createElement(LoanModal, { id: id, financialOption: financialOption, onClose: toggleModal }),
-        React.createElement(OptionBox, { logo: logo, logoAlt: "Logotyp" },
-            React.createElement(React.Fragment, null,
-                React.createElement(OptionBoxHeading, null, `${numberSeparator(monthlyCost)} kr/mån*`),
-                React.createElement(OptionBoxContent, null,
-                    React.createElement("p", null,
-                        "Delbetala",
-                        ' ',
-                        financialOption.loanAmount && duration && (React.createElement(React.Fragment, null,
-                            React.createElement(UtilityTextPrimary, null,
-                                numberSeparator(financialOption.loanAmount),
-                                " kr"),
-                            ' ',
-                            "i ",
-                            React.createElement(UtilityTextPrimary, null,
-                                duration,
-                                " m\u00E5n"),
-                            "."))),
-                    React.createElement("p", null,
-                        `*Beräknat på ${(interest * 100).toFixed(2)}% ränta. `,
-                        React.createElement(ButtonInline, { onClick: toggleModal }, "L\u00E4s mer")))))));
-};
-export default Loan;

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

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

@@ -1,122 +0,0 @@
-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 { NavButton } from '../NavButton/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, null,
-                        React.createElement(NavButton, { onClick: prevImage, title: "F\u00F6reg\u00E5ende bild" },
-                            React.createElement(IconChevronLeft, { block: true }))),
-                    React.createElement(ArrowRight, null,
-                        React.createElement(NavButton, { 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;