@smg-automotive/components 25.11.0-migrate-searchable-list.1 → 25.11.0-talamcol-migrate-collapse.1

package/dist/cjs/index.js

@@ -4,6 +4,7 @@ var react$1 = require('@chakra-ui/react');
 var react = require('@emotion/react');
 var useDebounce = require('use-debounce');
 var React = require('react');
+var useEmblaCarousel = require('embla-carousel-react');
 var i18nPkg = require('@smg-automotive/i18n-pkg');
 var Fuse = require('fuse.js');
 var auth$4 = require('@smg-automotive/auth');
@@ -1790,14 +1791,14 @@ var baseStyleCloseContainer = react$1.defineStyle({
     alignItems: 'center',
     justifyContent: 'flex-end',
 });
-var slots$1 = [
+var slots$2 = [
     'container',
     'grid',
     'countContainer',
     'closeContainer',
 ];
 var galleryHeaderRecipe = react$1.defineSlotRecipe({
-    slots: slots$1,
+    slots: slots$2,
     className: 'chakra-gallery-header',
     base: {
         container: baseStyleContainer,
@@ -2314,7 +2315,7 @@ var sizeContent = function (w) {
             borderRadius: { base: 'none', sm: 'sm' },
         });
 };
-var slots = [
+var slots$1 = [
     'header',
     'body',
     'footer',
@@ -2324,7 +2325,7 @@ var slots = [
     'closeTrigger',
 ];
 var dialogRecipe = react$1.defineSlotRecipe({
-    slots: slots,
+    slots: slots$1,
     className: 'chakra-dialog',
     base: {
         positioner: baseStyleDialogContainer,
@@ -2521,6 +2522,235 @@ var checkboxRecipe = react$1.defineSlotRecipe({
     },
 });
 
+var slots = [
+    'container',
+    'carousel',
+    'slide',
+    'slideContainer',
+    'buttonContainer',
+    'button',
+    'icon',
+    'pagination',
+    'paginationButton',
+    'paginationIconContainer',
+    'dotsPaginationContainer',
+    'dotsPaginationIndicator',
+    'numbersPaginationButton',
+];
+var baseContainer = react$1.defineStyle({
+    height: 'full',
+    width: 'full',
+    '--carousel-overlay-weak': 'rgba(51,51,51,0.4)',
+    '--carousel-overlay-strong': 'rgba(51,51,51,0.8)',
+    '--carousel-pagination-height': '7.5rem',
+    '--carousel-numbers-pagination-height': '5rem',
+    '--carousel-dot-size': '6px',
+    '--carousel-dot-size-active': '8px',
+    '--carousel-dot-size-last': '4px',
+    '--carousel-dot-margin-x': '6px',
+});
+var baseCarousel = react$1.defineStyle({
+    overflow: 'hidden',
+    position: 'relative',
+});
+var baseSlide = react$1.defineStyle({
+    flexGrow: '0',
+    flexShrink: '0',
+    flexBasis: 'full',
+});
+var baseSlideContainer = react$1.defineStyle({
+    height: 'full',
+    alignItems: 'center',
+    display: 'flex',
+});
+var baseButtonContainer = react$1.defineStyle({
+    position: 'absolute',
+    top: '0',
+    width: 'lg',
+    height: 'full',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    color: 'white',
+    visibility: 'hidden',
+    pointerEvents: 'none',
+    cursor: 'pointer',
+    _groupHover: { md: { visibility: 'visible', pointerEvents: 'auto' } },
+    _focus: {
+        outline: 'none',
+    },
+});
+var baseButton = react$1.defineStyle({
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 'md',
+    height: 'md',
+    borderRadius: 'sm',
+    backgroundColor: 'var(--carousel-overlay-weak)',
+    color: 'white',
+    _hover: { background: 'var(--carousel-overlay-strong)' },
+});
+var baseIcon = react$1.defineStyle({
+    boxSize: 'sm',
+});
+var numbersPaginationButton = react$1.defineStyle({
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    verticalAlign: 'middle',
+    textAlign: 'center',
+    minWidth: 'md',
+    height: 'md',
+    borderRadius: 'sm',
+    _hover: {
+        backgroundColor: 'gray.100',
+    },
+    '&[aria-current="true"]': {
+        color: 'white',
+        backgroundColor: 'gray.900',
+        _hover: {
+            backgroundColor: 'gray.900',
+        },
+    },
+});
+var dotsPaginationIndicator = react$1.defineStyle({
+    backgroundColor: 'transparent',
+    touchAction: 'pan-x',
+    display: 'inline-flex',
+    textDecoration: 'none',
+    border: 'none',
+    padding: '0',
+    width: 'var(--carousel-dot-size)',
+    height: 'var(--carousel-dot-size)',
+    marginX: 'var(--carousel-dot-margin-x)',
+    _last: {
+        width: 'var(--carousel-dot-size-last)',
+        height: 'var(--carousel-dot-size-last)',
+        _after: {
+            width: 'full',
+            height: 'var(--carousel-dot-size-last)',
+            content: '""',
+        },
+    },
+    _after: {
+        backgroundColor: 'gray.300',
+        opacity: '40',
+        borderRadius: 'full',
+        width: 'full',
+        height: 'var(--carousel-dot-size)',
+        content: '""',
+    },
+    '&[aria-current="true"]': {
+        width: 'var(--carousel-dot-size-active)',
+        height: 'var(--carousel-dot-size-active)',
+        _last: {
+            width: 'var(--carousel-dot-size-active)',
+            height: 'var(--carousel-dot-size-active)',
+            _after: {
+                width: 'full',
+                height: 'var(--carousel-dot-size-active)',
+                content: '""',
+            },
+        },
+        _after: {
+            backgroundColor: 'white',
+            borderRadius: 'full',
+            opacity: '100',
+            width: 'full',
+            height: 'var(--carousel-dot-size-active)',
+            content: '""',
+        },
+    },
+});
+var fullScreenVariant = {
+    container: react$1.defineStyle({
+        backgroundColor: 'black',
+        position: {
+            base: 'fixed',
+            md: 'static',
+        },
+    }),
+    carousel: react$1.defineStyle({
+        paddingX: {
+            md: '5xl',
+        },
+    }),
+    pagination: react$1.defineStyle({
+        overflow: 'hidden',
+        position: 'relative',
+        paddingX: {
+            base: 'md',
+            md: '5xl',
+        },
+        height: 'var(--carousel-pagination-height)',
+    }),
+    paginationButton: react$1.defineStyle({
+        position: 'absolute',
+        top: '0',
+        width: 'lg',
+        height: 'full',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        color: 'white',
+        backgroundColor: 'transparent',
+    }),
+    paginationIconContainer: react$1.defineStyle({
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: 'md',
+        height: 'md',
+        borderRadius: 'sm',
+        backgroundColor: 'var(--carousel-overlay-strong)',
+    }),
+    buttonContainer: react$1.defineStyle({
+        backgroundColor: 'black',
+        width: 'xl',
+        visibility: { base: 'hidden', md: 'visible' },
+        pointerEvents: { base: 'none', md: 'auto' },
+    }),
+    slide: react$1.defineStyle({
+        height: 'full',
+    }),
+    button: react$1.defineStyle({
+        opacity: '100',
+        backgroundColor: 'black',
+    }),
+    icon: react$1.defineStyle({
+        boxSize: 'md',
+    }),
+};
+var carouselRecipe = react$1.defineSlotRecipe({
+    slots: slots,
+    className: 'chakra-carousel',
+    base: {
+        container: baseContainer,
+        carousel: baseCarousel,
+        slide: baseSlide,
+        slideContainer: baseSlideContainer,
+        buttonContainer: baseButtonContainer,
+        button: baseButton,
+        icon: baseIcon,
+        numbersPaginationButton: numbersPaginationButton,
+        dotsPaginationContainer: react$1.defineStyle({
+            position: 'absolute',
+            width: 'full',
+            bottom: 'lg',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+        }),
+        dotsPaginationIndicator: dotsPaginationIndicator,
+    },
+    variants: {
+        variant: {
+            fullScreen: fullScreenVariant,
+        },
+    },
+});
+
 var cardRecipe = react$1.defineSlotRecipe({
     className: 'chakra-card',
     slots: ['root', 'header', 'body', 'footer'],
@@ -2649,6 +2879,25 @@ var alertRecipe = react$1.defineSlotRecipe({
                 },
             },
         },
+        variant: {
+            toast: {
+                root: {
+                    translate: 'var(--x) var(--y)',
+                    scale: 'var(--scale)',
+                    width: 'full',
+                    position: 'relative',
+                    zIndex: 'var(--z-index)',
+                    height: 'var(--height)',
+                    opacity: 'var(--opacity)',
+                    willChange: 'translate, opacity, scale',
+                    transitionProperty: 'common',
+                    transitionDuration: 'normal',
+                },
+            },
+        },
+    },
+    defaultVariants: {
+        variant: 'toast',
     },
 });
 
@@ -2773,6 +3022,7 @@ var accordionRecipe = react$1.defineSlotRecipe({
 var slotRecipes = {
     articleTeaser: articleTeaserRecipe,
     accordion: accordionRecipe,
+    carousel: carouselRecipe,
     breadcrumbs: breadcrumbsRecipe,
     card: cardRecipe,
     energyLabel: energyLabelRecipe,
@@ -5697,6 +5947,287 @@ var Card = {
     Footer: Footer$2,
 };
 
+var Flex = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return (React.createElement(react$1.Flex, __assign({}, rest), children));
+};
+
+var icons = {
+    previous: React.createElement(ChevronLeftSmallIcon, null),
+    next: React.createElement(ChevronRightSmallIcon, null),
+};
+var ThumbnailNavigationButton = function (_a) {
+    var direction = _a.direction, onClick = _a.onClick;
+    var recipe = react$1.useSlotRecipe({ key: 'carousel' });
+    var styles = recipe({ variant: 'fullScreen' });
+    var side = direction === 'previous' ? { left: '0' } : { right: '0' };
+    return (React.createElement(react$1.chakra.button, { onClick: onClick, "aria-label": "scroll to ".concat(direction, " thumbnail group"), "aria-controls": "thumbnails-wrapper", css: __assign(__assign({}, styles.paginationButton), side) },
+        React.createElement(Flex, { css: styles.paginationIconContainer }, icons[direction])));
+};
+
+var Thumbnail = function (_a) {
+    var onClick = _a.onClick, isCurrent = _a.isCurrent, thumbnailIndex = _a.thumbnailIndex, totalThumbnails = _a.totalThumbnails, children = _a.children;
+    return (React.createElement(AspectRatio, { ratio: 4 / 3, onClick: onClick, width: "3xl", flexShrink: "0", cursor: "pointer", mr: "xs", border: "4px", borderColor: isCurrent ? 'blue.400' : 'transparent', "aria-current": isCurrent, "aria-label": "thumbnail ".concat(thumbnailIndex + 1, " of ").concat(totalThumbnails) }, children));
+};
+
+var ThumbnailPagination = function (_a) {
+    var currentSlideIndex = _a.currentSlideIndex, thumbnails = _a.thumbnails, mainCarousel = _a.mainCarousel, paginationCarouselRef = _a.paginationCarouselRef, paginationCarousel = _a.paginationCarousel;
+    var _b = React.useState({ previous: false, next: true }), paginationButtonVisibility = _b[0], setPaginationButtonVisibility = _b[1];
+    var recipe = react$1.useSlotRecipe({ key: 'carousel' });
+    var styles = recipe({ variant: 'fullScreen' });
+    var scrollPrev = React.useCallback(function () { return paginationCarousel && paginationCarousel.scrollPrev(true); }, [paginationCarousel]);
+    var scrollNext = React.useCallback(function () { return paginationCarousel && paginationCarousel.scrollNext(true); }, [paginationCarousel]);
+    var onThumbnailClick = React.useCallback(function (index) {
+        if (!mainCarousel || !paginationCarousel)
+            return;
+        mainCarousel.scrollTo(index, true);
+    }, [mainCarousel, paginationCarousel]);
+    var evalPaginationButtonVisibility = React.useCallback(function () {
+        if (!paginationCarousel ||
+            paginationCarousel.slidesNotInView().length === 0) {
+            setPaginationButtonVisibility({ previous: false, next: false });
+            return;
+        }
+        var progress = Math.max(0, Math.min(1, paginationCarousel.scrollProgress()));
+        var slideWidth = 1 / thumbnails.length;
+        setPaginationButtonVisibility({
+            previous: progress > slideWidth,
+            next: progress < 1 - slideWidth,
+        });
+    }, [paginationCarousel, thumbnails.length]);
+    React.useEffect(function () {
+        if (!paginationCarousel)
+            return;
+        evalPaginationButtonVisibility();
+        paginationCarousel.on('scroll', evalPaginationButtonVisibility);
+        paginationCarousel.on('slidesInView', evalPaginationButtonVisibility);
+    }, [paginationCarousel, evalPaginationButtonVisibility]);
+    return (React.createElement(react$1.Box, { ref: paginationCarouselRef, css: styles.pagination, "aria-label": "Pagination" },
+        React.createElement(Flex, { alignItems: "center", height: "full", id: "thumbnail-wrapper" }, thumbnails.map(function (slide, index) { return (React.createElement(Thumbnail, { key: "slide-".concat(index), onClick: function () { return onThumbnailClick(index); }, isCurrent: index === currentSlideIndex, thumbnailIndex: index, totalThumbnails: thumbnails.length }, paginationCarouselRef ? (slide) : (React.createElement(react$1.Box, { h: "full", w: "full", backgroundColor: "gray.50" })))); })),
+        paginationButtonVisibility.previous ? (React.createElement(ThumbnailNavigationButton, { onClick: scrollPrev, direction: "previous" })) : null,
+        paginationButtonVisibility.next ? (React.createElement(ThumbnailNavigationButton, { onClick: scrollNext, direction: "next" })) : null));
+};
+
+var Slide = function (_a) {
+    var onClick = _a.onClick, slideIndex = _a.slideIndex, totalSlides = _a.totalSlides, isCurrent = _a.isCurrent, children = _a.children, fullScreen = _a.fullScreen, slidesPerView = _a.slidesPerView;
+    var recipe = react$1.useSlotRecipe({ key: 'carousel' });
+    var styles = recipe(fullScreen ? { variant: 'fullScreen' } : {});
+    var flexBasisTokenOrVar = slidesPerView === 1 ? 'full' : 'var(--carousel-slide-basis)';
+    var basisVarResponsive = slidesPerView === 1
+        ? undefined
+        : (function () {
+            var map = slidesPerView;
+            var result = {};
+            Object.keys(map).forEach(function (bp) {
+                var value = map[bp];
+                if (typeof value === 'number') {
+                    result[bp] = "calc(100% / ".concat(value, ")");
+                }
+            });
+            return result;
+        })();
+    return (React.createElement(react$1.Box, { css: __assign(__assign({}, styles.slide), (basisVarResponsive
+            ? { '--carousel-slide-basis': basisVarResponsive }
+            : {})), flexBasis: flexBasisTokenOrVar, paddingLeft: slidesPerView === 1 ? '0' : { base: 'md', md: '2xl' }, onClick: onClick, "aria-roledescription": "slide", "aria-label": "".concat(slideIndex + 1, " of ").concat(totalSlides), "aria-current": isCurrent }, children));
+};
+
+var NumbersPaginationButton = function (_a) {
+    var onClick = _a.onClick, isCurrent = _a.isCurrent, currentPageNumber = _a.currentPageNumber, totalNumbers = _a.totalNumbers;
+    var recipe = react$1.useSlotRecipe({ key: 'carousel' });
+    var styles = recipe();
+    return (React.createElement(react$1.chakra.button, { css: styles.numbersPaginationButton, onClick: onClick, "aria-current": isCurrent, "aria-label": "numbers pagination ".concat(currentPageNumber, " of ").concat(totalNumbers) }, currentPageNumber));
+};
+
+var NumbersPagination = function (_a) {
+    var currentSlideIndex = _a.currentSlideIndex, numberOfSlides = _a.numberOfSlides, mainCarousel = _a.mainCarousel;
+    var onClick = React.useCallback(function (index) {
+        if (mainCarousel) {
+            mainCarousel.scrollTo(index);
+        }
+    }, [mainCarousel]);
+    var pagination = Array.from({ length: numberOfSlides }, function (_, i) { return i; });
+    return (React.createElement(react$1.Box, { "aria-label": "Numbers Pagination" },
+        React.createElement(Flex, { flexDirection: "row", alignItems: "center", justifyContent: "center" }, pagination.map(function (index) { return (React.createElement(NumbersPaginationButton, { key: "slide-".concat(index), isCurrent: index === currentSlideIndex, currentPageNumber: index + 1, totalNumbers: numberOfSlides, onClick: function () { return onClick(index); } })); }))));
+};
+
+var NavigationButton = function (_a) {
+    var direction = _a.direction, onClick = _a.onClick, fullScreen = _a.fullScreen, _b = _a.isHovered, isHovered = _b === void 0 ? false : _b;
+    var recipe = react$1.useSlotRecipe({ key: 'carousel' });
+    var styles = recipe(fullScreen ? { variant: 'fullScreen' } : {});
+    var side = direction === 'previous' ? { left: '0' } : { right: '0' };
+    var icons = {
+        previous: React.createElement(ChevronLeftLargeIcon, { boxSize: undefined, css: styles.icon }),
+        next: React.createElement(ChevronRightLargeIcon, { boxSize: undefined, css: styles.icon }),
+    };
+    return (React.createElement(react$1.chakra.button, { onClick: onClick, "aria-label": "".concat(direction, " slide"), css: __assign(__assign(__assign({}, styles.buttonContainer), (isHovered ? { visibility: 'visible', pointerEvents: 'auto' } : {})), side) },
+        React.createElement(Flex, { css: styles.button }, icons[direction])));
+};
+
+var DotsPaginationIndicator = function (_a) {
+    var isCurrent = _a.isCurrent;
+    var recipe = react$1.useSlotRecipe({ key: 'carousel' });
+    var styles = recipe();
+    return (React.createElement(react$1.chakra.span, { "aria-current": isCurrent, css: styles.dotsPaginationIndicator }));
+};
+
+var DotsPagination = function (_a) {
+    var currentSlideIndex = _a.currentSlideIndex, numberOfSlides = _a.numberOfSlides;
+    var pagination = Array.from({ length: numberOfSlides }, function (_, i) { return i; });
+    var recipe = react$1.useSlotRecipe({ key: 'carousel' });
+    var styles = recipe();
+    return (React.createElement(react$1.Box, { "aria-label": "Dots Pagination", css: styles.dotsPaginationContainer },
+        React.createElement(Flex, { flexDirection: "row", alignItems: "center", justifyContent: "center" }, pagination.map(function (index) { return (React.createElement(DotsPaginationIndicator, { key: "slide-".concat(index), isCurrent: index === currentSlideIndex })); }))));
+};
+
+exports.PaginationType = void 0;
+(function (PaginationType) {
+    PaginationType["Thumbnail"] = "thumbnail";
+    PaginationType["Number"] = "number";
+    PaginationType["None"] = "none";
+    PaginationType["Dot"] = "dot";
+})(exports.PaginationType || (exports.PaginationType = {}));
+var isFullScreenSlide = function (value) {
+    return typeof value === 'object' && value !== null && 'slide' in value;
+};
+// eslint-disable-next-line sonarjs/cognitive-complexity
+var Carousel = function (props) {
+    var _a;
+    var _b;
+    var _c = props.startIndex, startIndex = _c === void 0 ? 0 : _c, onSlideClick = props.onSlideClick, onSlideSelect = props.onSlideSelect, fullScreen = props.fullScreen, _d = props.paginationType, paginationType = _d === void 0 ? exports.PaginationType.None : _d, _e = props.slidesPerView, slidesPerView = _e === void 0 ? 1 : _e, _f = props.loop, loop = _f === void 0 ? true : _f, _g = props.slidesToScroll, slidesToScroll = _g === void 0 ? 1 : _g;
+    var _h = React.useState(loop), canScrollPrevious = _h[0], setCanScrollPrevious = _h[1];
+    var _j = React.useState(loop), canScrollNext = _j[0], setCanScrollNext = _j[1];
+    var _k = React.useState(startIndex), selectedIndex = _k[0], setSelectedIndex = _k[1];
+    var isSmallLandscapeViewport = react$1.useMediaQuery(["(max-height: ".concat(breakpoints.sm.px, "px) and (orientation: landscape)")], {
+        ssr: true,
+        fallback: [false],
+    })[0];
+    var recipe = react$1.useSlotRecipe({ key: 'carousel' });
+    var styles = recipe(fullScreen ? { variant: 'fullScreen' } : {});
+    var _l = useEmblaCarousel({
+        loop: loop,
+        startIndex: startIndex,
+        duration: 20,
+        align: 'start',
+        slidesToScroll: slidesToScroll,
+    }), mainCarouselRef = _l[0], mainCarousel = _l[1];
+    var _m = useEmblaCarousel({
+        containScroll: 'keepSnaps',
+        dragFree: true,
+        slidesToScroll: 'auto',
+        inViewThreshold: 1,
+        duration: 20,
+    }), paginationCarouselRef = _m[0], paginationCarousel = _m[1];
+    var scrollPrev = React.useCallback(function () { return mainCarousel && mainCarousel.scrollPrev(true); }, [mainCarousel]);
+    var scrollNext = React.useCallback(function () { return mainCarousel && mainCarousel.scrollNext(true); }, [mainCarousel]);
+    var onClick = React.useCallback(function (index) {
+        if (onSlideClick) {
+            onSlideClick(index);
+        }
+    }, [onSlideClick]);
+    var numberOfSlides = props.children.length;
+    var hasThumbnailPagination = fullScreen && !isSmallLandscapeViewport;
+    var onSelect = React.useCallback(function () {
+        var _a, _b;
+        if (!mainCarousel)
+            return;
+        var newIndex = mainCarousel.selectedScrollSnap();
+        var previousIndex = mainCarousel.previousScrollSnap();
+        setSelectedIndex(newIndex);
+        setCanScrollPrevious(mainCarousel.canScrollPrev());
+        setCanScrollNext(mainCarousel.canScrollNext());
+        if (paginationCarousel && hasThumbnailPagination) {
+            var slideRegistry = paginationCarousel.internalEngine().slideRegistry;
+            var snapIndexThatSlideBelongsTo = slideRegistry.findIndex(function (group) {
+                return group.includes(newIndex);
+            });
+            if (typeof snapIndexThatSlideBelongsTo !== 'undefined') {
+                paginationCarousel.scrollTo(snapIndexThatSlideBelongsTo);
+            }
+        }
+        if (onSlideSelect) {
+            onSlideSelect(newIndex);
+        }
+        if (!props.fullScreen) {
+            return;
+        }
+        var fullScreenChildren = props.children;
+        if (newIndex !== undefined) {
+            var currentSlide = fullScreenChildren[newIndex];
+            (_a = currentSlide === null || currentSlide === void 0 ? void 0 : currentSlide.onSlideEnter) === null || _a === void 0 ? void 0 : _a.call(currentSlide);
+        }
+        if (previousIndex !== undefined && previousIndex !== newIndex) {
+            var previousSlide = fullScreenChildren[previousIndex];
+            (_b = previousSlide === null || previousSlide === void 0 ? void 0 : previousSlide.onSlideLeave) === null || _b === void 0 ? void 0 : _b.call(previousSlide);
+        }
+    }, [
+        mainCarousel,
+        paginationCarousel,
+        onSlideSelect,
+        hasThumbnailPagination,
+        props.children,
+        props.fullScreen,
+    ]);
+    React.useEffect(function () {
+        if (!mainCarousel)
+            return;
+        onSelect();
+        mainCarousel.on('select', onSelect);
+    }, [mainCarousel, onSelect]);
+    React.useEffect(function () {
+        var keydownListener = function (e) {
+            if (fullScreen) {
+                switch (e.code) {
+                    case 'ArrowRight':
+                        scrollNext();
+                        break;
+                    case 'ArrowLeft':
+                        scrollPrev();
+                        break;
+                }
+            }
+        };
+        document.addEventListener('keydown', keydownListener);
+        return function () { return document.removeEventListener('keydown', keydownListener); };
+    }, [fullScreen, scrollNext, scrollPrev]);
+    var prerenderFallbackSlide = startIndex !== 0 && !mainCarouselRef;
+    var carouselHeightByPaginationTypeMap = (_a = {},
+        _a[exports.PaginationType.None] = '100%',
+        _a[exports.PaginationType.Dot] = '100%',
+        _a[exports.PaginationType.Thumbnail] = 'calc(100% - var(--carousel-pagination-height))',
+        _a[exports.PaginationType.Number] = 'calc(100% - var(--carousel-numbers-pagination-height))',
+        _a);
+    var carouselHeightCssVarValue = hasThumbnailPagination
+        ? carouselHeightByPaginationTypeMap[exports.PaginationType.Thumbnail]
+        : carouselHeightByPaginationTypeMap[paginationType];
+    var _o = React.useState(false), isHovered = _o[0], setIsHovered = _o[1];
+    return (React.createElement(react$1.Box, { css: styles.container, "data-group": true },
+        prerenderFallbackSlide ? (React.createElement(Slide, { slideIndex: startIndex, onClick: function () { return onClick(startIndex); }, totalSlides: numberOfSlides, isCurrent: startIndex === selectedIndex, fullScreen: !!fullScreen, slidesPerView: slidesPerView }, props.fullScreen
+            ? (_b = props.children[startIndex]) === null || _b === void 0 ? void 0 : _b.slide
+            : props.children[startIndex])) : (React.createElement(react$1.Box, { ref: mainCarouselRef, "aria-label": "Carousel", "aria-roledescription": "Carousel", role: "group", "data-group": true, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, height: 'var(--carousel-height)', css: __assign(__assign({}, styles.carousel), { '--carousel-height': carouselHeightCssVarValue }) },
+            React.createElement(Flex, { css: styles.slideContainer, marginLeft: slidesPerView === 1 ? '0' : { base: '-md', md: '-2xl' } }, props.children.map(function (slide, index) { return (React.createElement(Slide, { key: "slide-".concat(index), slideIndex: index, onClick: function () { return onClick(index); }, totalSlides: numberOfSlides, isCurrent: index === selectedIndex, fullScreen: !!fullScreen, slidesPerView: slidesPerView }, isFullScreenSlide(slide) ? slide.slide : slide)); })),
+            canScrollPrevious ? (React.createElement(NavigationButton, { onClick: scrollPrev, direction: "previous", fullScreen: !!fullScreen, isHovered: isHovered || (!!fullScreen && !isSmallLandscapeViewport) })) : null,
+            canScrollNext ? (React.createElement(NavigationButton, { onClick: scrollNext, direction: "next", fullScreen: !!fullScreen, isHovered: isHovered || (!!fullScreen && !isSmallLandscapeViewport) })) : null,
+            paginationType === exports.PaginationType.Dot ? (React.createElement(DotsPagination, { currentSlideIndex: selectedIndex, numberOfSlides: props.children.length })) : null)),
+        hasThumbnailPagination ? (React.createElement(ThumbnailPagination, { currentSlideIndex: selectedIndex, thumbnails: props.children.map(function (slide) { return slide.thumbnail; }), mainCarousel: mainCarousel, paginationCarousel: paginationCarousel, paginationCarouselRef: paginationCarouselRef })) : null,
+        paginationType === exports.PaginationType.Number ? (React.createElement(NumbersPagination, { mainCarousel: mainCarousel, currentSlideIndex: selectedIndex, numberOfSlides: props.children.length })) : null));
+};
+
+var ColorPicker = React.forwardRef(function (_a, ref) {
+    var _b = _a.width, width = _b === void 0 ? 'md' : _b, _c = _a.height, height = _c === void 0 ? 'md' : _c, _d = _a.padding, padding = _d === void 0 ? '0' : _d, _e = _a.backgroundColor, backgroundColor = _e === void 0 ? 'whiteAlpha.100' : _e, invalid = _a.invalid, rest = __rest(_a, ["width", "height", "padding", "backgroundColor", "invalid"]);
+    return (React.createElement(react$1.Field.Root, { invalid: invalid },
+        React.createElement(react$1.Input, __assign({}, rest, { ref: ref, type: "color", width: width, height: height, padding: padding, backgroundColor: backgroundColor, cursor: "pointer", _invalid: { borderColor: 'red.500' } }))));
+});
+ColorPicker.displayName = 'ColorPicker';
+
+var Collapse = function (_a) {
+    var isOpen = _a.in, animateOpacity = _a.animateOpacity, rest = __rest(_a, ["in", "animateOpacity"]);
+    var animationProps = animateOpacity
+        ? { _open: { animation: 'fade-in' } }
+        : {};
+    return (React.createElement(react$1.Collapsible.Root, __assign({ open: isOpen }, rest, animationProps),
+        React.createElement(react$1.Collapsible.Content, null, "Some content")));
+};
+
 var Center = function (_a) {
     var children = _a.children, padding = _a.padding;
     return (React.createElement(react$1.Center, { padding: padding }, children));
@@ -5728,6 +6259,31 @@ var CheckboxGroup = function (_a) {
 };
 CheckboxGroup.displayName = 'CheckboxGroup';
 
+var Chip = function (_a) {
+    var children = _a.children, onClick = _a.onClick, href = _a.href, ariaLabel = _a["aria-label"], rest = __rest(_a, ["children", "onClick", "href", 'aria-label']);
+    var recipe = react$1.useRecipe({ recipe: chipRecipe });
+    var recipeProps = recipe.splitVariantProps(rest)[0];
+    var styles = recipe(recipeProps);
+    var handleClick = function () {
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    var handleKeyDown = function (event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+        }
+    };
+    var commonProps = __assign({ css: styles, 'aria-label': ariaLabel }, rest);
+    var isLink = Boolean(href);
+    var asType = isLink ? 'a' : 'button';
+    return (React.createElement(react$1.Flex, __assign({ as: asType }, (isLink && onClick ? { href: href } : {}), (!isLink ? { type: 'button' } : {}), { onClick: handleClick, onKeyDown: handleKeyDown }, commonProps),
+        recipeProps.selected ? (React.createElement(react$1.Box, { mx: "xs", color: "currentColor", display: "flex", alignItems: "center", justifyContent: "center" },
+            React.createElement(CheckmarkIcon, { height: "xs", width: "xs" }))) : null,
+        React.createElement(react$1.Box, { as: "span", whiteSpace: "nowrap" },
+            React.createElement(react$1.Text, { textStyle: "body-small" }, children))));
+};
+Chip.displayName = 'Chip';
+
 var Count = function (_a) {
     var count = _a.count, ariaLabel = _a.ariaLabel, props = __rest(_a, ["count", "ariaLabel"]);
     var recipe = react$1.useRecipe({ key: 'count' });
@@ -5848,6 +6404,46 @@ var Dialog = function (_a) {
                             primaryActionButton ? (React.createElement(Button, { variant: "primary", onClick: primaryActionButton.action, width: { base: 'full', sm: 'fit' } }, primaryActionButton.label)) : null))))))));
 };
 
+var emptyItemOffset = 0;
+var firstItemOffset = 1;
+var getItemOffset = function (applyIndentation) {
+    return applyIndentation ? firstItemOffset : emptyItemOffset;
+};
+var getSliderStepValue = function (marks, applyIndentation, value) {
+    var selectedMarkIndex = marks.findIndex(function (mark) { return mark.value === value; });
+    if (selectedMarkIndex < emptyItemOffset) {
+        return getItemOffset(applyIndentation);
+    }
+    return selectedMarkIndex + getItemOffset(applyIndentation);
+};
+var getSliderMarks = function (marks, applyIndentation) {
+    return marks.map(function (mark, index) { return (__assign(__assign({}, mark), { stepValue: index + getItemOffset(applyIndentation) })); });
+};
+var DiscreteSlider = function (_a) {
+    var marks = _a.marks, _b = _a.applyIndentation, applyIndentation = _b === void 0 ? true : _b, onValueChanged = _a.onValueChanged, value = _a.value;
+    var sliderStepValue = getSliderStepValue(marks, applyIndentation, value);
+    var sliderMarks = getSliderMarks(marks, applyIndentation);
+    var handleOnChange = function (newStepValue) {
+        var _a;
+        if (applyIndentation && newStepValue < firstItemOffset)
+            return;
+        var newSliderMark = (_a = sliderMarks.find(function (mark) { return mark.stepValue === newStepValue; })) === null || _a === void 0 ? void 0 : _a.value;
+        onValueChanged(newSliderMark);
+    };
+    return (React.createElement(react$1.Slider.Root, { step: 1, max: sliderMarks.length - 1 + getItemOffset(applyIndentation), value: [sliderStepValue], onValueChange: function (details) { var _a; return handleOnChange((_a = details.value[0]) !== null && _a !== void 0 ? _a : sliderStepValue); } },
+        React.createElement(react$1.Slider.Control, null,
+            React.createElement(react$1.Slider.Track, null,
+                React.createElement(react$1.Slider.Range, null)),
+            React.createElement(react$1.Slider.Thumbs, null),
+            React.createElement(react$1.Slider.MarkerGroup, null, sliderMarks.map(function (_a, index) {
+                var stepValue = _a.stepValue, label = _a.label;
+                return (React.createElement(react$1.Slider.Marker, { key: index, value: stepValue, style: {
+                        pointerEvents: 'all',
+                        fontWeight: sliderStepValue === stepValue ? 'bold' : 'normal',
+                    } }, label));
+            })))));
+};
+
 var DrawerOverlay = function (props) {
     return React.createElement(react$1.Drawer.Backdrop, __assign({}, props));
 };
@@ -5875,11 +6471,6 @@ var Drawer = function (props) {
 var Text = react$1.Text;
 Text.displayName = 'Text';
 
-var Flex = function (_a) {
-    var children = _a.children, rest = __rest(_a, ["children"]);
-    return (React.createElement(react$1.Flex, __assign({}, rest), children));
-};
-
 var EnergyLabel = function (props) {
     var efficiency = props.efficiency;
     var recipe = react$1.useSlotRecipe({ key: 'energyLabel' });
@@ -5891,6 +6482,9 @@ var EnergyLabel = function (props) {
             React.createElement(Text, { css: styles.text }, efficiency.toString()))));
 };
 
+var _a$2;
+var useI18n = (_a$2 = i18nPkg.createI18nScope(), _a$2.useI18n), I18nProvider = _a$2.I18nProvider, Trans = _a$2.Trans;
+
 var auth$3 = {
 	tenantSelection: {
 		description: "Puoi passare a un altro garage più tardi nel tuo portale rivenditori.",
@@ -6752,13 +7346,23 @@ var logger = new Logger();
 
 var TranslationProvider = function (_a) {
     var language = _a.language, scopes = _a.scopes, children = _a.children;
-    return (React.createElement(i18nPkg.I18nProvider, { language: language, lngDict: i18nPkg.filterDictionaryScopes({
+    return (React.createElement(I18nProvider, { language: language, lngDict: i18nPkg.filterDictionaryScopes({
             dictionaries: dictionaries,
             language: language,
             dictionaryScopes: scopes,
         }), onMissingTranslation: logger.onMissingTranslation }, children));
 };
 
+function withTranslationProvider(scopes) {
+    return function (WrappedComponent) {
+        return function (props) {
+            var language = props.language;
+            return (React.createElement(TranslationProvider, { language: language, scopes: scopes },
+                React.createElement(WrappedComponent, __assign({}, props))));
+        };
+    };
+}
+
 var SimpleGrid = function (props) { return React.createElement(react$1.SimpleGrid, __assign({}, props)); };
 
 var BaseLayout = function (_a) {
@@ -6788,19 +7392,6 @@ var img$6 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAEqBAMAAADJwBvsA
 
 var img$5 = "data:image/png;base64,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";
 
-var EmailChangeVerificationErrorContent = function () {
-    return (React.createElement(react$1.Box, { width: "full" },
-        React.createElement("p", null,
-            React.createElement(i18nPkg.Trans, { i18nKey: "errorPage.EMAIL_CHANGE_VERIFICATION_ERROR.content.email" },
-                React.createElement("strong", null))),
-        React.createElement("p", null,
-            React.createElement(i18nPkg.Trans, { i18nKey: "errorPage.EMAIL_CHANGE_VERIFICATION_ERROR.content.workingHours" },
-                React.createElement("strong", null))),
-        React.createElement("p", null,
-            React.createElement(i18nPkg.Trans, { i18nKey: "errorPage.EMAIL_CHANGE_VERIFICATION_ERROR.content.phone" },
-                React.createElement("strong", null)))));
-};
-
 var ContactSupport = function (_a) {
     var t = _a.t, _b = _a.language, language = _b === void 0 ? 'de' : _b;
     var languageToUse = language === 'en' ? 'de' : language;
@@ -6843,6 +7434,19 @@ var BackToHomepagePrimary = function (props) {
     return React.createElement(BackToHomepage, __assign({}, props, { variant: "primary" }));
 };
 
+var EmailChangeVerificationErrorContent = function () {
+    return (React.createElement(react$1.Box, { width: "full" },
+        React.createElement("p", null,
+            React.createElement(Trans, { i18nKey: "errorPage.EMAIL_CHANGE_VERIFICATION_ERROR.content.email" },
+                React.createElement("strong", null))),
+        React.createElement("p", null,
+            React.createElement(Trans, { i18nKey: "errorPage.EMAIL_CHANGE_VERIFICATION_ERROR.content.workingHours" },
+                React.createElement("strong", null))),
+        React.createElement("p", null,
+            React.createElement(Trans, { i18nKey: "errorPage.EMAIL_CHANGE_VERIFICATION_ERROR.content.phone" },
+                React.createElement("strong", null)))));
+};
+
 var Nonce = function () {
     return null;
 };
@@ -6904,75 +7508,111 @@ var config = {
         secondaryAction: Nonce,
     },
 };
-var ErrorPage = function (_a) {
+var ErrorPageContent = function (_a) {
     var statusCode = _a.statusCode, language = _a.language, onButtonClick = _a.onButtonClick;
     var PrimaryAction = config[statusCode].primaryAction;
     var SecondaryAction = config[statusCode].secondaryAction;
     var Content = config[statusCode].content;
-    return (React.createElement(TranslationProvider, { language: language, scopes: ['errorPage'] },
-        React.createElement(i18nPkg.I18nContext.Consumer, null, function (_a) {
-            var t = _a.t;
-            var actionButtonProps = {
-                t: t,
-                language: language,
-            };
-            return (React.createElement(PageLayout, { maxContentWidth: "md", header: null },
-                React.createElement(Flex, { justifyContent: "center", pt: { base: '3xl', md: 'xl' } },
-                    React.createElement(Stack, { align: "center", gap: "4xl" },
-                        React.createElement(SimpleGrid, { columns: 2, gap: "4xl" },
-                            React.createElement(AutoScout24AppLogo, { width: "2xl", height: "xl" }),
-                            React.createElement(MotoScout24AppLogo, { width: "2xl", height: "xl" })),
-                        React.createElement(Separator, { orientation: "horizontal" }),
-                        React.createElement(Stack, { align: "center", gap: "2xl" },
-                            React.createElement(AspectRatio, { ratio: 4 / 3, css: { maxWidth: '400px', width: 'full' } },
-                                React.createElement(react$1.chakra.img, { src: config[statusCode].illustration, alt: "a ".concat(statusCode, " error occurred.") })),
-                            React.createElement(Stack, { align: "center", gap: "md" },
-                                React.createElement(H1, { textAlign: "center" }, t("errorPage.".concat(statusCode, ".title"))),
-                                React.createElement(Text, { textAlign: "center" }, t("errorPage.".concat(statusCode, ".description"))),
-                                React.createElement(Content, __assign({}, actionButtonProps))),
-                            React.createElement(SimpleGrid, { columns: {
-                                    base: 1,
-                                    sm: config[statusCode].buttonColumns,
-                                }, alignItems: "center", gap: "md" },
-                                React.createElement(PrimaryAction, __assign({}, actionButtonProps)),
-                                React.createElement(SecondaryAction, __assign({}, actionButtonProps, { onButtonClick: onButtonClick }))))))));
-        })));
-};
-
-var FullHeight = function (_a) {
-    var children = _a.children;
-    return (React.createElement(react$1.Box, { minHeight: "screen-height", height: "screen-height" }, children));
+    var t = useI18n().t;
+    var actionButtonProps = {
+        t: t,
+        language: language,
+    };
+    return (React.createElement(PageLayout, { maxContentWidth: "md", header: null },
+        React.createElement(Flex, { justifyContent: "center", pt: { base: '3xl', md: 'xl' } },
+            React.createElement(Stack, { align: "center", gap: "4xl" },
+                React.createElement(SimpleGrid, { columns: 2, gap: "4xl" },
+                    React.createElement(AutoScout24AppLogo, { width: "2xl", height: "xl" }),
+                    React.createElement(MotoScout24AppLogo, { width: "2xl", height: "xl" })),
+                React.createElement(Separator, { orientation: "horizontal" }),
+                React.createElement(Stack, { align: "center", gap: "2xl" },
+                    React.createElement(AspectRatio, { ratio: 4 / 3, css: { maxWidth: '400px', width: 'full' } },
+                        React.createElement(react$1.chakra.img, { src: config[statusCode].illustration, alt: "a ".concat(statusCode, " error occurred.") })),
+                    React.createElement(Stack, { align: "center", gap: "md" },
+                        React.createElement(H1, { textAlign: "center" }, t("errorPage.".concat(statusCode, ".title"))),
+                        React.createElement(Text, { textAlign: "center" }, t("errorPage.".concat(statusCode, ".description"))),
+                        React.createElement(Content, __assign({}, actionButtonProps))),
+                    React.createElement(SimpleGrid, { columns: {
+                            base: 1,
+                            sm: config[statusCode].buttonColumns,
+                        }, alignItems: "center", gap: "md" },
+                        React.createElement(PrimaryAction, __assign({}, actionButtonProps)),
+                        React.createElement(SecondaryAction, __assign({}, actionButtonProps, { onButtonClick: onButtonClick }))))))));
 };
 
-var Link$1 = function (_a) {
-    var isExternal = _a.isExternal, target = _a.target, rel = _a.rel, props = __rest(_a, ["isExternal", "target", "rel"]);
-    return (React.createElement(react$1.Link, __assign({ target: target || (isExternal ? '_blank' : undefined), rel: rel || (isExternal ? 'noopener noreferrer' : undefined) }, props)));
-};
+var ErrorPage = withTranslationProvider([
+    'errorPage',
+])(ErrorPageContent);
 
-var GalleryHeader = function (_a) {
-    var currentSlide = _a.currentSlide, slidesCount = _a.slidesCount, onClose = _a.onClose, language = _a.language, children = _a.children;
+var Tooltip = function (_a) {
+    var children = _a.children, _b = _a.placement, placement = _b === void 0 ? 'bottom' : _b, _c = _a.maxWidth, maxWidth = _c === void 0 ? '6xl' : _c, label = _a.label;
+    var _d = React.useState(false), isOpen = _d[0], setIsOpen = _d[1];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var childrenWithProps = React.cloneElement(children, {
+        onMouseEnter: function () { return setIsOpen(true); },
+        onMouseLeave: function () { return setIsOpen(false); },
+        onClick: function () { return setIsOpen(true); },
+    });
+    return (React.createElement(react$1.TooltipRoot, { positioning: {
+            placement: placement,
+        }, open: isOpen },
+        React.createElement(react$1.TooltipTrigger, { asChild: true }, childrenWithProps),
+        React.createElement(react$1.TooltipPositioner, null,
+            React.createElement(react$1.TooltipContent, { maxWidth: maxWidth },
+                React.createElement(react$1.TooltipArrow, null,
+                    React.createElement(react$1.TooltipArrowTip, null)),
+                label))));
+};
+
+var FormControlSection = function (_a) {
+    var children = _a.children, errorMessage = _a.errorMessage, id = _a.id, label = _a.label, hint = _a.hint, tooltip = _a.tooltip;
+    var isInvalid = !!errorMessage;
+    return (React.createElement(react$1.Field.Root, { id: id, invalid: isInvalid },
+        React.createElement(react$1.Box, { border: "1px", borderRadius: "sm", borderColor: isInvalid ? 'red.500' : 'gray.400', padding: "2xl" },
+            React.createElement(Flex, { flexDirection: "column" },
+                React.createElement(react$1.Box, { mb: "lg" },
+                    React.createElement(Flex, { alignItems: "center" },
+                        label ? (React.createElement(Text, { color: "gray.900", textStyle: "heading4" }, label)) : null,
+                        tooltip ? (React.createElement(Tooltip, { label: tooltip },
+                            React.createElement(InformationIcon, { ml: "md" }))) : null),
+                    hint ? (React.createElement(Text, { color: "gray.900", textStyle: "body" }, hint)) : null),
+                children)),
+        React.createElement(react$1.Field.ErrorText, null, errorMessage)));
+};
+
+var FullHeight = function (_a) {
+    var children = _a.children;
+    return (React.createElement(react$1.Box, { minHeight: "screen-height", height: "screen-height" }, children));
+};
+
+var Link$1 = function (_a) {
+    var isExternal = _a.isExternal, target = _a.target, rel = _a.rel, props = __rest(_a, ["isExternal", "target", "rel"]);
+    return (React.createElement(react$1.Link, __assign({ target: target || (isExternal ? '_blank' : undefined), rel: rel || (isExternal ? 'noopener noreferrer' : undefined) }, props)));
+};
+
+var GalleryHeaderContent = function (_a) {
+    var currentSlide = _a.currentSlide, slidesCount = _a.slidesCount, onClose = _a.onClose, children = _a.children;
+    var t = useI18n().t;
     var recipe = react$1.useSlotRecipe({ key: 'galleryHeader' });
     var styles = recipe();
-    return (React.createElement(TranslationProvider, { language: language, scopes: ['galleryHeader'] },
-        React.createElement(i18nPkg.I18nContext.Consumer, null, function (_a) {
-            var t = _a.t;
-            return (React.createElement(react$1.Box, { css: styles.container },
-                React.createElement(react$1.Box, { css: styles.grid },
-                    React.createElement(SimpleGrid, { columns: {
-                            base: 2,
-                            md: 3,
-                        }, alignItems: "center" },
-                        React.createElement(react$1.Box, { hideBelow: "md" }, children),
-                        React.createElement(react$1.Box, { css: styles.countContainer },
-                            React.createElement(react$1.Box, null, t('galleryHeader.imageCount', {
-                                x: currentSlide,
-                                of: slidesCount,
-                            }))),
-                        React.createElement(react$1.Box, { css: styles.closeContainer },
-                            React.createElement(Link$1, { "aria-label": "Close gallery", onClick: function () { return onClose(); } },
-                                React.createElement(CloseIcon, { color: "white" })))))));
-        })));
-};
+    return (React.createElement(react$1.Box, { css: styles.container },
+        React.createElement(react$1.Box, { css: styles.grid },
+            React.createElement(SimpleGrid, { columns: {
+                    base: 2,
+                    md: 3,
+                }, alignItems: "center" },
+                React.createElement(react$1.Box, { hideBelow: "md" }, children),
+                React.createElement(react$1.Box, { css: styles.countContainer },
+                    React.createElement(react$1.Box, null, t('galleryHeader.imageCount', {
+                        x: currentSlide,
+                        of: slidesCount,
+                    }))),
+                React.createElement(react$1.Box, { css: styles.closeContainer },
+                    React.createElement(Link$1, { "aria-label": "Close gallery", onClick: function () { return onClose(); } },
+                        React.createElement(CloseIcon, { color: "white" })))))));
+};
+
+var GalleryHeader = withTranslationProvider(['galleryHeader'])(GalleryHeaderContent);
 
 var Grid = react$1.Grid;
 Grid.displayName = 'Grid';
@@ -7152,30 +7792,183 @@ var List = {
     Item: Item,
 };
 
-var Chip = function (_a) {
-    var children = _a.children, onClick = _a.onClick, href = _a.href, ariaLabel = _a["aria-label"], rest = __rest(_a, ["children", "onClick", "href", 'aria-label']);
-    var recipe = react$1.useRecipe({ recipe: chipRecipe });
-    var recipeProps = recipe.splitVariantProps(rest)[0];
-    var styles = recipe(recipeProps);
-    var handleClick = function () {
-        onClick === null || onClick === void 0 ? void 0 : onClick();
-    };
-    var handleKeyDown = function (event) {
-        if (event.key === 'Enter' || event.key === ' ') {
-            event.preventDefault();
-            onClick === null || onClick === void 0 ? void 0 : onClick();
+var SearchField = function (_a) {
+    var name = _a.name, _b = _a.placeholder, placeholder = _b === void 0 ? '' : _b, _c = _a.ariaControls, ariaControls = _c === void 0 ? '' : _c, searchQuery = _a.searchQuery, setSearchQuery = _a.setSearchQuery, _d = _a.onFocus, onFocus = _d === void 0 ? function () { return null; } : _d, _e = _a.onBlur, onBlur = _e === void 0 ? function () { return null; } : _e, _f = _a.autofocusOnDesktop, autofocusOnDesktop = _f === void 0 ? true : _f, autoComplete = _a.autoComplete;
+    var isDesktopOnly = useMediaQuery({ above: 'md' });
+    var inputRef = React.useRef(null);
+    React.useEffect(function () {
+        var _a;
+        if (autofocusOnDesktop && isDesktopOnly) {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
+    }, [isDesktopOnly, autofocusOnDesktop]);
+    return (React.createElement(Input, { ref: inputRef, icon: MagnifierIcon, name: name, placeholder: placeholder, value: searchQuery, setInputValue: setSearchQuery, size: "lg", isClearable: true, debounce: true, onFocus: onFocus, onBlur: onBlur, "aria-controls": ariaControls, autoComplete: autoComplete }));
+};
+
+var HighlightedText = function (_a) {
+    var text = _a.text, _b = _a.highlightIndices, highlightIndices = _b === void 0 ? [] : _b, textProps = __rest(_a, ["text", "highlightIndices"]);
+    if (highlightIndices.length === 0)
+        return (React.createElement(Text, __assign({ as: "span" }, textProps), text));
+    var result = [];
+    var currentIndex = 0;
+    for (var _i = 0, highlightIndices_1 = highlightIndices; _i < highlightIndices_1.length; _i++) {
+        var _c = highlightIndices_1[_i], start = _c[0], end = _c[1];
+        // Append the non-matching part
+        result.push(React.createElement(Text, __assign({ key: "non-highlight-".concat(currentIndex, "-").concat(start, "-").concat(text), as: "span" }, textProps), text.substring(currentIndex, start)));
+        // Append the matching part
+        result.push(React.createElement(Text, __assign({ key: "highlight-".concat(start, "-").concat(end + 1, "-").concat(text), as: "u", fontWeight: "bold" }, textProps), text.substring(start, end + 1)));
+        currentIndex = end + 1;
+    }
+    // Append the remaining non-matching part
+    result.push(React.createElement(Text, __assign({ key: "non-highlight-end-".concat(text), as: "span" }, textProps), text.substring(currentIndex)));
+    return (React.createElement(Text, __assign({ as: "span" }, textProps), result));
+};
+
+var SearchableListItemLabel = function (_a) {
+    var label = _a.label, isSelected = _a.isSelected, _b = _a.showChevron, showChevron = _b === void 0 ? true : _b, _c = _a.highlightIndices, highlightIndices = _c === void 0 ? [] : _c, _d = _a.isCheckbox, isCheckbox = _d === void 0 ? false : _d, facet = _a.facet;
+    return (React.createElement(Flex, { width: "full", justifyContent: "space-between", whiteSpace: "pre-wrap", fontWeight: isSelected && !isCheckbox ? 'bold' : undefined, color: "gray.900", cursor: "pointer" },
+        React.createElement(Flex, null,
+            isSelected && !isCheckbox ? (React.createElement(CheckmarkIcon, { w: "xs", mr: "xs", color: "gray.900" })) : null,
+            React.createElement(HighlightedText, { text: label, highlightIndices: highlightIndices, textAlign: "left" })),
+        React.createElement(Flex, { as: "span" },
+            facet ? (React.createElement(Text, { as: "span", color: "gray.400", mr: showChevron ? 'lg' : undefined, ml: "sm", minW: "lg", textAlign: "right", fontWeight: "regular" }, facet)) : null,
+            showChevron ? (React.createElement(ChevronRightSmallIcon, { color: "gray.500", w: "sm", h: "sm" })) : null)));
+};
+
+var isCheckboxType = function (listItem) {
+    return !!listItem.isCheckbox;
+};
+var SearchableListItem = function (props) {
+    var isCheckbox = isCheckboxType(props);
+    var label = props.label, value = props.value, facet = props.facet, isSelected = props.isSelected, _a = props.showChevron, showChevron = _a === void 0 ? true : _a, _b = props.highlightIndices, highlightIndices = _b === void 0 ? [] : _b, children = props.children;
+    var labelProps = {
+        label: label,
+        isSelected: isSelected,
+        showChevron: showChevron,
+        highlightIndices: highlightIndices,
+        isCheckbox: isCheckbox,
+        facet: facet,
     };
-    var commonProps = __assign({ css: styles, 'aria-label': ariaLabel }, rest);
-    var isLink = Boolean(href);
-    var asType = isLink ? 'a' : 'button';
-    return (React.createElement(react$1.Flex, __assign({ as: asType }, (isLink && onClick ? { href: href } : {}), (!isLink ? { type: 'button' } : {}), { onClick: handleClick, onKeyDown: handleKeyDown }, commonProps),
-        recipeProps.selected ? (React.createElement(react$1.Box, { mx: "xs", color: "currentColor", display: "flex", alignItems: "center", justifyContent: "center" },
-            React.createElement(CheckmarkIcon, { height: "xs", width: "xs" }))) : null,
-        React.createElement(react$1.Box, { as: "span", whiteSpace: "nowrap" },
-            React.createElement(react$1.Text, { textStyle: "body-small" }, children))));
+    var commonProps = {
+        value: value,
+        paddingY: 'sm',
+        name: "searchable-list-item-".concat(value),
+        'aria-current': isSelected,
+    };
+    var checkboxProps = __assign(__assign({}, commonProps), { label: React.createElement(SearchableListItemLabel, __assign({}, labelProps)), checked: isSelected, indeterminate: isCheckbox ? !!props.isIndeterminate : false, fullWidth: true, variant: 'alignTop', onChange: isCheckbox ? props.onClick : undefined });
+    return (React.createElement(List.Item, { css: { breakInside: 'avoid' }, paddingLeft: props.paddingLeft },
+        isCheckbox ? (React.createElement(Checkbox, __assign({}, checkboxProps))) : (React.createElement(react$1.Button, { value: value, paddingY: "sm", name: "searchable-list-item-".concat(value), "aria-current": isSelected, onClick: !isCheckbox ? props.onClick : undefined, width: "full", display: "flex", paddingX: "0" },
+            React.createElement(SearchableListItemLabel, __assign({}, labelProps)))),
+        children));
+};
+
+var fuseOptions = {
+    keys: ['label', 'children.label'],
+    includeMatches: true,
+    threshold: 0,
+    ignoreLocation: true,
+    minMatchCharLength: 1,
+    shouldSort: false,
+};
+var mapItemsFromSearchResult = function (searchResults) {
+    return searchResults.map(function (_a) {
+        var _b = _a.matches, matches = _b === void 0 ? [] : _b, item = _a.item;
+        var parentMatch = matches.find(function (match) { return match.key === 'label'; });
+        var parentHighlightIndices = parentMatch ? parentMatch.indices : [];
+        var childMatches = item.children
+            ? matches.filter(function (match) { return match.key === 'children.label'; })
+            : [];
+        if (!item.children ||
+            item.children.length === 0 ||
+            childMatches.length === 0) {
+            return __assign(__assign({}, item), { highlightIndices: parentHighlightIndices });
+        }
+        var itemChildren = item.children || [];
+        var children = childMatches.reduce(function (accumulator, childMatch) {
+            if (childMatch.refIndex === undefined) {
+                return accumulator;
+            }
+            var child = itemChildren[childMatch.refIndex];
+            accumulator.push(__assign(__assign({}, child), { highlightIndices: childMatch.indices }));
+            return accumulator;
+        }, []);
+        return __assign(__assign(__assign({}, item), (children ? { children: children } : {})), { highlightIndices: parentMatch ? parentMatch.indices : [] });
+    });
+};
+var empty = function () { return null; };
+var search = function (_a) {
+    var query = _a.query, fuse = _a.fuse;
+    fuse.options.minMatchCharLength = query.length || 1;
+    return fuse.search(query);
+};
+var getFuseInstance = function (listItems) {
+    // Not casting the instance will result in the options not being typed
+    return new Fuse(listItems, fuseOptions);
+};
+var SearchableList = function (_a) {
+    var listItems = _a.listItems, _b = _a.NoResults, NoResults = _b === void 0 ? empty : _b, _c = _a.EmptyQueryPlaceholder, EmptyQueryPlaceholder = _c === void 0 ? empty : _c, _d = _a.listAriaLabel, listAriaLabel = _d === void 0 ? 'searchable list' : _d, _e = _a.searchFieldOptions, searchFieldOptions = _e === void 0 ? {} : _e, _f = _a.listOptions, listOptions = _f === void 0 ? { columns: 1, childrenSpacing: 'md' } : _f, listRef = _a.listRef;
+    var gray200 = useToken('colors', ['gray.200'])[0];
+    var _g = React.useState({
+        query: '',
+        listItems: listItems,
+        fullListItems: __spreadArray([], listItems, true),
+        fuse: getFuseInstance(listItems),
+    }), searchState = _g[0], setSearchState = _g[1];
+    var _h = searchFieldOptions.placeholder, placeholder = _h === void 0 ? '' : _h, _j = searchFieldOptions.autofocusOnDesktop, autofocusOnDesktop = _j === void 0 ? true : _j, autoComplete = searchFieldOptions.autoComplete;
+    var _k = listOptions.columns, columns = _k === void 0 ? 1 : _k, _l = listOptions.childrenSpacing, childrenSpacing = _l === void 0 ? 'md' : _l;
+    var areaId = 'searchableList';
+    var query = searchState.query;
+    React.useEffect(function () {
+        setSearchState(function (currentState) {
+            var fuse = getFuseInstance(listItems);
+            if (currentState.query === '') {
+                return {
+                    listItems: listItems,
+                    fullListItems: __spreadArray([], listItems, true),
+                    fuse: fuse,
+                    query: currentState.query,
+                };
+            }
+            var searchResults = search({ fuse: fuse, query: currentState.query });
+            var filteredListItems = mapItemsFromSearchResult(searchResults);
+            return {
+                listItems: filteredListItems,
+                fuse: fuse,
+                query: currentState.query,
+                fullListItems: __spreadArray([], listItems, true),
+            };
+        });
+    }, [listItems]);
+    var setSearchQuery = React.useCallback(function (newQuery) {
+        setSearchState(function (currentState) {
+            var trimmedQuery = newQuery.trim();
+            if (!trimmedQuery) {
+                return __assign(__assign({}, currentState), { listItems: currentState.fullListItems, query: trimmedQuery });
+            }
+            var searchResults = search({
+                fuse: currentState.fuse,
+                query: trimmedQuery,
+            });
+            var filteredListItems = mapItemsFromSearchResult(searchResults);
+            return __assign(__assign({}, currentState), { listItems: filteredListItems, query: trimmedQuery });
+        });
+    }, []);
+    return (React.createElement(Flex, { gridGap: "md", direction: "column", width: "full" },
+        React.createElement(SearchField, { name: "searchableListSearchFiled", searchQuery: query, setSearchQuery: setSearchQuery, ariaControls: areaId, placeholder: placeholder, autofocusOnDesktop: autofocusOnDesktop, autoComplete: autoComplete }),
+        searchState.query.length === 0 ? React.createElement(EmptyQueryPlaceholder, null) : null,
+        searchState.listItems.length > 0 ? (React.createElement(List.Root, { ref: listRef, width: "full", height: "full", id: areaId, "aria-live": "polite", css: {
+                columns: { base: 1, md: columns },
+                columnGap: '4xl',
+                columnRule: "1px solid ".concat(gray200),
+            }, "aria-label": listAriaLabel }, searchState.listItems.map(function (item, itemIndex) {
+            var parentKey = "".concat(itemIndex, "-").concat(item.value);
+            var children = item.children || [];
+            return (React.createElement(SearchableListItem, __assign({}, item, { key: parentKey }), children.length > 0 ? (React.createElement(List.Root, { width: "full" }, children.map(function (child, childIndex) {
+                var childKey = "".concat(childIndex, "-").concat(child.value);
+                return (React.createElement(SearchableListItem, __assign({}, child, { key: childKey, paddingLeft: childrenSpacing })));
+            }))) : null));
+        }))) : (React.createElement(NoResults, null))));
 };
-Chip.displayName = 'Chip';
 
 var Menu = function (_a) {
     var title = _a.title, items = _a.items, value = _a.value, _b = _a.fontWeightTitle, fontWeightTitle = _b === void 0 ? 'regular' : _b, _c = _a.offset, offset = _c === void 0 ? [8, 0] : _c, menuColor = _a.menuColor, menuOptionColor = _a.menuOptionColor, _d = _a.showChevron, showChevron = _d === void 0 ? true : _d, icon = _a.icon, _e = _a.iconSpacing, iconSpacing = _e === void 0 ? 'sm' : _e, placement = _a.placement, _f = _a.showOptionsCheckmark, showOptionsCheckmark = _f === void 0 ? false : _f;
@@ -7211,7 +8004,7 @@ var MobileOnlyAccordion = function (props) {
 var FooterLink = function (_a) {
     var _b, _c;
     var linkInstance = _a.linkInstance, children = _a.children, _d = _a.bold, bold = _d === void 0 ? false : _d;
-    var _e = i18nPkg.useI18n(), t = _e.t, language = _e.language;
+    var _e = useI18n(), t = _e.t, language = _e.language;
     if (!linkInstance) {
         return null;
     }
@@ -7314,7 +8107,7 @@ var MobileOnlyAccordionButton = function (props) {
 
 var FooterSections = function (_a) {
     var config = _a.config;
-    var t = i18nPkg.useI18n().t;
+    var t = useI18n().t;
     var sectionChunks = chunkArray({
         array: config.sections,
         chunkSize: 2,
@@ -7340,7 +8133,7 @@ var img$3 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARAAAABQCAMAAADm+9r/A
 
 var FooterApps = function (_a) {
     var config = _a.config;
-    var t = i18nPkg.useI18n().t;
+    var t = useI18n().t;
     return (React.createElement(GridItem, null,
         React.createElement(Stack, { paddingY: { base: '2xl', md: 'md' }, paddingX: { base: 'md', md: '0' }, gap: "md" },
             React.createElement(Text, { textStyle: "heading5" }, t('footer.apps.title')),
@@ -7375,7 +8168,7 @@ var FooterLanguageNavigation = function () {
 };
 
 var FooterCopyright = function () {
-    var t = i18nPkg.useI18n().t;
+    var t = useI18n().t;
     return (React.createElement(react$1.Box, { textStyle: "body-small", textAlign: "center", opacity: "80" }, t('footer.copyright', { year: new Date().getFullYear() })));
 };
 
@@ -8266,183 +9059,6 @@ var Footer$1 = function (_a) {
                         React.createElement(FooterCopyright, null)))))));
 };
 
-var SearchField = function (_a) {
-    var name = _a.name, _b = _a.placeholder, placeholder = _b === void 0 ? '' : _b, _c = _a.ariaControls, ariaControls = _c === void 0 ? '' : _c, searchQuery = _a.searchQuery, setSearchQuery = _a.setSearchQuery, _d = _a.onFocus, onFocus = _d === void 0 ? function () { return null; } : _d, _e = _a.onBlur, onBlur = _e === void 0 ? function () { return null; } : _e, _f = _a.autofocusOnDesktop, autofocusOnDesktop = _f === void 0 ? true : _f, autoComplete = _a.autoComplete;
-    var isDesktopOnly = useMediaQuery({ above: 'md' });
-    var inputRef = React.useRef(null);
-    React.useEffect(function () {
-        var _a;
-        if (autofocusOnDesktop && isDesktopOnly) {
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-    }, [isDesktopOnly, autofocusOnDesktop]);
-    return (React.createElement(Input, { ref: inputRef, icon: MagnifierIcon, name: name, placeholder: placeholder, value: searchQuery, setInputValue: setSearchQuery, size: "lg", isClearable: true, debounce: true, onFocus: onFocus, onBlur: onBlur, "aria-controls": ariaControls, autoComplete: autoComplete }));
-};
-
-var HighlightedText = function (_a) {
-    var text = _a.text, _b = _a.highlightIndices, highlightIndices = _b === void 0 ? [] : _b, textProps = __rest(_a, ["text", "highlightIndices"]);
-    if (highlightIndices.length === 0)
-        return (React.createElement(Text, __assign({ as: "span" }, textProps), text));
-    var result = [];
-    var currentIndex = 0;
-    for (var _i = 0, highlightIndices_1 = highlightIndices; _i < highlightIndices_1.length; _i++) {
-        var _c = highlightIndices_1[_i], start = _c[0], end = _c[1];
-        // Append the non-matching part
-        result.push(React.createElement(Text, __assign({ key: "non-highlight-".concat(currentIndex, "-").concat(start, "-").concat(text), as: "span" }, textProps), text.substring(currentIndex, start)));
-        // Append the matching part
-        result.push(React.createElement(Text, __assign({ key: "highlight-".concat(start, "-").concat(end + 1, "-").concat(text), as: "u", fontWeight: "bold" }, textProps), text.substring(start, end + 1)));
-        currentIndex = end + 1;
-    }
-    // Append the remaining non-matching part
-    result.push(React.createElement(Text, __assign({ key: "non-highlight-end-".concat(text), as: "span" }, textProps), text.substring(currentIndex)));
-    return (React.createElement(Text, __assign({ as: "span" }, textProps), result));
-};
-
-var SearchableListItemLabel = function (_a) {
-    var label = _a.label, isSelected = _a.isSelected, _b = _a.showChevron, showChevron = _b === void 0 ? true : _b, _c = _a.highlightIndices, highlightIndices = _c === void 0 ? [] : _c, _d = _a.isCheckbox, isCheckbox = _d === void 0 ? false : _d, facet = _a.facet;
-    return (React.createElement(Flex, { width: "full", justifyContent: "space-between", whiteSpace: "pre-wrap", fontWeight: isSelected && !isCheckbox ? 'bold' : undefined, color: "gray.900", cursor: "pointer" },
-        React.createElement(Flex, null,
-            isSelected && !isCheckbox ? (React.createElement(CheckmarkIcon, { w: "xs", mr: "xs", color: "gray.900" })) : null,
-            React.createElement(HighlightedText, { text: label, highlightIndices: highlightIndices, textAlign: "left" })),
-        React.createElement(Flex, { as: "span" },
-            facet ? (React.createElement(Text, { as: "span", color: "gray.400", mr: showChevron ? 'lg' : undefined, ml: "sm", minW: "lg", textAlign: "right", fontWeight: "regular" }, facet)) : null,
-            showChevron ? (React.createElement(ChevronRightSmallIcon, { color: "gray.500", w: "sm", h: "sm" })) : null)));
-};
-
-var isCheckboxType = function (listItem) {
-    return !!listItem.isCheckbox;
-};
-var SearchableListItem = function (props) {
-    var isCheckbox = isCheckboxType(props);
-    var label = props.label, value = props.value, facet = props.facet, isSelected = props.isSelected, _a = props.showChevron, showChevron = _a === void 0 ? true : _a, _b = props.highlightIndices, highlightIndices = _b === void 0 ? [] : _b, children = props.children;
-    var labelProps = {
-        label: label,
-        isSelected: isSelected,
-        showChevron: showChevron,
-        highlightIndices: highlightIndices,
-        isCheckbox: isCheckbox,
-        facet: facet,
-    };
-    var commonProps = {
-        value: value,
-        paddingY: 'sm',
-        name: "searchable-list-item-".concat(value),
-        'aria-current': isSelected,
-    };
-    var checkboxProps = __assign(__assign({}, commonProps), { label: React.createElement(SearchableListItemLabel, __assign({}, labelProps)), checked: isSelected, indeterminate: isCheckbox ? !!props.isIndeterminate : false, fullWidth: true, variant: 'alignTop', onChange: isCheckbox ? props.onClick : undefined });
-    return (React.createElement(List.Item, { css: { breakInside: 'avoid' }, paddingLeft: props.paddingLeft },
-        isCheckbox ? (React.createElement(Checkbox, __assign({}, checkboxProps))) : (React.createElement(react$1.Button, { value: value, paddingY: "sm", name: "searchable-list-item-".concat(value), "aria-current": isSelected, onClick: !isCheckbox ? props.onClick : undefined, width: "full", display: "flex", paddingX: "0" },
-            React.createElement(SearchableListItemLabel, __assign({}, labelProps)))),
-        children));
-};
-
-var fuseOptions = {
-    keys: ['label', 'children.label'],
-    includeMatches: true,
-    threshold: 0,
-    ignoreLocation: true,
-    minMatchCharLength: 1,
-    shouldSort: false,
-};
-var mapItemsFromSearchResult = function (searchResults) {
-    return searchResults.map(function (_a) {
-        var _b = _a.matches, matches = _b === void 0 ? [] : _b, item = _a.item;
-        var parentMatch = matches.find(function (match) { return match.key === 'label'; });
-        var parentHighlightIndices = parentMatch ? parentMatch.indices : [];
-        var childMatches = item.children
-            ? matches.filter(function (match) { return match.key === 'children.label'; })
-            : [];
-        if (!item.children ||
-            item.children.length === 0 ||
-            childMatches.length === 0) {
-            return __assign(__assign({}, item), { highlightIndices: parentHighlightIndices });
-        }
-        var itemChildren = item.children || [];
-        var children = childMatches.reduce(function (accumulator, childMatch) {
-            if (childMatch.refIndex === undefined) {
-                return accumulator;
-            }
-            var child = itemChildren[childMatch.refIndex];
-            accumulator.push(__assign(__assign({}, child), { highlightIndices: childMatch.indices }));
-            return accumulator;
-        }, []);
-        return __assign(__assign(__assign({}, item), (children ? { children: children } : {})), { highlightIndices: parentMatch ? parentMatch.indices : [] });
-    });
-};
-var empty = function () { return null; };
-var search = function (_a) {
-    var query = _a.query, fuse = _a.fuse;
-    fuse.options.minMatchCharLength = query.length || 1;
-    return fuse.search(query);
-};
-var getFuseInstance = function (listItems) {
-    // Not casting the instance will result in the options not being typed
-    return new Fuse(listItems, fuseOptions);
-};
-var SearchableList = function (_a) {
-    var listItems = _a.listItems, _b = _a.NoResults, NoResults = _b === void 0 ? empty : _b, _c = _a.EmptyQueryPlaceholder, EmptyQueryPlaceholder = _c === void 0 ? empty : _c, _d = _a.listAriaLabel, listAriaLabel = _d === void 0 ? 'searchable list' : _d, _e = _a.searchFieldOptions, searchFieldOptions = _e === void 0 ? {} : _e, _f = _a.listOptions, listOptions = _f === void 0 ? { columns: 1, childrenSpacing: 'md' } : _f, listRef = _a.listRef;
-    var _g = React.useState({
-        query: '',
-        listItems: listItems,
-        fullListItems: __spreadArray([], listItems, true),
-        fuse: getFuseInstance(listItems),
-    }), searchState = _g[0], setSearchState = _g[1];
-    var _h = searchFieldOptions.placeholder, placeholder = _h === void 0 ? '' : _h, _j = searchFieldOptions.autofocusOnDesktop, autofocusOnDesktop = _j === void 0 ? true : _j, autoComplete = searchFieldOptions.autoComplete;
-    var _k = listOptions.columns, columns = _k === void 0 ? 1 : _k, _l = listOptions.childrenSpacing, childrenSpacing = _l === void 0 ? 'md' : _l;
-    var areaId = 'searchableList';
-    var query = searchState.query;
-    React.useEffect(function () {
-        setSearchState(function (currentState) {
-            var fuse = getFuseInstance(listItems);
-            if (currentState.query === '') {
-                return {
-                    listItems: listItems,
-                    fullListItems: __spreadArray([], listItems, true),
-                    fuse: fuse,
-                    query: currentState.query,
-                };
-            }
-            var searchResults = search({ fuse: fuse, query: currentState.query });
-            var filteredListItems = mapItemsFromSearchResult(searchResults);
-            return {
-                listItems: filteredListItems,
-                fuse: fuse,
-                query: currentState.query,
-                fullListItems: __spreadArray([], listItems, true),
-            };
-        });
-    }, [listItems]);
-    var setSearchQuery = React.useCallback(function (newQuery) {
-        setSearchState(function (currentState) {
-            var trimmedQuery = newQuery.trim();
-            if (!trimmedQuery) {
-                return __assign(__assign({}, currentState), { listItems: currentState.fullListItems, query: trimmedQuery });
-            }
-            var searchResults = search({
-                fuse: currentState.fuse,
-                query: trimmedQuery,
-            });
-            var filteredListItems = mapItemsFromSearchResult(searchResults);
-            return __assign(__assign({}, currentState), { listItems: filteredListItems, query: trimmedQuery });
-        });
-    }, []);
-    return (React.createElement(Flex, { gridGap: "md", direction: "column", width: "full" },
-        React.createElement(SearchField, { name: "searchableListSearchFiled", searchQuery: query, setSearchQuery: setSearchQuery, ariaControls: areaId, placeholder: placeholder, autofocusOnDesktop: autofocusOnDesktop, autoComplete: autoComplete }),
-        searchState.query.length === 0 ? React.createElement(EmptyQueryPlaceholder, null) : null,
-        searchState.listItems.length > 0 ? (React.createElement(List.Root, { ref: listRef, width: "full", height: "full", id: areaId, "aria-live": "polite", css: {
-                columns: { base: 1, md: columns },
-                columnGap: '4xl',
-                columnRule: '1px solid #CFCFCF',
-            }, "aria-label": listAriaLabel }, searchState.listItems.map(function (item, itemIndex) {
-            var parentKey = "".concat(itemIndex, "-").concat(item.value);
-            var children = item.children || [];
-            return (React.createElement(SearchableListItem, __assign({}, item, { key: parentKey }), children.length > 0 ? (React.createElement(List.Root, { width: "full" }, children.map(function (child, childIndex) {
-                var childKey = "".concat(childIndex, "-").concat(child.value);
-                return (React.createElement(SearchableListItem, __assign({}, child, { key: childKey, paddingLeft: childrenSpacing })));
-            }))) : null));
-        }))) : (React.createElement(NoResults, null))));
-};
-
 var createTenantLabel = function (managedSeller) {
     if (!managedSeller)
         return '';
@@ -8514,7 +9130,7 @@ var NavigationTenantMenuContent = function (_a) {
 var NavigationTenantMenu = function (_a) {
     var user = _a.user, selectTenant = _a.selectTenant;
     var _b = react$1.useDisclosure(), onClose = _b.onClose, open = _b.open, onToggle = _b.onToggle;
-    var t = i18nPkg.useI18n().t;
+    var t = useI18n().t;
     var selectedTenant = React.useMemo(function () {
         var _a;
         return (_a = user === null || user === void 0 ? void 0 : user.managedSellers) === null || _a === void 0 ? void 0 : _a.find(function (seller) { return seller.id === Number(user.sellerId); });
@@ -8594,7 +9210,7 @@ var DrawerIndicator = function (_a) {
 
 var NavigationItem = function (_a) {
     var translationKey = _a.translationKey, drawerHandler = _a.drawerHandler, isOpen = _a.isOpen;
-    var t = i18nPkg.useI18n().t;
+    var t = useI18n().t;
     var recipe = react$1.useSlotRecipe({ key: 'link' });
     var styles = recipe({ variant: 'navigationLink' });
     return (React.createElement(react$1.Box, { onClick: drawerHandler, css: __assign({}, styles.root), fontWeight: "bold", color: isOpen ? 'blue.700' : 'gray.900', _hover: { color: 'blue.700' }, position: "relative", cursor: "pointer", display: "flex", alignItems: "center" },
@@ -8605,7 +9221,7 @@ var NavigationItem = function (_a) {
 
 var NavigationLink = function (_a) {
     var link = _a.link, title = _a.title, translationKey = _a.translationKey, _b = _a.translationParameters, translationParameters = _b === void 0 ? {} : _b, isNew = _a.isNew, _c = _a.fontWeight, fontWeight = _c === void 0 ? 'regular' : _c, _d = _a.variant, variant = _d === void 0 ? 'navigationLink' : _d, color = _a.color, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, hideTextBelow = _a.hideTextBelow, onClick = _a.onClick;
-    var _e = i18nPkg.useI18n(), t = _e.t, language = _e.language;
+    var _e = useI18n(), t = _e.t, language = _e.language;
     var linkColor = color || 'gray.900';
     var hoverStyle = variant === 'navigationLink' ? { color: 'blue.700' } : undefined;
     return (React.createElement(Link$1, { href: link && link[language], variant: variant, fontWeight: fontWeight, css: { color: linkColor }, _hover: hoverStyle, onClick: onClick, display: "flex", alignItems: "center", gap: "md" },
@@ -9652,7 +10268,7 @@ var getComparisonUrl = function (comparisonItemIds) {
 var ComparisonItem = function (_a) {
     var _b, _c;
     var link = _a.link, count = _a.count;
-    var _d = i18nPkg.useI18n(), t = _d.t, language = _d.language;
+    var _d = useI18n(), t = _d.t, language = _d.language;
     return (React.createElement(react$1.chakra.a, { position: "relative", display: "block", href: (_b = link.link) === null || _b === void 0 ? void 0 : _b[language], onClick: link.onClick, "aria-label": t((_c = link.translationKey) !== null && _c !== void 0 ? _c : '', link.translationParameters), mr: "lg" },
         React.createElement(CompareIcon, { color: "gray.900" }),
         React.createElement(react$1.Box, { position: "absolute", css: { top: '-10px', right: '-15px' } }, count > 0 ? React.createElement(Count, { count: count }) : null)));
@@ -10063,7 +10679,7 @@ var NavigationAvatar = function (_a) {
     var isDrawerOpened = isOpen && (drawer === null || drawer === void 0 ? void 0 : drawer.current) === DrawerNode.User;
     var recipe = react$1.useSlotRecipe({ key: 'link' });
     var styles = recipe({ variant: 'navigationLink' });
-    var t = i18nPkg.useI18n().t;
+    var t = useI18n().t;
     if (user) {
         return (React.createElement(react$1.Box, { hideBelow: "sm" },
             React.createElement(react$1.Box, { display: "flex", flexDirection: "row", gap: "xs", cursor: "pointer", _hover: { color: 'blue.700' }, color: isDrawerOpened ? 'blue.700' : 'gray.900', onClick: createDrawerHandler({
@@ -10134,7 +10750,7 @@ var useNavigationDrawer = function (_a) {
 var FavoritesItem = function (_a) {
     var _b, _c;
     var link = _a.link;
-    var _d = i18nPkg.useI18n(), t = _d.t, language = _d.language;
+    var _d = useI18n(), t = _d.t, language = _d.language;
     return (React.createElement(react$1.chakra.a, { position: "relative", href: (_b = link.link) === null || _b === void 0 ? void 0 : _b[language], onClick: link.onClick, "aria-label": t((_c = link.translationKey) !== null && _c !== void 0 ? _c : '') },
         React.createElement(HeartIcon, { color: "gray.900" })));
 };
@@ -10228,7 +10844,7 @@ var NonCollapsibleSection = function (_a) {
 };
 var CollapsibleSection = function (_a) {
     var node = _a.node;
-    var t = i18nPkg.useI18n().t;
+    var t = useI18n().t;
     if (!node.translationKey && !node.title) {
         return null;
     }
@@ -10252,7 +10868,7 @@ var DrawerMenu = function (_a) {
 
 var DrawerLoginToggle = function (_a) {
     var user = _a.user, onLogin = _a.onLogin, onLogout = _a.onLogout;
-    var t = i18nPkg.useI18n().t;
+    var t = useI18n().t;
     return (React.createElement(Button, { as: "button", variant: "secondary", size: "md", marginTop: "md", marginX: "lg", onClick: user ? onLogout : onLogin },
         user ? React.createElement(LogoutIcon, null) : React.createElement(AvatarIcon, null),
         user ? t('header.userMenu.logout') : t('header.login')));
@@ -10278,7 +10894,7 @@ var NavigationDrawer = function (_a) {
                     maxWidth: '100vw',
                     width: '100%',
                 } },
-                React.createElement(react$1.Box, { "data-testid": "drawer-body", py: "lg", px: { md: 'xs' }, maxWidth: "container.2xl", width: "full", margin: "auto" }, isOpen ? (React.createElement(Grid, { height: "full", width: "full", templateColumns: {
+                React.createElement(react$1.Box, { py: "lg", px: { md: 'xs' }, maxWidth: "container.2xl", width: "full", margin: "auto" }, isOpen ? (React.createElement(Grid, { "data-testid": "drawer-body", height: "full", width: "full", templateColumns: {
                         '2xs': 'minmax(0, 1fr)',
                         md: 'repeat(5, 1fr)',
                     }, gap: { md: '3xl' } },
@@ -10588,6 +11204,91 @@ var Pagination = function (_a) {
                     React.createElement(ChevronRightSmallIcon, null))))));
 };
 
+var InputLeftElement = function (_a) {
+    var unit = _a.unit;
+    return (React.createElement(react$1.InputElement, { insetY: "0", px: "sm", textStyle: "body-small", pointerEvents: "none" }, unit));
+};
+
+var parseToNumberOrUndef = function (raw) {
+    if (raw.trim() === '')
+        return undefined;
+    var n = Number(raw);
+    return Number.isNaN(n) ? undefined : n;
+};
+var InputGroup = function (_a) {
+    var _b;
+    var handleChange = _a.handleChange, inputProps = _a.inputProps, onBlur = _a.onBlur, unit = _a.unit, rest = __rest(_a, ["handleChange", "inputProps", "onBlur", "unit"]);
+    var recipe = react$1.useSlotRecipe({ key: 'numberInput' });
+    var _c = recipe.splitVariantProps(rest), recipeProps = _c[0], restProps = _c[1];
+    var styles = recipe(recipeProps);
+    /**
+     * Local string state that represents exactly what the user typed.
+     *
+     * Why string:
+     * - Allows intermediate values ("1" → "10" → "100")
+     * - Prevents cursor jumps and unstable behavior
+     * - Most stable approach with Chakra v3 NumberInput
+     */
+    var _d = React.useState(inputProps.value != null ? String(inputProps.value) : ''), raw = _d[0], setRaw = _d[1];
+    /**
+     * Sync external value changes (e.g. slider moved) back into the input.
+     * Without this, the input would display stale values.
+     */
+    React.useEffect(function () {
+        setRaw(inputProps.value != null ? String(inputProps.value) : '');
+    }, [inputProps.value]);
+    /**
+     * Debounced emit PER INPUT (important!)
+     *
+     * Why per-input debounce:
+     * - Shared debounce caused race conditions between FROM / TO inputs
+     * - Each input must control its own timing
+     *
+     */
+    var debouncedEmit = useDebounce.useDebouncedCallback(function (nextRaw) {
+        handleChange({
+            name: inputProps.name,
+            value: parseToNumberOrUndef(nextRaw),
+        });
+    }, 1000);
+    return (React.createElement(react$1.NumberInput.Root, __assign({ css: styles.root, width: "full", 
+        // Update local string immediately
+        value: raw, onValueChange: function (_a) {
+            var value = _a.value;
+            setRaw(value);
+            debouncedEmit(value);
+        }, 
+        /**
+         * On blur we emit immediately as a safety net,
+         * ensuring the final value is always propagated.
+         */
+        onBlur: function () {
+            onBlur === null || onBlur === void 0 ? void 0 : onBlur({
+                name: inputProps.name,
+                value: parseToNumberOrUndef(raw),
+            });
+        } }, restProps),
+        unit ? React.createElement(InputLeftElement, { unit: unit }) : null,
+        React.createElement(react$1.NumberInput.Input, { css: styles.input, placeholder: (_b = inputProps.placeholder) !== null && _b !== void 0 ? _b : '', "aria-label": inputProps.ariaLabel, fontSize: "base" })));
+};
+
+var RangeFilterInput = function (_a) {
+    var from = _a.from, to = _a.to, handleChange = _a.handleChange, unit = _a.unit, onBlur = _a.onBlur, rest = __rest(_a, ["from", "to", "handleChange", "unit", "onBlur"]);
+    return (React.createElement(react$1.Flex, null,
+        React.createElement(InputGroup, __assign({ inputProps: from, variant: "inputLeft", handleChange: handleChange, onBlur: onBlur, unit: unit }, rest)),
+        React.createElement(InputGroup, __assign({ inputProps: to, variant: "inputRight", handleChange: handleChange, onBlur: onBlur, unit: unit }, rest))));
+};
+
+var RangeSlider = function (_a) {
+    var _b = _a.min, min = _b === void 0 ? 0 : _b, _c = _a.max, max = _c === void 0 ? 10 : _c, onChange = _a.onChange, onChangeEnd = _a.onChangeEnd, rest = __rest(_a, ["min", "max", "onChange", "onChangeEnd"]);
+    return (React.createElement(react$1.Slider.Root, __assign({ defaultValue: [min, max], min: min, max: max, onValueChange: function (details) { return onChange === null || onChange === void 0 ? void 0 : onChange(details.value); }, onValueChangeEnd: function (details) { return onChangeEnd === null || onChangeEnd === void 0 ? void 0 : onChangeEnd(details.value); } }, rest),
+        React.createElement(react$1.Slider.Control, null,
+            React.createElement(react$1.Slider.Track, null,
+                React.createElement(react$1.Slider.Range, null)),
+            React.createElement(react$1.Slider.Thumb, { index: 0, "aria-label": "Min", width: { base: 'md', sm: 'sm' }, height: { base: 'md', sm: 'sm' } }),
+            React.createElement(react$1.Slider.Thumb, { index: 1, "aria-label": "Max", width: { base: 'md', sm: 'sm' }, height: { base: 'md', sm: 'sm' } }))));
+};
+
 var Rating = function (_a) {
     var rating = _a.rating, props = __rest(_a, ["rating"]);
     var percent = "calc((".concat(rating.toString(), " - 0.16) / 5 * 100%)");
@@ -10722,243 +11423,15 @@ var Table = {
     ScrollArea: ScrollArea,
 };
 
-var Underline = function (props) {
-    var recipe = react$1.useSlotRecipe({ key: 'markedText' });
-    var recipeProps = recipe.splitVariantProps(props)[0];
-    var styles = recipe(recipeProps);
-    return (React.createElement(react$1.chakra.svg, { css: styles.mark, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 150 11", fill: "none", preserveAspectRatio: "none" },
-        React.createElement(react$1.chakra.path, { fill: "brand.primary", d: "M147.274 5.414c-.221.13-.294.258-.218.427.151.21-.07.447-.291.661-.146.214-.516.43-.737.624-.222.151-.443.324-.665.496.523.185.374.166-.664.517.224.061.374.144.598.227-.892.073-1.71.146-2.678.157-2.381.026-4.762.116-7.144.184l-17.934.389c-2.158.045-4.243.025-6.401.049-.893.01-1.861 0-2.754.03-.446.005-.967.053-1.413.058a275.9 275.9 0 0 1-4.169.025c-.148.002-.372-.017-.521.006-2.306.089-4.689.009-6.996.055-1.116.034-2.232.046-3.349.058l-3.796.042c-3.2.035-6.4.07-9.6.085-2.83.01-5.658-.002-8.486.008-1.861 0-3.796.02-5.731.042-.968.01-1.936 0-2.903.01-.819.01-1.563.039-2.382.048-.595.007-1.191-.05-1.861-.043-.893.01-1.786.062-2.753.072l-9.974.046-11.462.127c-1.116.012-2.158.066-3.274.078-.447.005-.968-.032-1.415-.027-1.563.017-3.05.055-4.614.072-.297.003-.595.007-.743.115 0 .042-.371.046-.595.07l-9.6.169c-1.265.014-2.456.048-3.72.083-.67.029-1.265.1-1.935.107-1.34-.007-2.68-.013-4.02-.041a5.054 5.054 0 0 1-1.193-.2c-.821-.224-1.42-.493-1.498-.832-.077-.275-.23-.57-.307-.846-.001-.127.072-.256.145-.384.073-.086.072-.17.146-.256.144-.384.066-.787.36-1.172.145-.278.29-.555.139-.83 0-.063.222-.13.295-.215.294-.343.514-.707.807-1.05.147-.192.517-.409.366-.577-.226-.295.515-.579.065-.85-.15-.083.072-.213.22-.32 0-.043.222-.11.148-.109-.448-.122-.003-.255.145-.341.296-.173-.004-.361.664-.538a6.1 6.1 0 0 1 1.56-.208c1.638-.04 3.35-.08 4.987-.098 2.753-.051 5.433-.102 8.186-.132 3.052-.055 6.177-.09 9.229-.144l6.251-.07 7.964-.087a219.85 219.85 0 0 1 3.722-.02c1.563-.017 3.051-.033 4.614-.029 2.308-.025 4.54-.029 6.848-.033l6.997-.013c2.158-.003 4.242-.025 6.401-.007 2.903.01 5.806.021 8.71.01 2.009 0 4.018-.065 6.028-.066 2.158-.002 4.392.016 6.55-.008 2.53-.028 5.06-.077 7.666-.106 4.167-.045 8.336-.07 12.429-.115 2.977-.033 5.954-.087 9.005-.142l10.568-.18c3.051-.054 6.028-.15 9.004-.226 2.381-.069 4.837-.117 7.293-.165.521-.006.968.053 1.49.09-.221.257-.145.426.229.55-.594.112-.37.216.003.275-.222.13-.444.239-.517.346-.148.129-.072.255.598.248-.371.068-.669.113-1.115.182.075.042.15.083.225.104.596.078.972.392.527.546-.148.065-.595.07-.892.095v.063c.671.078.524.27.601.418.001.17-.146.3-.517.452-.148.065.003.191-.071.298.001.064.076.148.002.191-.666.283-.588.601-.659.92.001.085-.073.15-.147.214-.074.065-.593.198-.071.34Z" })));
-};
-
-var Highlight = function (props) {
-    var recipe = react$1.useSlotRecipe({ key: 'markedText' });
-    var recipeProps = recipe.splitVariantProps(props)[0];
-    var styles = recipe(recipeProps);
-    return (React.createElement(react$1.chakra.svg, { css: styles.mark, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 155 24", fill: "none", preserveAspectRatio: "none" },
-        React.createElement(react$1.chakra.path, { fill: props.highlightColor, d: "M152.76 13.91c-.231.328-.309.657-.231 1.095.154.547-.078 1.15-.309 1.697-.155.548-.541 1.096-.773 1.588-.231.384-.463.822-.695 1.26.541.493.387.438-.695 1.314.232.165.386.384.618.603-.927.164-1.776.328-2.78.328-2.471 0-4.943.164-7.414.274l-18.613.493c-2.239.055-4.402-.055-6.641-.055-.927 0-1.931-.055-2.858 0-.463 0-1.004.11-1.467.11-1.468 0-2.858 0-4.325-.055-.154 0-.386-.055-.541 0-2.394.164-4.865-.11-7.26-.055-1.158.055-2.316.055-3.475.055h-3.938c-3.321 0-6.642 0-9.963-.055-2.935-.055-5.87-.164-8.804-.219-1.93-.055-3.939-.055-5.947-.055-1.004 0-2.008-.054-3.012-.054-.85 0-1.622.054-2.471.054-.618 0-1.236-.164-1.93-.164-.928 0-1.854.11-2.858.11l-10.35-.165H34.137c-1.159 0-2.24.11-3.399.11-.463 0-1.004-.11-1.467-.11-1.622 0-3.166.055-4.788.055-.31 0-.618 0-.773.274 0 .11-.386.11-.617.164l-9.963.164c-1.313 0-2.548.055-3.861.11-.696.055-1.313.219-2.008.219-1.39-.055-2.78-.11-4.17-.219-.464-.055-.85-.274-1.236-.548-.85-.602-1.468-1.314-1.545-2.19-.077-.712-.232-1.479-.309-2.19 0-.33.077-.658.154-.986.078-.22.078-.438.155-.658.154-.985.077-2.026.386-3.011.155-.712.309-1.424.155-2.136 0-.164.231-.329.308-.548.31-.876.541-1.807.85-2.683.154-.493.54-1.04.386-1.479-.232-.766.54-1.478.077-2.19-.154-.22.078-.548.232-.822 0-.109.232-.273.155-.273-.464-.329 0-.657.154-.877.309-.438 0-.93.695-1.369C4.247.493 4.711.33 5.329.33c1.699-.055 3.475-.11 5.174-.11C13.361.164 16.141.109 19 .109 22.165.056 25.409.056 28.575 0h14.751c1.313 0 2.548 0 3.861.055 1.622 0 3.167 0 4.789.055 2.394 0 4.71.054 7.105.109l7.26.164c2.239.055 4.401.055 6.641.165 3.012.11 6.024.219 9.036.273 2.085.055 4.17-.054 6.255 0 2.24.055 4.557.165 6.797.165 2.626 0 5.251-.055 7.954-.055 4.325 0 8.65.055 12.898.055 3.089 0 6.178-.055 9.345-.11l10.966-.164c3.167-.055 6.256-.22 9.345-.329 2.471-.11 5.02-.164 7.568-.219.541 0 1.004.165 1.545.274-.232.657-.154 1.095.232 1.424-.618.274-.386.548 0 .712-.232.328-.464.602-.541.876-.154.329-.077.657.618.657-.386.164-.695.274-1.158.438.077.11.154.22.231.274.618.22 1.004 1.04.541 1.424-.155.164-.618.164-.927.219v.164c.695.22.541.712.618 1.095 0 .439-.155.767-.541 1.15-.154.165 0 .493-.077.767 0 .164.077.383 0 .493-.695.712-.618 1.533-.695 2.355 0 .219-.077.383-.154.547-.078.165-.618.493-.078.877" })));
-};
-
-var MarkedTextMark = function (props) {
-    if (props.variant === 'highlight') {
-        return React.createElement(Highlight, __assign({}, props));
-    }
-    if (props.variant === 'underline') {
-        return React.createElement(Underline, __assign({}, props));
-    }
-    return null;
-};
-
-var MarkedText = function (_a) {
-    var children = _a.children, props = __rest(_a, ["children"]);
-    var recipe = react$1.useSlotRecipe({ key: 'markedText' });
-    var _b = recipe.splitVariantProps(props), recipeProps = _b[0], boxProps = _b[1];
-    var styles = recipe(recipeProps);
-    var variant = props.variant, highlightColor = props.highlightColor;
-    return (React.createElement(react$1.Box, __assign({ css: styles.container }, boxProps),
-        React.createElement(MarkedTextMark, { variant: variant, highlightColor: highlightColor }),
-        React.createElement(react$1.Box, { css: styles.text }, children)));
-};
-
-var _a$1;
-var themes = (_a$1 = {},
-    _a$1[Brand.AutoScout24] = autoScout24System,
-    _a$1[Brand.MotoScout24] = motoScout24System,
-    _a$1);
-var ThemeProvider = function (_a) {
-    var children = _a.children, theme = _a.theme;
-    return React.createElement(react$1.ChakraProvider, { value: themes[theme] }, children);
-};
-
-var TopListingBadge = function (_a) {
-    var children = _a.children, aspectRatio = _a.aspectRatio;
-    return (React.createElement(react$1.Grid, null,
-        React.createElement(react$1.GridItem, { gridColumn: 1, gridRow: 1 }, aspectRatio ? (React.createElement(react$1.AspectRatio, { ratio: aspectRatio }, children)) : (children)),
-        React.createElement(react$1.GridItem, { gridColumn: 1, gridRow: 1, zIndex: "docked", overflow: "hidden", position: "relative", pointerEvents: "none", css: { touchAction: 'none' } },
-            React.createElement(react$1.Badge, { transform: "rotate(-45deg) translate(-50%) translateY(9px)", position: "absolute", transformOrigin: "top left", width: "4xl", textAlign: "center", paddingLeft: "sm", color: "gray.900" }, "Top"))));
-};
-
-var InputLeftElement = function (_a) {
-    var unit = _a.unit;
-    return (React.createElement(react$1.InputElement, { insetY: "0", px: "sm", textStyle: "body-small", pointerEvents: "none" }, unit));
-};
-
-var parseToNumberOrUndef = function (raw) {
-    if (raw.trim() === '')
-        return undefined;
-    var n = Number(raw);
-    return Number.isNaN(n) ? undefined : n;
-};
-var InputGroup = function (_a) {
-    var _b;
-    var handleChange = _a.handleChange, inputProps = _a.inputProps, onBlur = _a.onBlur, unit = _a.unit, rest = __rest(_a, ["handleChange", "inputProps", "onBlur", "unit"]);
-    var recipe = react$1.useSlotRecipe({ key: 'numberInput' });
-    var _c = recipe.splitVariantProps(rest), recipeProps = _c[0], restProps = _c[1];
-    var styles = recipe(recipeProps);
-    /**
-     * Local string state that represents exactly what the user typed.
-     *
-     * Why string:
-     * - Allows intermediate values ("1" → "10" → "100")
-     * - Prevents cursor jumps and unstable behavior
-     * - Most stable approach with Chakra v3 NumberInput
-     */
-    var _d = React.useState(inputProps.value != null ? String(inputProps.value) : ''), raw = _d[0], setRaw = _d[1];
-    /**
-     * Sync external value changes (e.g. slider moved) back into the input.
-     * Without this, the input would display stale values.
-     */
-    React.useEffect(function () {
-        setRaw(inputProps.value != null ? String(inputProps.value) : '');
-    }, [inputProps.value]);
-    /**
-     * Debounced emit PER INPUT (important!)
-     *
-     * Why per-input debounce:
-     * - Shared debounce caused race conditions between FROM / TO inputs
-     * - Each input must control its own timing
-     *
-     */
-    var debouncedEmit = useDebounce.useDebouncedCallback(function (nextRaw) {
-        handleChange({
-            name: inputProps.name,
-            value: parseToNumberOrUndef(nextRaw),
-        });
-    }, 1000);
-    return (React.createElement(react$1.NumberInput.Root, __assign({ css: styles.root, width: "full", 
-        // Update local string immediately
-        value: raw, onValueChange: function (_a) {
-            var value = _a.value;
-            setRaw(value);
-            debouncedEmit(value);
-        }, 
-        /**
-         * On blur we emit immediately as a safety net,
-         * ensuring the final value is always propagated.
-         */
-        onBlur: function () {
-            onBlur === null || onBlur === void 0 ? void 0 : onBlur({
-                name: inputProps.name,
-                value: parseToNumberOrUndef(raw),
-            });
-        } }, restProps),
-        unit ? React.createElement(InputLeftElement, { unit: unit }) : null,
-        React.createElement(react$1.NumberInput.Input, { css: styles.input, placeholder: (_b = inputProps.placeholder) !== null && _b !== void 0 ? _b : '', "aria-label": inputProps.ariaLabel, fontSize: "base" })));
-};
-
-var RangeFilterInput = function (_a) {
-    var from = _a.from, to = _a.to, handleChange = _a.handleChange, unit = _a.unit, onBlur = _a.onBlur, rest = __rest(_a, ["from", "to", "handleChange", "unit", "onBlur"]);
-    return (React.createElement(react$1.Flex, null,
-        React.createElement(InputGroup, __assign({ inputProps: from, variant: "inputLeft", handleChange: handleChange, onBlur: onBlur, unit: unit }, rest)),
-        React.createElement(InputGroup, __assign({ inputProps: to, variant: "inputRight", handleChange: handleChange, onBlur: onBlur, unit: unit }, rest))));
-};
-
-var _a;
-var badgeText = (_a = {},
-    _a[Brand.AutoScout24] = 'TopCar',
-    _a[Brand.MotoScout24] = 'TopMoto',
-    _a);
-var TopVehicleSharedBadge = function (_a) {
-    var children = _a.children, aspectRatio = _a.aspectRatio, brand = _a.brand;
-    return (React.createElement(react$1.Box, null,
-        React.createElement(react$1.Box, { w: "full", textAlign: "center", textStyle: "heading4", p: "xs", color: "gray.900" }, badgeText[brand]),
-        aspectRatio ? (React.createElement(AspectRatio, { ratio: aspectRatio }, children)) : (children)));
-};
-
-var emptyItemOffset = 0;
-var firstItemOffset = 1;
-var getItemOffset = function (applyIndentation) {
-    return applyIndentation ? firstItemOffset : emptyItemOffset;
-};
-var getSliderStepValue = function (marks, applyIndentation, value) {
-    var selectedMarkIndex = marks.findIndex(function (mark) { return mark.value === value; });
-    if (selectedMarkIndex < emptyItemOffset) {
-        return getItemOffset(applyIndentation);
-    }
-    return selectedMarkIndex + getItemOffset(applyIndentation);
-};
-var getSliderMarks = function (marks, applyIndentation) {
-    return marks.map(function (mark, index) { return (__assign(__assign({}, mark), { stepValue: index + getItemOffset(applyIndentation) })); });
-};
-var DiscreteSlider = function (_a) {
-    var marks = _a.marks, _b = _a.applyIndentation, applyIndentation = _b === void 0 ? true : _b, onValueChanged = _a.onValueChanged, value = _a.value;
-    var sliderStepValue = getSliderStepValue(marks, applyIndentation, value);
-    var sliderMarks = getSliderMarks(marks, applyIndentation);
-    var handleOnChange = function (newStepValue) {
-        var _a;
-        if (applyIndentation && newStepValue < firstItemOffset)
-            return;
-        var newSliderMark = (_a = sliderMarks.find(function (mark) { return mark.stepValue === newStepValue; })) === null || _a === void 0 ? void 0 : _a.value;
-        onValueChanged(newSliderMark);
-    };
-    return (React.createElement(react$1.Slider.Root, { step: 1, max: sliderMarks.length - 1 + getItemOffset(applyIndentation), value: [sliderStepValue], onValueChange: function (details) { var _a; return handleOnChange((_a = details.value[0]) !== null && _a !== void 0 ? _a : sliderStepValue); } },
-        React.createElement(react$1.Slider.Control, null,
-            React.createElement(react$1.Slider.Track, null,
-                React.createElement(react$1.Slider.Range, null)),
-            React.createElement(react$1.Slider.Thumbs, null),
-            React.createElement(react$1.Slider.MarkerGroup, null, sliderMarks.map(function (_a, index) {
-                var stepValue = _a.stepValue, label = _a.label;
-                return (React.createElement(react$1.Slider.Marker, { key: index, value: stepValue, style: {
-                        pointerEvents: 'all',
-                        fontWeight: sliderStepValue === stepValue ? 'bold' : 'normal',
-                    } }, label));
-            })))));
-};
-
-var Tooltip = function (_a) {
-    var children = _a.children, _b = _a.placement, placement = _b === void 0 ? 'bottom' : _b, _c = _a.maxWidth, maxWidth = _c === void 0 ? '6xl' : _c, label = _a.label;
-    var _d = React.useState(false), isOpen = _d[0], setIsOpen = _d[1];
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    var childrenWithProps = React.cloneElement(children, {
-        onMouseEnter: function () { return setIsOpen(true); },
-        onMouseLeave: function () { return setIsOpen(false); },
-        onClick: function () { return setIsOpen(true); },
-    });
-    return (React.createElement(react$1.TooltipRoot, { positioning: {
-            placement: placement,
-        }, open: isOpen },
-        React.createElement(react$1.TooltipTrigger, { asChild: true }, childrenWithProps),
-        React.createElement(react$1.TooltipPositioner, null,
-            React.createElement(react$1.TooltipContent, { maxWidth: maxWidth },
-                React.createElement(react$1.TooltipArrow, null,
-                    React.createElement(react$1.TooltipArrowTip, null)),
-                label))));
-};
-
-var FormControlSection = function (_a) {
-    var children = _a.children, errorMessage = _a.errorMessage, id = _a.id, label = _a.label, hint = _a.hint, tooltip = _a.tooltip;
-    var isInvalid = !!errorMessage;
-    return (React.createElement(react$1.Field.Root, { id: id, invalid: isInvalid },
-        React.createElement(react$1.Box, { border: "1px", borderRadius: "sm", borderColor: isInvalid ? 'red.500' : 'gray.400', padding: "2xl" },
-            React.createElement(Flex, { flexDirection: "column" },
-                React.createElement(react$1.Box, { mb: "lg" },
-                    React.createElement(Flex, { alignItems: "center" },
-                        label ? (React.createElement(Text, { color: "gray.900", textStyle: "heading4" }, label)) : null,
-                        tooltip ? (React.createElement(Tooltip, { label: tooltip },
-                            React.createElement(InformationIcon, { ml: "md" }))) : null),
-                    hint ? (React.createElement(Text, { color: "gray.900", textStyle: "body" }, hint)) : null),
-                children)),
-        React.createElement(react$1.Field.ErrorText, null, errorMessage)));
-};
-
-var RangeSlider = function (_a) {
-    var _b = _a.min, min = _b === void 0 ? 0 : _b, _c = _a.max, max = _c === void 0 ? 10 : _c, onChange = _a.onChange, onChangeEnd = _a.onChangeEnd, rest = __rest(_a, ["min", "max", "onChange", "onChangeEnd"]);
-    return (React.createElement(react$1.Slider.Root, __assign({ defaultValue: [min, max], min: min, max: max, onValueChange: function (details) { return onChange === null || onChange === void 0 ? void 0 : onChange(details.value); }, onValueChangeEnd: function (details) { return onChangeEnd === null || onChangeEnd === void 0 ? void 0 : onChangeEnd(details.value); } }, rest),
-        React.createElement(react$1.Slider.Control, null,
-            React.createElement(react$1.Slider.Track, null,
-                React.createElement(react$1.Slider.Range, null)),
-            React.createElement(react$1.Slider.Thumb, { index: 0, "aria-label": "Min", width: { base: 'md', sm: 'sm' }, height: { base: 'md', sm: 'sm' } }),
-            React.createElement(react$1.Slider.Thumb, { index: 1, "aria-label": "Max", width: { base: 'md', sm: 'sm' }, height: { base: 'md', sm: 'sm' } }))));
-};
-
-var TenantSelectionModalLayout = function (_a) {
-    var children = _a.children;
-    return (React.createElement(react$1.Box, { height: { base: 'full', sm: 'auth0-height' }, maxH: "screen-height", overflowX: "hidden", overflowY: "auto", paddingX: "2xl", paddingY: { base: '3xl', sm: '2xl' }, color: "gray.900" },
-        React.createElement(Flex, { direction: "column", alignItems: "center", gridGap: "md", minHeight: "full" }, children)));
+var TenantSelectionModalLayout = function (_a) {
+    var children = _a.children;
+    return (React.createElement(react$1.Box, { height: { base: 'full', sm: 'auth0-height' }, maxH: "screen-height", overflowX: "hidden", overflowY: "auto", paddingX: "2xl", paddingY: { base: '3xl', sm: '2xl' }, color: "gray.900" },
+        React.createElement(Flex, { direction: "column", alignItems: "center", gridGap: "md", minHeight: "full" }, children)));
 };
 
 var TenantSelectionSelect = function (_a) {
     var tenantSelection = _a.tenantSelection, setTenantSelection = _a.setTenantSelection, user = _a.user;
-    var t = i18nPkg.useI18n().t;
+    var t = useI18n().t;
     var onTenantSelect = React.useCallback(function (selectedTenantId) {
         setTenantSelection(function (current) {
             return __assign(__assign({}, current), { selectedTenant: selectedTenantId, showSelection: false });
@@ -10972,7 +11445,7 @@ var img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEBCAMAAACg8IvxAAA
 
 var TenantSelectionOverview = function (_a) {
     var tenantSelection = _a.tenantSelection, setTenantSelection = _a.setTenantSelection, user = _a.user, selectTenant = _a.selectTenant;
-    var t = i18nPkg.useI18n().t;
+    var t = useI18n().t;
     var getSelectButtonLabel = function () {
         if (!tenantSelection.selectedTenant)
             return t('auth.tenantSelection.selectButton');
@@ -11030,6 +11503,73 @@ var TenantSelection = function (_a) {
         React.createElement(TenantSelectionOverview, { user: user, tenantSelection: tenantSelection, setTenantSelection: setTenantSelection, selectTenant: selectTenant })));
 };
 
+var Underline = function (props) {
+    var recipe = react$1.useSlotRecipe({ key: 'markedText' });
+    var recipeProps = recipe.splitVariantProps(props)[0];
+    var styles = recipe(recipeProps);
+    return (React.createElement(react$1.chakra.svg, { css: styles.mark, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 150 11", fill: "none", preserveAspectRatio: "none" },
+        React.createElement(react$1.chakra.path, { fill: "brand.primary", d: "M147.274 5.414c-.221.13-.294.258-.218.427.151.21-.07.447-.291.661-.146.214-.516.43-.737.624-.222.151-.443.324-.665.496.523.185.374.166-.664.517.224.061.374.144.598.227-.892.073-1.71.146-2.678.157-2.381.026-4.762.116-7.144.184l-17.934.389c-2.158.045-4.243.025-6.401.049-.893.01-1.861 0-2.754.03-.446.005-.967.053-1.413.058a275.9 275.9 0 0 1-4.169.025c-.148.002-.372-.017-.521.006-2.306.089-4.689.009-6.996.055-1.116.034-2.232.046-3.349.058l-3.796.042c-3.2.035-6.4.07-9.6.085-2.83.01-5.658-.002-8.486.008-1.861 0-3.796.02-5.731.042-.968.01-1.936 0-2.903.01-.819.01-1.563.039-2.382.048-.595.007-1.191-.05-1.861-.043-.893.01-1.786.062-2.753.072l-9.974.046-11.462.127c-1.116.012-2.158.066-3.274.078-.447.005-.968-.032-1.415-.027-1.563.017-3.05.055-4.614.072-.297.003-.595.007-.743.115 0 .042-.371.046-.595.07l-9.6.169c-1.265.014-2.456.048-3.72.083-.67.029-1.265.1-1.935.107-1.34-.007-2.68-.013-4.02-.041a5.054 5.054 0 0 1-1.193-.2c-.821-.224-1.42-.493-1.498-.832-.077-.275-.23-.57-.307-.846-.001-.127.072-.256.145-.384.073-.086.072-.17.146-.256.144-.384.066-.787.36-1.172.145-.278.29-.555.139-.83 0-.063.222-.13.295-.215.294-.343.514-.707.807-1.05.147-.192.517-.409.366-.577-.226-.295.515-.579.065-.85-.15-.083.072-.213.22-.32 0-.043.222-.11.148-.109-.448-.122-.003-.255.145-.341.296-.173-.004-.361.664-.538a6.1 6.1 0 0 1 1.56-.208c1.638-.04 3.35-.08 4.987-.098 2.753-.051 5.433-.102 8.186-.132 3.052-.055 6.177-.09 9.229-.144l6.251-.07 7.964-.087a219.85 219.85 0 0 1 3.722-.02c1.563-.017 3.051-.033 4.614-.029 2.308-.025 4.54-.029 6.848-.033l6.997-.013c2.158-.003 4.242-.025 6.401-.007 2.903.01 5.806.021 8.71.01 2.009 0 4.018-.065 6.028-.066 2.158-.002 4.392.016 6.55-.008 2.53-.028 5.06-.077 7.666-.106 4.167-.045 8.336-.07 12.429-.115 2.977-.033 5.954-.087 9.005-.142l10.568-.18c3.051-.054 6.028-.15 9.004-.226 2.381-.069 4.837-.117 7.293-.165.521-.006.968.053 1.49.09-.221.257-.145.426.229.55-.594.112-.37.216.003.275-.222.13-.444.239-.517.346-.148.129-.072.255.598.248-.371.068-.669.113-1.115.182.075.042.15.083.225.104.596.078.972.392.527.546-.148.065-.595.07-.892.095v.063c.671.078.524.27.601.418.001.17-.146.3-.517.452-.148.065.003.191-.071.298.001.064.076.148.002.191-.666.283-.588.601-.659.92.001.085-.073.15-.147.214-.074.065-.593.198-.071.34Z" })));
+};
+
+var Highlight = function (props) {
+    var recipe = react$1.useSlotRecipe({ key: 'markedText' });
+    var recipeProps = recipe.splitVariantProps(props)[0];
+    var styles = recipe(recipeProps);
+    return (React.createElement(react$1.chakra.svg, { css: styles.mark, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 155 24", fill: "none", preserveAspectRatio: "none" },
+        React.createElement(react$1.chakra.path, { fill: props.highlightColor, d: "M152.76 13.91c-.231.328-.309.657-.231 1.095.154.547-.078 1.15-.309 1.697-.155.548-.541 1.096-.773 1.588-.231.384-.463.822-.695 1.26.541.493.387.438-.695 1.314.232.165.386.384.618.603-.927.164-1.776.328-2.78.328-2.471 0-4.943.164-7.414.274l-18.613.493c-2.239.055-4.402-.055-6.641-.055-.927 0-1.931-.055-2.858 0-.463 0-1.004.11-1.467.11-1.468 0-2.858 0-4.325-.055-.154 0-.386-.055-.541 0-2.394.164-4.865-.11-7.26-.055-1.158.055-2.316.055-3.475.055h-3.938c-3.321 0-6.642 0-9.963-.055-2.935-.055-5.87-.164-8.804-.219-1.93-.055-3.939-.055-5.947-.055-1.004 0-2.008-.054-3.012-.054-.85 0-1.622.054-2.471.054-.618 0-1.236-.164-1.93-.164-.928 0-1.854.11-2.858.11l-10.35-.165H34.137c-1.159 0-2.24.11-3.399.11-.463 0-1.004-.11-1.467-.11-1.622 0-3.166.055-4.788.055-.31 0-.618 0-.773.274 0 .11-.386.11-.617.164l-9.963.164c-1.313 0-2.548.055-3.861.11-.696.055-1.313.219-2.008.219-1.39-.055-2.78-.11-4.17-.219-.464-.055-.85-.274-1.236-.548-.85-.602-1.468-1.314-1.545-2.19-.077-.712-.232-1.479-.309-2.19 0-.33.077-.658.154-.986.078-.22.078-.438.155-.658.154-.985.077-2.026.386-3.011.155-.712.309-1.424.155-2.136 0-.164.231-.329.308-.548.31-.876.541-1.807.85-2.683.154-.493.54-1.04.386-1.479-.232-.766.54-1.478.077-2.19-.154-.22.078-.548.232-.822 0-.109.232-.273.155-.273-.464-.329 0-.657.154-.877.309-.438 0-.93.695-1.369C4.247.493 4.711.33 5.329.33c1.699-.055 3.475-.11 5.174-.11C13.361.164 16.141.109 19 .109 22.165.056 25.409.056 28.575 0h14.751c1.313 0 2.548 0 3.861.055 1.622 0 3.167 0 4.789.055 2.394 0 4.71.054 7.105.109l7.26.164c2.239.055 4.401.055 6.641.165 3.012.11 6.024.219 9.036.273 2.085.055 4.17-.054 6.255 0 2.24.055 4.557.165 6.797.165 2.626 0 5.251-.055 7.954-.055 4.325 0 8.65.055 12.898.055 3.089 0 6.178-.055 9.345-.11l10.966-.164c3.167-.055 6.256-.22 9.345-.329 2.471-.11 5.02-.164 7.568-.219.541 0 1.004.165 1.545.274-.232.657-.154 1.095.232 1.424-.618.274-.386.548 0 .712-.232.328-.464.602-.541.876-.154.329-.077.657.618.657-.386.164-.695.274-1.158.438.077.11.154.22.231.274.618.22 1.004 1.04.541 1.424-.155.164-.618.164-.927.219v.164c.695.22.541.712.618 1.095 0 .439-.155.767-.541 1.15-.154.165 0 .493-.077.767 0 .164.077.383 0 .493-.695.712-.618 1.533-.695 2.355 0 .219-.077.383-.154.547-.078.165-.618.493-.078.877" })));
+};
+
+var MarkedTextMark = function (props) {
+    if (props.variant === 'highlight') {
+        return React.createElement(Highlight, __assign({}, props));
+    }
+    if (props.variant === 'underline') {
+        return React.createElement(Underline, __assign({}, props));
+    }
+    return null;
+};
+
+var MarkedText = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    var recipe = react$1.useSlotRecipe({ key: 'markedText' });
+    var _b = recipe.splitVariantProps(props), recipeProps = _b[0], boxProps = _b[1];
+    var styles = recipe(recipeProps);
+    var variant = props.variant, highlightColor = props.highlightColor;
+    return (React.createElement(react$1.Box, __assign({ css: styles.container }, boxProps),
+        React.createElement(MarkedTextMark, { variant: variant, highlightColor: highlightColor }),
+        React.createElement(react$1.Box, { css: styles.text }, children)));
+};
+
+var _a$1;
+var themes = (_a$1 = {},
+    _a$1[Brand.AutoScout24] = autoScout24System,
+    _a$1[Brand.MotoScout24] = motoScout24System,
+    _a$1);
+var ThemeProvider = function (_a) {
+    var children = _a.children, theme = _a.theme;
+    return React.createElement(react$1.ChakraProvider, { value: themes[theme] }, children);
+};
+
+var TopListingBadge = function (_a) {
+    var children = _a.children, aspectRatio = _a.aspectRatio;
+    return (React.createElement(react$1.Grid, null,
+        React.createElement(react$1.GridItem, { gridColumn: 1, gridRow: 1 }, aspectRatio ? (React.createElement(react$1.AspectRatio, { ratio: aspectRatio }, children)) : (children)),
+        React.createElement(react$1.GridItem, { gridColumn: 1, gridRow: 1, zIndex: "docked", overflow: "hidden", position: "relative", pointerEvents: "none", css: { touchAction: 'none' } },
+            React.createElement(react$1.Badge, { transform: "rotate(-45deg) translate(-50%) translateY(9px)", position: "absolute", transformOrigin: "top left", width: "4xl", textAlign: "center", paddingLeft: "sm", color: "gray.900" }, "Top"))));
+};
+
+var _a;
+var badgeText = (_a = {},
+    _a[Brand.AutoScout24] = 'TopCar',
+    _a[Brand.MotoScout24] = 'TopMoto',
+    _a);
+var TopVehicleSharedBadge = function (_a) {
+    var children = _a.children, aspectRatio = _a.aspectRatio, brand = _a.brand;
+    return (React.createElement(react$1.Box, null,
+        React.createElement(react$1.Box, { w: "full", textAlign: "center", textStyle: "heading4", p: "xs", color: "gray.900" }, badgeText[brand]),
+        aspectRatio ? (React.createElement(AspectRatio, { ratio: aspectRatio }, children)) : (children)));
+};
+
 Object.defineProperty(exports, "Box", {
     enumerable: true,
     get: function () { return react$1.Box; }
@@ -11093,6 +11633,7 @@ exports.CardBody = Body$1;
 exports.CardFooter = Footer$2;
 exports.CardHeader = Header$1;
 exports.CardRoot = Root$2;
+exports.Carousel = Carousel;
 exports.CartIcon = CartIcon;
 exports.CategoryAIcon = CategoryAIcon;
 exports.CategoryAMinusIcon = CategoryAMinusIcon;
@@ -11118,7 +11659,9 @@ exports.ChevronUpSmallIcon = ChevronUpSmallIcon;
 exports.ChfCurrencyIcon = ChfCurrencyIcon;
 exports.Chip = Chip;
 exports.CloseIcon = CloseIcon;
+exports.Collapse = Collapse;
 exports.CollapseIcon = CollapseIcon;
+exports.ColorPicker = ColorPicker;
 exports.CompareIcon = CompareIcon;
 exports.ConsumptionIcon = ConsumptionIcon;
 exports.CopyIcon = CopyIcon;