@smg-automotive/components 25.11.0-dgajin-vsst-4352-migrate-carousel.2 → 25.11.0-feat-migrate-color-picker.1

package/dist/cjs/index.js

@@ -4,10 +4,10 @@ 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');
-var useEmblaCarousel = require('embla-carousel-react');
 
 var zIndex = react$1.defineTokens.zIndex({
     hide: { value: -1 },
@@ -2535,9 +2535,7 @@ var slots = [
     'paginationIconContainer',
     'dotsPaginationContainer',
     'dotsPaginationIndicator',
-    'dotsPaginationIndicatorActive',
     'numbersPaginationButton',
-    'numbersPaginationButtonActive',
 ];
 var baseContainer = react$1.defineStyle({
     height: 'full',
@@ -2608,10 +2606,14 @@ var numbersPaginationButton = react$1.defineStyle({
     _hover: {
         backgroundColor: 'gray.100',
     },
-});
-var numbersPaginationButtonActive = react$1.defineStyle(__assign(__assign({}, numbersPaginationButton), { color: 'white', backgroundColor: 'gray.900', _hover: {
+    '&[aria-current="true"]': {
+        color: 'white',
         backgroundColor: 'gray.900',
-    } }));
+        _hover: {
+            backgroundColor: 'gray.900',
+        },
+    },
+});
 var dotsPaginationIndicator = react$1.defineStyle({
     backgroundColor: 'transparent',
     touchAction: 'pan-x',
@@ -2639,23 +2641,28 @@ var dotsPaginationIndicator = react$1.defineStyle({
         height: 'var(--carousel-dot-size)',
         content: '""',
     },
-});
-var dotsPaginationIndicatorActive = react$1.defineStyle(__assign(__assign({}, dotsPaginationIndicator), { width: 'var(--carousel-dot-size-active)', height: 'var(--carousel-dot-size-active)', _last: {
+    '&[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: '""',
         },
-    }, _after: {
-        backgroundColor: 'white',
-        borderRadius: 'full',
-        opacity: '100',
-        width: 'full',
-        height: 'var(--carousel-dot-size-active)',
-        content: '""',
-    } }));
+    },
+});
 var fullScreenVariant = {
     container: react$1.defineStyle({
         backgroundColor: 'black',
@@ -2727,7 +2734,6 @@ var carouselRecipe = react$1.defineSlotRecipe({
         button: baseButton,
         icon: baseIcon,
         numbersPaginationButton: numbersPaginationButton,
-        numbersPaginationButtonActive: numbersPaginationButtonActive,
         dotsPaginationContainer: react$1.defineStyle({
             position: 'absolute',
             width: 'full',
@@ -2737,7 +2743,6 @@ var carouselRecipe = react$1.defineSlotRecipe({
             alignItems: 'center',
         }),
         dotsPaginationIndicator: dotsPaginationIndicator,
-        dotsPaginationIndicatorActive: dotsPaginationIndicatorActive,
     },
     variants: {
         variant: {
@@ -5942,143 +5947,441 @@ var Card = {
     Footer: Footer$2,
 };
 
-var Center = function (_a) {
-    var children = _a.children, padding = _a.padding;
-    return (React.createElement(react$1.Center, { padding: padding }, children));
+var Flex = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return (React.createElement(react$1.Flex, __assign({}, rest), children));
 };
 
-var Checkbox = React.forwardRef(function (_a, ref) {
-    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, _d = _a.indeterminate, indeterminate = _d === void 0 ? false : _d, _e = _a.readOnly, readOnly = _e === void 0 ? false : _e, _f = _a.fullWidth, fullWidth = _f === void 0 ? false : _f, label = _a.label, _g = _a.fontWeight, fontWeight = _g === void 0 ? 'regular' : _g, _h = _a.variant, variant = _h === void 0 ? 'alignCenter' : _h, onChange = _a.onChange, props = __rest(_a, ["disabled", "checked", "indeterminate", "readOnly", "fullWidth", "label", "fontWeight", "variant", "onChange"]);
-    var recipe = react$1.useSlotRecipe({ key: 'checkbox' });
-    var combinedProps = __assign(__assign({}, props), { variant: variant });
-    var recipeProps = recipe.splitVariantProps(combinedProps)[0];
-    var styles = recipe(recipeProps);
-    return (React.createElement(react$1.Checkbox.Root, __assign({}, props, { disabled: disabled, checked: indeterminate ? 'indeterminate' : checked, readOnly: readOnly, width: fullWidth ? 'full' : undefined, onCheckedChange: onChange, css: styles.root }),
-        React.createElement(react$1.Checkbox.HiddenInput, { ref: ref }),
-        React.createElement(react$1.Checkbox.Control, { css: styles.control }),
-        label && (React.createElement(react$1.Checkbox.Label, { css: __assign(__assign({}, styles.label), { fontWeight: fontWeight }) }, label))));
-});
-
-var Separator = react$1.Separator;
-Separator.displayName = 'Separator';
-
-var CheckboxGroup = function (_a) {
-    var name = _a.name, label = _a.label, value = _a.value, onChange = _a.onChange, checked = _a.checked, disabled = _a.disabled, invalid = _a.invalid, indeterminate = _a.indeterminate, addDividerAfterIndex = _a.addDividerAfterIndex, _b = _a.variant, variant = _b === void 0 ? 'alignCenter' : _b, checkboxes = _a.checkboxes;
-    return (React.createElement(Stack, { gap: "md" },
-        React.createElement(Checkbox, { name: name, label: label, value: value, onChange: onChange, checked: checked, disabled: disabled, invalid: invalid, indeterminate: indeterminate, variant: variant, fontWeight: "bold" }), checkboxes === null || checkboxes === void 0 ? void 0 :
-        checkboxes.map(function (item, index) { return (React.createElement(React.Fragment, { key: item.name },
-            React.createElement(react$1.Box, { ps: "md", asChild: true },
-                React.createElement(Checkbox, { name: item.name, label: item.label, value: item.value, onChange: item.onChange, checked: item.checked, variant: variant, disabled: disabled })),
-            (addDividerAfterIndex === null || addDividerAfterIndex === void 0 ? void 0 : addDividerAfterIndex.includes(index)) ? (React.createElement(Separator, { orientation: "horizontal" })) : null)); })));
+var icons = {
+    previous: React.createElement(ChevronLeftSmallIcon, null),
+    next: React.createElement(ChevronRightSmallIcon, null),
 };
-CheckboxGroup.displayName = 'CheckboxGroup';
-
-var Count = function (_a) {
-    var count = _a.count, ariaLabel = _a.ariaLabel, props = __rest(_a, ["count", "ariaLabel"]);
-    var recipe = react$1.useRecipe({ key: 'count' });
-    var recipeProps = recipe.splitVariantProps(props)[0];
-    var styles = recipe(recipeProps);
-    return (React.createElement(react$1.chakra.span, { css: styles, "aria-label": ariaLabel }, count));
+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 DatePicker = React.forwardRef(function (_a, ref) {
-    var min = _a.min, props = __rest(_a, ["min"]);
-    var recipe = react$1.useSlotRecipe({ key: 'input' });
-    var recipeProps = recipe.splitVariantProps(props)[0];
-    var styles = recipe(recipeProps);
-    return (React.createElement(react$1.Field.Root, { invalid: props.invalid },
-        React.createElement(react$1.Input, __assign({}, props, { css: __assign(__assign({}, styles.field), { display: 'block', textAlign: 'start' }), type: "date", min: min ? min.toISOString().split('T')[0] : undefined, ref: ref }))));
-});
-DatePicker.displayName = 'DatePicker';
-
-var Brand;
-(function (Brand) {
-    Brand["AutoScout24"] = "autoscout24";
-    Brand["MotoScout24"] = "motoscout24";
-})(Brand || (Brand = {}));
-
-var Switch = function (_a) {
-    _a.id; var disabled = _a.disabled, onCheckedChange = _a.onCheckedChange, checked = _a.checked, label = _a.label, props = __rest(_a, ["id", "disabled", "onCheckedChange", "checked", "label"]);
-    var recipe = react$1.useSlotRecipe({ key: 'switch' });
-    var recipeProps = recipe.splitVariantProps(props)[0];
-    var styles = recipe(recipeProps);
-    return (React.createElement(react$1.Switch.Root, { onCheckedChange: onCheckedChange, checked: checked, disabled: disabled, css: styles.root },
-        React.createElement(react$1.Switch.HiddenInput, null),
-        React.createElement(react$1.Switch.Control, { css: styles.control },
-            React.createElement(react$1.Switch.Thumb, { css: styles.thumb })),
-        label ? (React.createElement(react$1.Switch.Label, { css: styles.label }, label)) : null));
+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 DevOverlay = function (_a) {
-    var variables = _a.variables, hideDevOverlay = _a.hideDevOverlay, toggleTheme = _a.toggleTheme, toggleTranslation = _a.toggleTranslation, activeTheme = _a.activeTheme, _b = _a.displayTranslationKeys, displayTranslationKeys = _b === void 0 ? false : _b;
-    var isThemeSwitcherChecked = Brand.AutoScout24 !== activeTheme;
-    return (React.createElement(react$1.Box, { position: "absolute", right: "md", bottom: "md", borderRadius: "sm", padding: "md", backgroundColor: "gray.200", display: "inline-block", boxShadow: "md", as: "aside", css: { maxWidth: 'min(94%, 320px)' } },
-        React.createElement(react$1.Flex, null,
-            React.createElement(react$1.Heading, { as: "h3", textStyle: "heading3" }, "Dev Overlay\u00A0"),
-            React.createElement(react$1.Spacer, null),
-            React.createElement(Button, { onClick: hideDevOverlay, "data-testid": "close-dev-overlay" },
-                React.createElement(CloseIcon, null))),
-        React.createElement(react$1.Heading, { as: "h4", textStyle: "heading4" }, "Variables"),
-        !variables || variables.length === 0 ? null : (React.createElement(react$1.Table.Root, null,
-            React.createElement(react$1.Table.Body, null,
-                React.createElement(react$1.Table.Row, null,
-                    React.createElement(react$1.Table.ColumnHeader, { padding: "0" }, "Name"),
-                    React.createElement(react$1.Table.ColumnHeader, null, "Value"))),
-            React.createElement(react$1.Table.Body, null, variables.map(function (_a) {
-                var name = _a.name, value = _a.value;
-                return (React.createElement(react$1.Table.Row, { key: name, wordBreak: "break-all" },
-                    React.createElement(react$1.Table.Cell, { padding: "0" }, name),
-                    React.createElement(react$1.Table.Cell, null, value)));
-            })))),
-        React.createElement("br", null),
-        React.createElement(react$1.Heading, { as: "h4", textStyle: "heading4" }, "Switch Theme"),
-        React.createElement(Switch, { id: "theme-toggle", onCheckedChange: toggleTheme, checked: isThemeSwitcherChecked, label: isThemeSwitcherChecked ? React.createElement("span", null, "\uD83C\uDFCD\uFE0F") : React.createElement("span", null, "\uD83D\uDE97"), disabled: false }),
-        React.createElement(react$1.Heading, { as: "h4", textStyle: "heading4" }, "Switch Translation"),
-        React.createElement(Switch, { id: "translation-toggle", onCheckedChange: toggleTranslation, checked: displayTranslationKeys, label: displayTranslationKeys ? React.createElement("span", null, "\uD83D\uDD11") : React.createElement("span", null, "\uD83C\uDF10"), disabled: false })));
+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 H1 = function (_a) {
-    var _b = _a.textStyle, textStyle = _b === void 0 ? 'heading1' : _b, children = _a.children, rest = __rest(_a, ["textStyle", "children"]);
-    return (React.createElement(react$1.Heading, __assign({ as: "h1", textStyle: textStyle }, rest), children));
-};
-var H2 = function (_a) {
-    var _b = _a.textStyle, textStyle = _b === void 0 ? 'heading2' : _b, children = _a.children, rest = __rest(_a, ["textStyle", "children"]);
-    return (React.createElement(react$1.Heading, __assign({ as: "h2", textStyle: textStyle }, rest), children));
+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 H3 = function (_a) {
-    var _b = _a.textStyle, textStyle = _b === void 0 ? 'heading3' : _b, children = _a.children, rest = __rest(_a, ["textStyle", "children"]);
-    return (React.createElement(react$1.Heading, __assign({ as: "h3", textStyle: textStyle }, rest), 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 H4 = function (_a) {
-    var _b = _a.textStyle, textStyle = _b === void 0 ? 'heading4' : _b, children = _a.children, rest = __rest(_a, ["textStyle", "children"]);
-    return (React.createElement(react$1.Heading, __assign({ as: "h4", textStyle: textStyle }, rest), children));
+
+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 H5 = function (_a) {
-    var _b = _a.textStyle, textStyle = _b === void 0 ? 'heading5' : _b, children = _a.children, rest = __rest(_a, ["textStyle", "children"]);
-    return (React.createElement(react$1.Heading, __assign({ as: "h5", textStyle: textStyle }, rest), children));
+
+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 H6 = function (_a) {
-    var _b = _a.textStyle, textStyle = _b === void 0 ? 'heading6' : _b, children = _a.children, rest = __rest(_a, ["textStyle", "children"]);
-    return (React.createElement(react$1.Heading, __assign({ as: "h6", textStyle: textStyle }, rest), children));
+
+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 DialogCloseButton = React.forwardRef(function (props, ref) { return (React.createElement(react$1.CloseButton, __assign({ ref: ref, cursor: 'pointer' }, props))); });
+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 })); }))));
+};
 
-var Dialog = function (_a) {
-    var title = _a.title, open = _a.open, onOpenChange = _a.onOpenChange, primaryActionButton = _a.primaryActionButton, secondaryActionButton = _a.secondaryActionButton, children = _a.children, size = _a.size, _b = _a.motionPreset, motionPreset = _b === void 0 ? 'scale' : _b, variant = _a.variant, overlayColor = _a.overlayColor, _c = _a.disableBodyPadding, disableBodyPadding = _c === void 0 ? false : _c, props = __rest(_a, ["title", "open", "onOpenChange", "primaryActionButton", "secondaryActionButton", "children", "size", "motionPreset", "variant", "overlayColor", "disableBodyPadding"]);
-    var dialogSize = size || variant !== 'fullScreen' ? { xs: 'full', sm: size } : 'full';
-    var bothActionButtons = primaryActionButton && secondaryActionButton;
-    var recipe = react$1.useSlotRecipe({ key: 'dialog' });
-    var recipeProps = recipe.splitVariantProps({
-        size: dialogSize,
-        motionPreset: motionPreset,
-        variant: variant,
-        overlayColor: overlayColor,
-    })[0];
-    var styles = recipe(recipeProps);
-    return (React.createElement(react$1.Dialog.Root, __assign({ open: open, onOpenChange: onOpenChange }, props),
-        React.createElement(react$1.Portal, null,
-            React.createElement(react$1.Dialog.Backdrop, { css: styles.backdrop }),
+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, props = __rest(_a, ["width", "height", "padding", "backgroundColor"]);
+    var isInvalid = props.isInvalid, isDisabled = props.isDisabled, rest = __rest(props, ["isInvalid", "isDisabled"]);
+    return (React.createElement(react$1.Field.Root, { invalid: isInvalid },
+        React.createElement(react$1.Input, __assign({}, rest, { ref: ref, type: "color", width: width, height: height, padding: padding, backgroundColor: backgroundColor, cursor: "pointer", disabled: isDisabled, _invalid: { borderColor: 'red.500' } }))));
+});
+ColorPicker.displayName = 'ColorPicker';
+
+var Center = function (_a) {
+    var children = _a.children, padding = _a.padding;
+    return (React.createElement(react$1.Center, { padding: padding }, children));
+};
+
+var Checkbox = React.forwardRef(function (_a, ref) {
+    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, _d = _a.indeterminate, indeterminate = _d === void 0 ? false : _d, _e = _a.readOnly, readOnly = _e === void 0 ? false : _e, _f = _a.fullWidth, fullWidth = _f === void 0 ? false : _f, label = _a.label, _g = _a.fontWeight, fontWeight = _g === void 0 ? 'regular' : _g, _h = _a.variant, variant = _h === void 0 ? 'alignCenter' : _h, onChange = _a.onChange, props = __rest(_a, ["disabled", "checked", "indeterminate", "readOnly", "fullWidth", "label", "fontWeight", "variant", "onChange"]);
+    var recipe = react$1.useSlotRecipe({ key: 'checkbox' });
+    var combinedProps = __assign(__assign({}, props), { variant: variant });
+    var recipeProps = recipe.splitVariantProps(combinedProps)[0];
+    var styles = recipe(recipeProps);
+    return (React.createElement(react$1.Checkbox.Root, __assign({}, props, { disabled: disabled, checked: indeterminate ? 'indeterminate' : checked, readOnly: readOnly, width: fullWidth ? 'full' : undefined, onCheckedChange: onChange, css: styles.root }),
+        React.createElement(react$1.Checkbox.HiddenInput, { ref: ref }),
+        React.createElement(react$1.Checkbox.Control, { css: styles.control }),
+        label && (React.createElement(react$1.Checkbox.Label, { css: __assign(__assign({}, styles.label), { fontWeight: fontWeight }) }, label))));
+});
+
+var Separator = react$1.Separator;
+Separator.displayName = 'Separator';
+
+var CheckboxGroup = function (_a) {
+    var name = _a.name, label = _a.label, value = _a.value, onChange = _a.onChange, checked = _a.checked, disabled = _a.disabled, invalid = _a.invalid, indeterminate = _a.indeterminate, addDividerAfterIndex = _a.addDividerAfterIndex, _b = _a.variant, variant = _b === void 0 ? 'alignCenter' : _b, checkboxes = _a.checkboxes;
+    return (React.createElement(Stack, { gap: "md" },
+        React.createElement(Checkbox, { name: name, label: label, value: value, onChange: onChange, checked: checked, disabled: disabled, invalid: invalid, indeterminate: indeterminate, variant: variant, fontWeight: "bold" }), checkboxes === null || checkboxes === void 0 ? void 0 :
+        checkboxes.map(function (item, index) { return (React.createElement(React.Fragment, { key: item.name },
+            React.createElement(react$1.Box, { ps: "md", asChild: true },
+                React.createElement(Checkbox, { name: item.name, label: item.label, value: item.value, onChange: item.onChange, checked: item.checked, variant: variant, disabled: disabled })),
+            (addDividerAfterIndex === null || addDividerAfterIndex === void 0 ? void 0 : addDividerAfterIndex.includes(index)) ? (React.createElement(Separator, { orientation: "horizontal" })) : null)); })));
+};
+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' });
+    var recipeProps = recipe.splitVariantProps(props)[0];
+    var styles = recipe(recipeProps);
+    return (React.createElement(react$1.chakra.span, { css: styles, "aria-label": ariaLabel }, count));
+};
+
+var DatePicker = React.forwardRef(function (_a, ref) {
+    var min = _a.min, props = __rest(_a, ["min"]);
+    var recipe = react$1.useSlotRecipe({ key: 'input' });
+    var recipeProps = recipe.splitVariantProps(props)[0];
+    var styles = recipe(recipeProps);
+    return (React.createElement(react$1.Field.Root, { invalid: props.invalid },
+        React.createElement(react$1.Input, __assign({}, props, { css: __assign(__assign({}, styles.field), { display: 'block', textAlign: 'start' }), type: "date", min: min ? min.toISOString().split('T')[0] : undefined, ref: ref }))));
+});
+DatePicker.displayName = 'DatePicker';
+
+var Brand;
+(function (Brand) {
+    Brand["AutoScout24"] = "autoscout24";
+    Brand["MotoScout24"] = "motoscout24";
+})(Brand || (Brand = {}));
+
+var Switch = function (_a) {
+    _a.id; var disabled = _a.disabled, onCheckedChange = _a.onCheckedChange, checked = _a.checked, label = _a.label, props = __rest(_a, ["id", "disabled", "onCheckedChange", "checked", "label"]);
+    var recipe = react$1.useSlotRecipe({ key: 'switch' });
+    var recipeProps = recipe.splitVariantProps(props)[0];
+    var styles = recipe(recipeProps);
+    return (React.createElement(react$1.Switch.Root, { onCheckedChange: onCheckedChange, checked: checked, disabled: disabled, css: styles.root },
+        React.createElement(react$1.Switch.HiddenInput, null),
+        React.createElement(react$1.Switch.Control, { css: styles.control },
+            React.createElement(react$1.Switch.Thumb, { css: styles.thumb })),
+        label ? (React.createElement(react$1.Switch.Label, { css: styles.label }, label)) : null));
+};
+
+var DevOverlay = function (_a) {
+    var variables = _a.variables, hideDevOverlay = _a.hideDevOverlay, toggleTheme = _a.toggleTheme, toggleTranslation = _a.toggleTranslation, activeTheme = _a.activeTheme, _b = _a.displayTranslationKeys, displayTranslationKeys = _b === void 0 ? false : _b;
+    var isThemeSwitcherChecked = Brand.AutoScout24 !== activeTheme;
+    return (React.createElement(react$1.Box, { position: "absolute", right: "md", bottom: "md", borderRadius: "sm", padding: "md", backgroundColor: "gray.200", display: "inline-block", boxShadow: "md", as: "aside", css: { maxWidth: 'min(94%, 320px)' } },
+        React.createElement(react$1.Flex, null,
+            React.createElement(react$1.Heading, { as: "h3", textStyle: "heading3" }, "Dev Overlay\u00A0"),
+            React.createElement(react$1.Spacer, null),
+            React.createElement(Button, { onClick: hideDevOverlay, "data-testid": "close-dev-overlay" },
+                React.createElement(CloseIcon, null))),
+        React.createElement(react$1.Heading, { as: "h4", textStyle: "heading4" }, "Variables"),
+        !variables || variables.length === 0 ? null : (React.createElement(react$1.Table.Root, null,
+            React.createElement(react$1.Table.Body, null,
+                React.createElement(react$1.Table.Row, null,
+                    React.createElement(react$1.Table.ColumnHeader, { padding: "0" }, "Name"),
+                    React.createElement(react$1.Table.ColumnHeader, null, "Value"))),
+            React.createElement(react$1.Table.Body, null, variables.map(function (_a) {
+                var name = _a.name, value = _a.value;
+                return (React.createElement(react$1.Table.Row, { key: name, wordBreak: "break-all" },
+                    React.createElement(react$1.Table.Cell, { padding: "0" }, name),
+                    React.createElement(react$1.Table.Cell, null, value)));
+            })))),
+        React.createElement("br", null),
+        React.createElement(react$1.Heading, { as: "h4", textStyle: "heading4" }, "Switch Theme"),
+        React.createElement(Switch, { id: "theme-toggle", onCheckedChange: toggleTheme, checked: isThemeSwitcherChecked, label: isThemeSwitcherChecked ? React.createElement("span", null, "\uD83C\uDFCD\uFE0F") : React.createElement("span", null, "\uD83D\uDE97"), disabled: false }),
+        React.createElement(react$1.Heading, { as: "h4", textStyle: "heading4" }, "Switch Translation"),
+        React.createElement(Switch, { id: "translation-toggle", onCheckedChange: toggleTranslation, checked: displayTranslationKeys, label: displayTranslationKeys ? React.createElement("span", null, "\uD83D\uDD11") : React.createElement("span", null, "\uD83C\uDF10"), disabled: false })));
+};
+
+var H1 = function (_a) {
+    var _b = _a.textStyle, textStyle = _b === void 0 ? 'heading1' : _b, children = _a.children, rest = __rest(_a, ["textStyle", "children"]);
+    return (React.createElement(react$1.Heading, __assign({ as: "h1", textStyle: textStyle }, rest), children));
+};
+var H2 = function (_a) {
+    var _b = _a.textStyle, textStyle = _b === void 0 ? 'heading2' : _b, children = _a.children, rest = __rest(_a, ["textStyle", "children"]);
+    return (React.createElement(react$1.Heading, __assign({ as: "h2", textStyle: textStyle }, rest), children));
+};
+var H3 = function (_a) {
+    var _b = _a.textStyle, textStyle = _b === void 0 ? 'heading3' : _b, children = _a.children, rest = __rest(_a, ["textStyle", "children"]);
+    return (React.createElement(react$1.Heading, __assign({ as: "h3", textStyle: textStyle }, rest), children));
+};
+var H4 = function (_a) {
+    var _b = _a.textStyle, textStyle = _b === void 0 ? 'heading4' : _b, children = _a.children, rest = __rest(_a, ["textStyle", "children"]);
+    return (React.createElement(react$1.Heading, __assign({ as: "h4", textStyle: textStyle }, rest), children));
+};
+var H5 = function (_a) {
+    var _b = _a.textStyle, textStyle = _b === void 0 ? 'heading5' : _b, children = _a.children, rest = __rest(_a, ["textStyle", "children"]);
+    return (React.createElement(react$1.Heading, __assign({ as: "h5", textStyle: textStyle }, rest), children));
+};
+var H6 = function (_a) {
+    var _b = _a.textStyle, textStyle = _b === void 0 ? 'heading6' : _b, children = _a.children, rest = __rest(_a, ["textStyle", "children"]);
+    return (React.createElement(react$1.Heading, __assign({ as: "h6", textStyle: textStyle }, rest), children));
+};
+
+var DialogCloseButton = React.forwardRef(function (props, ref) { return (React.createElement(react$1.CloseButton, __assign({ ref: ref, cursor: 'pointer' }, props))); });
+
+var Dialog = function (_a) {
+    var title = _a.title, open = _a.open, onOpenChange = _a.onOpenChange, primaryActionButton = _a.primaryActionButton, secondaryActionButton = _a.secondaryActionButton, children = _a.children, size = _a.size, _b = _a.motionPreset, motionPreset = _b === void 0 ? 'scale' : _b, variant = _a.variant, overlayColor = _a.overlayColor, _c = _a.disableBodyPadding, disableBodyPadding = _c === void 0 ? false : _c, props = __rest(_a, ["title", "open", "onOpenChange", "primaryActionButton", "secondaryActionButton", "children", "size", "motionPreset", "variant", "overlayColor", "disableBodyPadding"]);
+    var dialogSize = size || variant !== 'fullScreen' ? { xs: 'full', sm: size } : 'full';
+    var bothActionButtons = primaryActionButton && secondaryActionButton;
+    var recipe = react$1.useSlotRecipe({ key: 'dialog' });
+    var recipeProps = recipe.splitVariantProps({
+        size: dialogSize,
+        motionPreset: motionPreset,
+        variant: variant,
+        overlayColor: overlayColor,
+    })[0];
+    var styles = recipe(recipeProps);
+    return (React.createElement(react$1.Dialog.Root, __assign({ open: open, onOpenChange: onOpenChange }, props),
+        React.createElement(react$1.Portal, null,
+            React.createElement(react$1.Dialog.Backdrop, { css: styles.backdrop }),
             React.createElement(react$1.Dialog.Positioner, { css: styles.positioner },
                 React.createElement(react$1.Dialog.Content, { css: styles.content },
                     title && (React.createElement(react$1.Box, { borderBottom: "1px", borderColor: "gray.100" },
@@ -6093,6 +6396,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));
 };
@@ -6120,11 +6463,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' });
@@ -6136,6 +6474,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.",
@@ -6997,13 +7338,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) {
@@ -7033,19 +7384,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;
@@ -7088,6 +7426,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;
 };
@@ -7149,39 +7500,76 @@ 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 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 ErrorPage = withTranslationProvider([
+    'errorPage',
+])(ErrorPageContent);
+
+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) {
@@ -7194,30 +7582,29 @@ var Link$1 = function (_a) {
     return (React.createElement(react$1.Link, __assign({ target: target || (isExternal ? '_blank' : undefined), rel: rel || (isExternal ? 'noopener noreferrer' : undefined) }, props)));
 };
 
-var GalleryHeader = function (_a) {
-    var currentSlide = _a.currentSlide, slidesCount = _a.slidesCount, onClose = _a.onClose, language = _a.language, children = _a.children;
+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';
@@ -7397,30 +7784,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;
@@ -7456,7 +7996,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;
     }
@@ -7559,7 +8099,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,
@@ -7585,7 +8125,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')),
@@ -7620,7 +8160,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() })));
 };
 
@@ -8460,233 +9000,55 @@ var footerConfig = function () {
                 },
                 target: '_blank',
             },
-            {
-                translationKey: 'footer.companies.anibis',
-                visibilitySettings: {
-                    brand: (_24 = {}, _24[Brand.AutoScout24] = true, _24[Brand.MotoScout24] = true, _24),
-                },
-                link: {
-                    de: 'https://www.anibis.ch/de',
-                    en: 'https://www.anibis.ch/de',
-                    fr: 'https://www.anibis.ch/fr',
-                    it: 'https://www.anibis.ch/it',
-                },
-                target: '_blank',
-            },
-        ],
-    });
-};
-
-var FooterCompanies = function (_a) {
-    var config = _a.config;
-    return (React.createElement(react$1.Box, { gap: { base: 'md', md: '2xl' }, marginBottom: "md", marginTop: "2xl", as: Stack, flexDirection: "row", justifyContent: "center", flexWrap: "wrap" }, config.companies.map(function (companyLink, index) {
-        return (React.createElement(FooterLink, { key: "company-".concat(index), linkInstance: companyLink, bold: true }));
-    })));
-};
-
-var Footer$1 = function (_a) {
-    var brand = _a.brand, language = _a.language, environment = _a.environment, useAbsoluteUrls = _a.useAbsoluteUrls, project = _a.project;
-    var config = React.useMemo(function () {
-        var footerConfigInstance = new FooterConfig({
-            config: footerConfig(),
-            brand: brand,
-            environment: environment,
-            useAbsoluteUrls: useAbsoluteUrls,
-            project: project,
-        });
-        return footerConfigInstance.getMappedConfig();
-    }, [brand, environment, useAbsoluteUrls, project]);
-    return (React.createElement(TranslationProvider, { language: language, scopes: ['footer'] },
-        React.createElement("footer", null,
-            React.createElement(react$1.Box, { width: "full", background: "gray.900", color: "white", paddingTop: { md: 'md' }, paddingBottom: { base: 'lg', md: '2xl' } },
-                React.createElement(Center, null,
-                    React.createElement(react$1.Container, { width: "full", maxWidth: "container.2xl", paddingX: { md: 'xs' } },
-                        React.createElement(FooterSectionGrid, { config: config }),
-                        React.createElement(FooterLanguageNavigation, null),
-                        React.createElement(SocialMedia, { config: config }))),
-                React.createElement(Separator, { orientation: "horizontal", borderColor: "gray.700" }),
-                React.createElement(Center, null,
-                    React.createElement(react$1.Container, { width: "full", maxWidth: "container.xl", paddingX: "lg" },
-                        React.createElement(FooterCompanies, { config: config }),
-                        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 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 });
+            {
+                translationKey: 'footer.companies.anibis',
+                visibilitySettings: {
+                    brand: (_24 = {}, _24[Brand.AutoScout24] = true, _24[Brand.MotoScout24] = true, _24),
+                },
+                link: {
+                    de: 'https://www.anibis.ch/de',
+                    en: 'https://www.anibis.ch/de',
+                    fr: 'https://www.anibis.ch/fr',
+                    it: 'https://www.anibis.ch/it',
+                },
+                target: '_blank',
+            },
+        ],
+    });
+};
+
+var FooterCompanies = function (_a) {
+    var config = _a.config;
+    return (React.createElement(react$1.Box, { gap: { base: 'md', md: '2xl' }, marginBottom: "md", marginTop: "2xl", as: Stack, flexDirection: "row", justifyContent: "center", flexWrap: "wrap" }, config.companies.map(function (companyLink, index) {
+        return (React.createElement(FooterLink, { key: "company-".concat(index), linkInstance: companyLink, bold: true }));
+    })));
+};
+
+var Footer$1 = function (_a) {
+    var brand = _a.brand, language = _a.language, environment = _a.environment, useAbsoluteUrls = _a.useAbsoluteUrls, project = _a.project;
+    var config = React.useMemo(function () {
+        var footerConfigInstance = new FooterConfig({
+            config: footerConfig(),
+            brand: brand,
+            environment: environment,
+            useAbsoluteUrls: useAbsoluteUrls,
+            project: project,
         });
-    }, []);
-    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))));
+        return footerConfigInstance.getMappedConfig();
+    }, [brand, environment, useAbsoluteUrls, project]);
+    return (React.createElement(TranslationProvider, { language: language, scopes: ['footer'] },
+        React.createElement("footer", null,
+            React.createElement(react$1.Box, { width: "full", background: "gray.900", color: "white", paddingTop: { md: 'md' }, paddingBottom: { base: 'lg', md: '2xl' } },
+                React.createElement(Center, null,
+                    React.createElement(react$1.Container, { width: "full", maxWidth: "container.2xl", paddingX: { md: 'xs' } },
+                        React.createElement(FooterSectionGrid, { config: config }),
+                        React.createElement(FooterLanguageNavigation, null),
+                        React.createElement(SocialMedia, { config: config }))),
+                React.createElement(Separator, { orientation: "horizontal", borderColor: "gray.700" }),
+                React.createElement(Center, null,
+                    React.createElement(react$1.Container, { width: "full", maxWidth: "container.xl", paddingX: "lg" },
+                        React.createElement(FooterCompanies, { config: config }),
+                        React.createElement(FooterCopyright, null)))))));
 };
 
 var createTenantLabel = function (managedSeller) {
@@ -8760,7 +9122,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); });
@@ -8840,7 +9202,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" },
@@ -8851,7 +9213,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" },
@@ -9898,7 +10260,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)));
@@ -10309,7 +10671,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({
@@ -10380,7 +10742,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" })));
 };
@@ -10474,7 +10836,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;
     }
@@ -10498,7 +10860,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')));
@@ -10524,7 +10886,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' } },
@@ -10829,198 +11191,9 @@ var Pagination = function (_a) {
                     return page.type === 'page' ? (React.createElement(react$1.Pagination.Item, __assign({ key: index }, page, { css: styles.paginationButton }), page.value)) : (React.createElement(react$1.Pagination.Ellipsis, { css: styles.dots, key: index, index: index }, "\u2026"));
                 });
             }),
-            React.createElement(react$1.Pagination.NextTrigger, { asChild: true, css: styles.paginationButton, display: { base: 'none', xs: 'inline-flex' } },
-                React.createElement(react$1.IconButton, null,
-                    React.createElement(ChevronRightSmallIcon, null))))));
-};
-
-var Rating = function (_a) {
-    var rating = _a.rating, props = __rest(_a, ["rating"]);
-    var percent = "calc((".concat(rating.toString(), " - 0.16) / 5 * 100%)");
-    var recipe = react$1.useRecipe({ key: 'rating' });
-    var recipeProps = recipe.splitVariantProps(props)[0];
-    var styles = recipe(recipeProps);
-    return (React.createElement(react$1.Box, { "aria-label": "Rating is ".concat(rating, " out of 5"), css: __assign(__assign({}, styles), { '--percent': percent, '--star-color': 'colors.orange.300', '&::before': {
-                content: '"★★★★★"',
-                letterSpacing: '0.5em',
-                color: 'var(--star-color)',
-                background: 'linear-gradient(90deg, var(--star-color) var(--percent), white var(--percent))',
-                backgroundClip: 'text',
-                WebkitTextFillColor: 'transparent',
-                WebkitTextStroke: '0.1em var(--star-color)',
-            } }) }));
-};
-
-var Section = function (_a) {
-    var _b = _a.maxImgW, maxImgW = _b === void 0 ? '2xl' : _b, props = __rest(_a, ["maxImgW"]);
-    var recipe = react$1.useSlotRecipe({ key: 'section' });
-    var _c = recipe.splitVariantProps(props), recipeProps = _c[0], componentProps = _c[1];
-    var styles = recipe(recipeProps);
-    var title = componentProps.title, text = componentProps.text, image = componentProps.image;
-    return (React.createElement(react$1.Stack, { css: styles.root },
-        image ? (React.createElement(react$1.Box, { css: styles.imageContainer, maxW: maxImgW }, image)) : null,
-        React.createElement(react$1.Stack, { css: styles.textContainer },
-            React.createElement(react$1.chakra.span, { css: styles.title }, title),
-            text ? React.createElement(react$1.chakra.span, { css: styles.text }, text) : null)));
-};
-
-var Select = React.forwardRef(function (_a, ref) {
-    var options = _a.options, props = __rest(_a, ["options"]);
-    var selectRecipe = react$1.useSlotRecipe({ key: 'select' });
-    var _b = selectRecipe.splitVariantProps(props), selectRecipeProps = _b[0], restProps = _b[1];
-    var selectStyles = selectRecipe(selectRecipeProps);
-    var disabled = restProps.disabled, invalid = restProps.invalid, rest = __rest(restProps, ["disabled", "invalid"]);
-    return (React.createElement(react$1.NativeSelect.Root, { disabled: disabled, invalid: invalid, css: selectStyles.root },
-        React.createElement(react$1.NativeSelect.Field, __assign({ ref: ref }, rest, { css: selectStyles.field }), options.map(function (option) { return (React.createElement("option", { value: option.value, key: option.value }, option.label)); })),
-        React.createElement(react$1.NativeSelect.Indicator, { css: [
-                selectStyles.indicator,
-                disabled && selectStyles.indicator._disabled,
-            ] })));
-});
-Select.displayName = 'Select';
-
-var SimpleHeader = function (props) {
-    var recipe = react$1.useSlotRecipe({ key: 'simpleHeader' });
-    var _a = recipe.splitVariantProps(props), recipeProps = _a[0], componentProps = _a[1];
-    var styles = recipe(recipeProps);
-    var title = componentProps.title, url = componentProps.url;
-    return (React.createElement(react$1.chakra.header, { css: styles.header },
-        React.createElement(Center, null,
-            React.createElement(Flex, { css: styles.mainContainer },
-                React.createElement(Flex, { justify: "space-between", minWidth: "full" },
-                    React.createElement(react$1.chakra.h1, { css: styles.title }, title),
-                    React.createElement(Flex, { css: styles.iconWrapper },
-                        React.createElement("a", { href: url },
-                            React.createElement(CloseIcon, null))))))));
-};
-
-var Tab = function (_a) {
-    var variant = _a.variant, children = _a.children, rest = __rest(_a, ["variant", "children"]);
-    var recipe = react$1.useSlotRecipe({ key: 'tabs' });
-    var styles = recipe({ variant: variant });
-    return (React.createElement(react$1.Tabs.Trigger, __assign({}, rest, { css: styles.trigger }), children));
-};
-
-var TabList = function (_a) {
-    var variant = _a.variant, children = _a.children, rest = __rest(_a, ["variant", "children"]);
-    var recipe = react$1.useSlotRecipe({ key: 'tabs' });
-    var styles = recipe({ variant: variant });
-    return (React.createElement(react$1.Box, { overflowX: "auto" },
-        React.createElement(react$1.Tabs.List, __assign({}, rest, { css: styles.list }), React.Children.map(children, function (child) {
-            return React.isValidElement(child)
-                ? React.cloneElement(child, { variant: variant })
-                : child;
-        }))));
-};
-
-var TabPanel = function (_a) {
-    var variant = _a.variant, children = _a.children, rest = __rest(_a, ["variant", "children"]);
-    var recipe = react$1.useSlotRecipe({ key: 'tabs' });
-    var styles = recipe({ variant: variant });
-    return (React.createElement(react$1.Tabs.Content, __assign({}, rest, { css: styles.content }), children));
-};
-
-var TabPanels = function (_a) {
-    var variant = _a.variant, children = _a.children;
-    var recipe = react$1.useSlotRecipe({ key: 'tabs' });
-    var styles = recipe({ variant: variant });
-    return (React.createElement(react$1.Box, { css: styles.contentGroup }, React.Children.map(children, function (child) {
-        return React.isValidElement(child)
-            ? React.cloneElement(child, { variant: variant })
-            : child;
-    })));
-};
-
-var Tabs = function (_a) {
-    var variant = _a.variant, children = _a.children, rest = __rest(_a, ["variant", "children"]);
-    var recipe = react$1.useSlotRecipe({ key: 'tabs' });
-    var styles = recipe({ variant: variant });
-    return (React.createElement(react$1.Tabs.Root, __assign({}, rest, { css: styles.root }), React.Children.map(children, function (child) {
-        return React.isValidElement(child)
-            ? React.cloneElement(child, { variant: variant })
-            : child;
-    })));
-};
-
-var Body = react$1.Table.Body, Caption = react$1.Table.Caption, Cell = react$1.Table.Cell, Column = react$1.Table.Column, ColumnGroup = react$1.Table.ColumnGroup, ColumnHeader = react$1.Table.ColumnHeader, Footer = react$1.Table.Footer, Header = react$1.Table.Header, Root = react$1.Table.Root, Row = react$1.Table.Row, ScrollArea = react$1.Table.ScrollArea;
-Body.displayName = 'Table.Body';
-Caption.displayName = 'Table.Caption';
-Column.displayName = 'Table.Column';
-ColumnGroup.displayName = 'Table.ColumnGroup';
-Footer.displayName = 'Table.Footer';
-Header.displayName = 'Table.Header';
-Root.displayName = 'Table.Root';
-Row.displayName = 'Table.Row';
-ScrollArea.displayName = 'Table.ScrollArea';
-Cell.displayName = 'Table.Cell';
-ColumnHeader.displayName = 'Table.ColumnHeader';
-var Table = {
-    Body: Body,
-    Caption: Caption,
-    Cell: Cell,
-    Column: Column,
-    ColumnGroup: ColumnGroup,
-    ColumnHeader: ColumnHeader,
-    Footer: Footer,
-    Header: Header,
-    Root: Root,
-    Row: Row,
-    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"))));
+            React.createElement(react$1.Pagination.NextTrigger, { asChild: true, css: styles.paginationButton, display: { base: 'none', xs: 'inline-flex' } },
+                React.createElement(react$1.IconButton, null,
+                    React.createElement(ChevronRightSmallIcon, null))))));
 };
 
 var InputLeftElement = function (_a) {
@@ -11098,94 +11271,6 @@ var RangeFilterInput = function (_a) {
         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),
@@ -11196,268 +11281,138 @@ var RangeSlider = function (_a) {
             React.createElement(react$1.Slider.Thumb, { index: 1, "aria-label": "Max", width: { base: 'md', sm: 'sm' }, height: { base: 'md', sm: 'sm' } }))));
 };
 
-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 Rating = function (_a) {
+    var rating = _a.rating, props = __rest(_a, ["rating"]);
+    var percent = "calc((".concat(rating.toString(), " - 0.16) / 5 * 100%)");
+    var recipe = react$1.useRecipe({ key: 'rating' });
+    var recipeProps = recipe.splitVariantProps(props)[0];
+    var styles = recipe(recipeProps);
+    return (React.createElement(react$1.Box, { "aria-label": "Rating is ".concat(rating, " out of 5"), css: __assign(__assign({}, styles), { '--percent': percent, '--star-color': 'colors.orange.300', '&::before': {
+                content: '"★★★★★"',
+                letterSpacing: '0.5em',
+                color: 'var(--star-color)',
+                background: 'linear-gradient(90deg, var(--star-color) var(--percent), white var(--percent))',
+                backgroundClip: 'text',
+                WebkitTextFillColor: 'transparent',
+                WebkitTextStroke: '0.1em var(--star-color)',
+            } }) }));
 };
 
-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 Section = function (_a) {
+    var _b = _a.maxImgW, maxImgW = _b === void 0 ? '2xl' : _b, props = __rest(_a, ["maxImgW"]);
+    var recipe = react$1.useSlotRecipe({ key: 'section' });
+    var _c = recipe.splitVariantProps(props), recipeProps = _c[0], componentProps = _c[1];
+    var styles = recipe(recipeProps);
+    var title = componentProps.title, text = componentProps.text, image = componentProps.image;
+    return (React.createElement(react$1.Stack, { css: styles.root },
+        image ? (React.createElement(react$1.Box, { css: styles.imageContainer, maxW: maxImgW }, image)) : null,
+        React.createElement(react$1.Stack, { css: styles.textContainer },
+            React.createElement(react$1.chakra.span, { css: styles.title }, title),
+            text ? React.createElement(react$1.chakra.span, { css: styles.text }, text) : 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 Select = React.forwardRef(function (_a, ref) {
+    var options = _a.options, props = __rest(_a, ["options"]);
+    var selectRecipe = react$1.useSlotRecipe({ key: 'select' });
+    var _b = selectRecipe.splitVariantProps(props), selectRecipeProps = _b[0], restProps = _b[1];
+    var selectStyles = selectRecipe(selectRecipeProps);
+    var disabled = restProps.disabled, invalid = restProps.invalid, rest = __rest(restProps, ["disabled", "invalid"]);
+    return (React.createElement(react$1.NativeSelect.Root, { disabled: disabled, invalid: invalid, css: selectStyles.root },
+        React.createElement(react$1.NativeSelect.Field, __assign({ ref: ref }, rest, { css: selectStyles.field }), options.map(function (option) { return (React.createElement("option", { value: option.value, key: option.value }, option.label)); })),
+        React.createElement(react$1.NativeSelect.Indicator, { css: [
+                selectStyles.indicator,
+                disabled && selectStyles.indicator._disabled,
+            ] })));
+});
+Select.displayName = 'Select';
 
-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: isCurrent
-            ? styles.numbersPaginationButtonActive
-            : styles.numbersPaginationButton, onClick: onClick, "aria-current": isCurrent, "aria-label": "numbers pagination ".concat(currentPageNumber, " of ").concat(totalNumbers) }, currentPageNumber));
+var SimpleHeader = function (props) {
+    var recipe = react$1.useSlotRecipe({ key: 'simpleHeader' });
+    var _a = recipe.splitVariantProps(props), recipeProps = _a[0], componentProps = _a[1];
+    var styles = recipe(recipeProps);
+    var title = componentProps.title, url = componentProps.url;
+    return (React.createElement(react$1.chakra.header, { css: styles.header },
+        React.createElement(Center, null,
+            React.createElement(Flex, { css: styles.mainContainer },
+                React.createElement(Flex, { justify: "space-between", minWidth: "full" },
+                    React.createElement(react$1.chakra.h1, { css: styles.title }, title),
+                    React.createElement(Flex, { css: styles.iconWrapper },
+                        React.createElement("a", { href: url },
+                            React.createElement(CloseIcon, null))))))));
 };
 
-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 Tab = function (_a) {
+    var variant = _a.variant, children = _a.children, rest = __rest(_a, ["variant", "children"]);
+    var recipe = react$1.useSlotRecipe({ key: 'tabs' });
+    var styles = recipe({ variant: variant });
+    return (React.createElement(react$1.Tabs.Trigger, __assign({}, rest, { css: styles.trigger }), children));
 };
 
-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 TabList = function (_a) {
+    var variant = _a.variant, children = _a.children, rest = __rest(_a, ["variant", "children"]);
+    var recipe = react$1.useSlotRecipe({ key: 'tabs' });
+    var styles = recipe({ variant: variant });
+    return (React.createElement(react$1.Box, { overflowX: "auto" },
+        React.createElement(react$1.Tabs.List, __assign({}, rest, { css: styles.list }), React.Children.map(children, function (child) {
+            return React.isValidElement(child)
+                ? React.cloneElement(child, { variant: variant })
+                : child;
+        }))));
 };
 
-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, { css: isCurrent
-            ? styles.dotsPaginationIndicatorActive
-            : styles.dotsPaginationIndicator }));
+var TabPanel = function (_a) {
+    var variant = _a.variant, children = _a.children, rest = __rest(_a, ["variant", "children"]);
+    var recipe = react$1.useSlotRecipe({ key: 'tabs' });
+    var styles = recipe({ variant: variant });
+    return (React.createElement(react$1.Tabs.Content, __assign({}, rest, { css: styles.content }), children));
 };
 
-var NumbersDotsPagination = 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 })); }))));
+var TabPanels = function (_a) {
+    var variant = _a.variant, children = _a.children;
+    var recipe = react$1.useSlotRecipe({ key: 'tabs' });
+    var styles = recipe({ variant: variant });
+    return (React.createElement(react$1.Box, { css: styles.contentGroup }, React.Children.map(children, function (child) {
+        return React.isValidElement(child)
+            ? React.cloneElement(child, { variant: variant })
+            : child;
+    })));
 };
 
-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;
+var Tabs = function (_a) {
+    var variant = _a.variant, children = _a.children, rest = __rest(_a, ["variant", "children"]);
+    var recipe = react$1.useSlotRecipe({ key: 'tabs' });
+    var styles = recipe({ variant: variant });
+    return (React.createElement(react$1.Tabs.Root, __assign({}, rest, { css: styles.root }), React.Children.map(children, function (child) {
+        return React.isValidElement(child)
+            ? React.cloneElement(child, { variant: variant })
+            : child;
+    })));
 };
-// 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(NumbersDotsPagination, { 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 Body = react$1.Table.Body, Caption = react$1.Table.Caption, Cell = react$1.Table.Cell, Column = react$1.Table.Column, ColumnGroup = react$1.Table.ColumnGroup, ColumnHeader = react$1.Table.ColumnHeader, Footer = react$1.Table.Footer, Header = react$1.Table.Header, Root = react$1.Table.Root, Row = react$1.Table.Row, ScrollArea = react$1.Table.ScrollArea;
+Body.displayName = 'Table.Body';
+Caption.displayName = 'Table.Caption';
+Column.displayName = 'Table.Column';
+ColumnGroup.displayName = 'Table.ColumnGroup';
+Footer.displayName = 'Table.Footer';
+Header.displayName = 'Table.Header';
+Root.displayName = 'Table.Root';
+Row.displayName = 'Table.Row';
+ScrollArea.displayName = 'Table.ScrollArea';
+Cell.displayName = 'Table.Cell';
+ColumnHeader.displayName = 'Table.ColumnHeader';
+var Table = {
+    Body: Body,
+    Caption: Caption,
+    Cell: Cell,
+    Column: Column,
+    ColumnGroup: ColumnGroup,
+    ColumnHeader: ColumnHeader,
+    Footer: Footer,
+    Header: Header,
+    Root: Root,
+    Row: Row,
+    ScrollArea: ScrollArea,
 };
 
 var TenantSelectionModalLayout = function (_a) {
@@ -11468,7 +11423,7 @@ var TenantSelectionModalLayout = function (_a) {
 
 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 });
@@ -11482,7 +11437,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');
@@ -11540,6 +11495,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; }
@@ -11630,6 +11652,7 @@ exports.ChfCurrencyIcon = ChfCurrencyIcon;
 exports.Chip = Chip;
 exports.CloseIcon = CloseIcon;
 exports.CollapseIcon = CollapseIcon;
+exports.ColorPicker = ColorPicker;
 exports.CompareIcon = CompareIcon;
 exports.ConsumptionIcon = ConsumptionIcon;
 exports.CopyIcon = CopyIcon;