@smg-automotive/components 27.3.2-components-cleanup.2 → 27.3.2-fix-components-bundlesize.1

package/dist/cjs/index.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 var react = require('@chakra-ui/react');
@@ -6,9 +7,14 @@ var React = require('react');
 var useDebounce = require('use-debounce');
 var jsxRuntime = require('react/jsx-runtime');
 var Fuse = require('fuse.js');
+var box = require('@chakra-ui/react/box');
 var i18nPkg = require('@smg-automotive/i18n-pkg');
 var client = require('@smg-automotive/i18n-pkg/client');
+var stack = require('@chakra-ui/react/stack');
+var skeleton = require('@chakra-ui/react/skeleton');
+var aspectRatio = require('@chakra-ui/react/aspect-ratio');
 var useEmblaCarousel = require('embla-carousel-react');
+var grid = require('@chakra-ui/react/grid');
 var auth$4 = require('@smg-automotive/auth');
 
 const convertRemEmToPx = (value) => {
@@ -456,23 +462,12 @@ const useDisclosure = (options = {}) => {
     };
 };
 
-const Accordion = (props) => {
-    const recipe = react.useSlotRecipe({ key: 'accordion' });
-    const [recipeProps, restProps] = recipe.splitVariantProps(props);
-    const { children, ...rest } = restProps;
-    return (jsxRuntime.jsx(react.Accordion.Root, { ...rest, children: React.Children.map(children, (child) => React.isValidElement(child)
-            ? React.cloneElement(child, {
-                variant: recipeProps.variant,
-            })
-            : child) }));
-};
-
 const AccordionButton = (props) => {
     const recipe = react.useSlotRecipe({ key: 'accordion' });
     const [recipeProps, restProps] = recipe.splitVariantProps(props);
     const styles = recipe({ ...recipeProps });
     const { children, leftIcon, ...rest } = restProps;
-    return (jsxRuntime.jsxs(react.Accordion.ItemTrigger, { ...rest, css: styles.button, children: [leftIcon ? jsxRuntime.jsx(react.Box, { mr: "sm", children: leftIcon }) : null, jsxRuntime.jsx(react.Box, { as: "span", flex: "1", textAlign: "left", children: children }), jsxRuntime.jsx(react.Accordion.ItemIndicator, { css: styles.indicator })] }));
+    return (jsxRuntime.jsxs(react.Accordion.ItemTrigger, { ...rest, css: styles.button, children: [leftIcon ? jsxRuntime.jsx(box.Box, { mr: "sm", children: leftIcon }) : null, jsxRuntime.jsx(box.Box, { as: "span", flex: "1", textAlign: "left", children: children }), jsxRuntime.jsx(react.Accordion.ItemIndicator, { css: styles.indicator })] }));
 };
 
 const AccordionItem = (props) => {
@@ -495,6 +490,17 @@ const AccordionPanel = (props) => {
     return (jsxRuntime.jsx(react.Accordion.ItemContent, { css: styles.content, children: jsxRuntime.jsx(react.Accordion.ItemBody, { ...rest, css: { ...styles.body, ...(pb !== undefined && { pb }) }, children: children }) }));
 };
 
+const Accordion = (props) => {
+    const recipe = react.useSlotRecipe({ key: 'accordion' });
+    const [recipeProps, restProps] = recipe.splitVariantProps(props);
+    const { children, ...rest } = restProps;
+    return (jsxRuntime.jsx(react.Accordion.Root, { ...rest, children: React.Children.map(children, (child) => React.isValidElement(child)
+            ? React.cloneElement(child, {
+                variant: recipeProps.variant,
+            })
+            : child) }));
+};
+
 const Box = React.forwardRef(function BoxAdapter(props, ref) {
     const { as, textColor, spacing, color, sx, children, 
     // Link-like props, e.g. NextLink
@@ -514,13 +520,13 @@ const Box = React.forwardRef(function BoxAdapter(props, ref) {
         typeof as !== 'string' &&
         (href !== undefined || prefetch !== undefined);
     if (!as) {
-        return (jsxRuntime.jsx(react.Box, { ...boxProps, ref: ref, children: children }));
+        return (jsxRuntime.jsx(box.Box, { ...boxProps, ref: ref, children: children }));
     }
     const AsComp = as;
     if (isLinkLike) {
-        return (jsxRuntime.jsx(react.Box, { ...boxProps, asChild: true, ref: ref, children: jsxRuntime.jsx(AsComp, { ...(href !== undefined ? { href } : {}), ...(prefetch !== undefined ? { prefetch } : {}), children: children }) }));
+        return (jsxRuntime.jsx(box.Box, { ...boxProps, asChild: true, ref: ref, children: jsxRuntime.jsx(AsComp, { ...(href !== undefined ? { href } : {}), ...(prefetch !== undefined ? { prefetch } : {}), children: children }) }));
     }
-    return (jsxRuntime.jsx(react.Box, { ...boxProps, as: AsComp, ref: ref, children: children }));
+    return (jsxRuntime.jsx(box.Box, { ...boxProps, as: AsComp, ref: ref, children: children }));
 });
 
 const buttonRecipe = react.defineRecipe({
@@ -2931,7 +2937,7 @@ const BaseLayout = ({ header, footer, skyScraperAd, heroAd, maxContentWidth, chi
 const SingleColumnCenteredLayout = ({ children, maxContentWidth = 'md' }) => {
     const isSingleChild = !Array.isArray(children);
     const [stepper, content] = isSingleChild ? [null, children] : children;
-    return (jsxRuntime.jsx(react.Container, { width: "full", height: "full", background: "gray.100", children: jsxRuntime.jsxs(BaseLayout, { header: null, maxContentWidth: maxContentWidth, children: [!stepper ? null : jsxRuntime.jsx(react.Box, { marginBottom: "2xl", children: stepper }), jsxRuntime.jsx(react.Box, { children: content })] }) }));
+    return (jsxRuntime.jsx(react.Container, { width: "full", height: "full", background: "gray.100", children: jsxRuntime.jsxs(BaseLayout, { header: null, maxContentWidth: maxContentWidth, children: [!stepper ? null : jsxRuntime.jsx(box.Box, { marginBottom: "2xl", children: stepper }), jsxRuntime.jsx(box.Box, { children: content })] }) }));
 };
 
 const InsertionLayout = (props) => {
@@ -2998,7 +3004,7 @@ const Dialog = ({ title, open, onOpenChange, primaryActionButton, secondaryActio
         overlayColor,
     });
     const styles = recipe(recipeProps);
-    return (jsxRuntime.jsx(react.Dialog.Root, { open: open, onOpenChange: onOpenChange, ...props, children: jsxRuntime.jsxs(react.Portal, { children: [jsxRuntime.jsx(react.Dialog.Backdrop, { css: styles.backdrop }), jsxRuntime.jsx(react.Dialog.Positioner, { css: styles.positioner, children: jsxRuntime.jsxs(react.Dialog.Content, { css: styles.content, children: [title && (jsxRuntime.jsx(react.Box, { borderBottom: "1px", borderColor: "gray.100", children: jsxRuntime.jsxs(react.Dialog.Header, { css: styles.header, children: [jsxRuntime.jsx(H3, { children: title }), jsxRuntime.jsx(react.Dialog.CloseTrigger, { asChild: true, css: styles.closeTrigger, children: jsxRuntime.jsx(DialogCloseButton, { fontSize: "base" }) })] }) })), jsxRuntime.jsx(react.Dialog.Body, { css: styles.body, p: disableBodyPadding ? '0' : undefined, children: children }), (primaryActionButton || secondaryActionButton) && (jsxRuntime.jsx(react.Box, { borderTop: "1px", borderColor: "gray.100", children: jsxRuntime.jsxs(react.Dialog.Footer, { display: "flex", justifyContent: bothActionButtons ? 'space-between' : 'flex-start', gap: bothActionButtons ? 'sm' : '0', css: styles.footer, children: [secondaryActionButton ? (jsxRuntime.jsx(Button$1, { variant: "secondary", onClick: secondaryActionButton.action, width: { base: 'full', sm: 'fit' }, children: secondaryActionButton.label })) : null, primaryActionButton ? (jsxRuntime.jsx(Button$1, { variant: "primary", onClick: primaryActionButton.action, width: { base: 'full', sm: 'fit' }, children: primaryActionButton.label })) : null] }) }))] }) })] }) }));
+    return (jsxRuntime.jsx(react.Dialog.Root, { open: open, onOpenChange: onOpenChange, ...props, children: jsxRuntime.jsxs(react.Portal, { children: [jsxRuntime.jsx(react.Dialog.Backdrop, { css: styles.backdrop }), jsxRuntime.jsx(react.Dialog.Positioner, { css: styles.positioner, children: jsxRuntime.jsxs(react.Dialog.Content, { css: styles.content, children: [title && (jsxRuntime.jsx(box.Box, { borderBottom: "1px", borderColor: "gray.100", children: jsxRuntime.jsxs(react.Dialog.Header, { css: styles.header, children: [jsxRuntime.jsx(H3, { children: title }), jsxRuntime.jsx(react.Dialog.CloseTrigger, { asChild: true, css: styles.closeTrigger, children: jsxRuntime.jsx(DialogCloseButton, { fontSize: "base" }) })] }) })), jsxRuntime.jsx(react.Dialog.Body, { css: styles.body, p: disableBodyPadding ? '0' : undefined, children: children }), (primaryActionButton || secondaryActionButton) && (jsxRuntime.jsx(box.Box, { borderTop: "1px", borderColor: "gray.100", children: jsxRuntime.jsxs(react.Dialog.Footer, { display: "flex", justifyContent: bothActionButtons ? 'space-between' : 'flex-start', gap: bothActionButtons ? 'sm' : '0', css: styles.footer, children: [secondaryActionButton ? (jsxRuntime.jsx(Button$1, { variant: "secondary", onClick: secondaryActionButton.action, width: { base: 'full', sm: 'fit' }, children: secondaryActionButton.label })) : null, primaryActionButton ? (jsxRuntime.jsx(Button$1, { variant: "primary", onClick: primaryActionButton.action, width: { base: 'full', sm: 'fit' }, children: primaryActionButton.label })) : null] }) }))] }) })] }) }));
 };
 
 const ModalCloseButton = (props) => {
@@ -3950,7 +3956,7 @@ function withTranslationProvider(scopes) {
     };
 }
 
-const Stack$1 = ({ children, ...rest }) => (jsxRuntime.jsx(react.Stack, { ...rest, children: children }));
+const Stack$1 = ({ children, ...rest }) => (jsxRuntime.jsx(stack.Stack, { ...rest, children: children }));
 
 const Text$1 = react.Text;
 Text$1.displayName = 'Text';
@@ -3988,7 +3994,7 @@ const Popover = ({ actionButton, Icon, isApplied, enforceHeight, label, numberOf
     const recipe = react.useSlotRecipe({ key: 'popoverFilter' });
     const styles = recipe();
     const maxHeight = showCallToActionButton ? '6xl' : '7xl';
-    return (jsxRuntime.jsx(react.Portal, { children: jsxRuntime.jsx(react.Box, { zIndex: zIndex, w: "full", h: "full", position: "relative", children: jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { css: styles.content, minHeight: enforceHeight ? '7xl' : undefined, height: enforceHeight ? '7xl' : undefined, ref: popoverContentRef, children: jsxRuntime.jsxs(react.Box, { as: Stack$1, h: "full", paddingY: "2xl", children: [jsxRuntime.jsx(react.Popover.Header, { paddingX: "2xl", children: header && React.isValidElement(header) ? (header) : (jsxRuntime.jsx(FilterHeading, { Icon: Icon, isApplied: isApplied, label: label, numberOfAppliedFilters: numberOfAppliedFilters, onClose: onClose, language: language, onResetFilter: onResetFilter, contentRef: popoverContentRef })) }), jsxRuntime.jsx(react.Popover.Body, { css: styles.body, maxHeight: maxHeight, marginBottom: showCallToActionButton ? '2xl' : '0', height: enforceHeight ? maxHeight : 'auto', children: children }), showCallToActionButton ? (jsxRuntime.jsx(react.Popover.Footer, { paddingX: "2xl", children: jsxRuntime.jsx(FilterActionButton, { actionButton: actionButton, isApplied: isApplied, onClose: onClose }) })) : null] }) }) }) }) }));
+    return (jsxRuntime.jsx(react.Portal, { children: jsxRuntime.jsx(box.Box, { zIndex: zIndex, w: "full", h: "full", position: "relative", children: jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { css: styles.content, minHeight: enforceHeight ? '7xl' : undefined, height: enforceHeight ? '7xl' : undefined, ref: popoverContentRef, children: jsxRuntime.jsxs(box.Box, { as: Stack$1, h: "full", paddingY: "2xl", children: [jsxRuntime.jsx(react.Popover.Header, { paddingX: "2xl", children: header && React.isValidElement(header) ? (header) : (jsxRuntime.jsx(FilterHeading, { Icon: Icon, isApplied: isApplied, label: label, numberOfAppliedFilters: numberOfAppliedFilters, onClose: onClose, language: language, onResetFilter: onResetFilter, contentRef: popoverContentRef })) }), jsxRuntime.jsx(react.Popover.Body, { css: styles.body, maxHeight: maxHeight, marginBottom: showCallToActionButton ? '2xl' : '0', height: enforceHeight ? maxHeight : 'auto', children: children }), showCallToActionButton ? (jsxRuntime.jsx(react.Popover.Footer, { paddingX: "2xl", children: jsxRuntime.jsx(FilterActionButton, { actionButton: actionButton, isApplied: isApplied, onClose: onClose }) })) : null] }) }) }) }) }));
 };
 
 const PopoverFilterContent = ({ actionButton, displayValue, enforceHeight, Icon, initialPopoverState = 'closed', isApplied, label, appliedLabel, numberOfAppliedFilters, onPopoverClose, onPopoverOpen, onResetFilter, showCallToActionButton = true, header, children, triggerHeight = 'md', disabled, hasFlip = true, zIndex = 'popover', }) => {
@@ -4114,14 +4120,14 @@ const Chart = ({ facets, range }) => {
         return null;
     }
     const maxValue = Math.max(...facets.map(({ value }) => value));
-    return (jsxRuntime.jsx(Flex, { justify: "space-between", h: "full", "data-testid": "chart", children: facets.map(({ from }, index) => (jsxRuntime.jsx(react.Box, { h: "full", style: { marginInline: '1px', transition: 'transform 1s ease' }, flexGrow: 1, bg: index < range[0] || index > range[1] - 1 ? 'gray.200' : 'gray.500', transformOrigin: "bottom", transform: `scaleY(${maxValue > 0 ? facets[index].value / maxValue : 0})` }, from))) }));
+    return (jsxRuntime.jsx(Flex, { justify: "space-between", h: "full", "data-testid": "chart", children: facets.map(({ from }, index) => (jsxRuntime.jsx(box.Box, { h: "full", style: { marginInline: '1px', transition: 'transform 1s ease' }, flexGrow: 1, bg: index < range[0] || index > range[1] - 1 ? 'gray.200' : 'gray.500', transformOrigin: "bottom", transform: `scaleY(${maxValue > 0 ? facets[index].value / maxValue : 0})` }, from))) }));
 };
 
 const RangeSliderWithChart = ({ facets, selection, onSliderChange, onSliderRelease, chartHeight = '3xl', }) => {
     // Create a copy before sorting to avoid mutating the `facets` prop.
     const sortedFacetsByFromKey = [...facets].sort((a, b) => a.from - b.from);
     const scale = sortedFacetsByFromKey.map(({ from }) => from);
-    return (jsxRuntime.jsx(RangeSliderWithScale, { onSliderChange: onSliderChange, onSliderRelease: onSliderRelease, selection: selection, scale: scale, renderChart: (range) => (jsxRuntime.jsx(react.Box, { position: "relative", top: "sm", h: chartHeight, children: jsxRuntime.jsx(Chart, { range: range, facets: sortedFacetsByFromKey }) })) }));
+    return (jsxRuntime.jsx(RangeSliderWithScale, { onSliderChange: onSliderChange, onSliderRelease: onSliderRelease, selection: selection, scale: scale, renderChart: (range) => (jsxRuntime.jsx(box.Box, { position: "relative", top: "sm", h: chartHeight, children: jsxRuntime.jsx(Chart, { range: range, facets: sortedFacetsByFromKey }) })) }));
 };
 
 const InputLeftElement = ({ unit }) => {
@@ -4241,7 +4247,7 @@ function RangeFilterInputWithSlider$1({ rangeSliderScale, facets, unit, onChange
         }));
         onChange({ ...event, changeType: 'inputfield' });
     };
-    return (jsxRuntime.jsxs(Flex, { direction: "column", children: [jsxRuntime.jsx(react.Box, { order: { base: 1, sm: 0 }, mb: "sm", px: "md", py: { base: 'md', sm: '0' }, children: facets ? (jsxRuntime.jsx(RangeSliderWithChart, { onSliderChange: handleSliderChange, onSliderRelease: handleSliderRelease, selection: appliedValue(), facets: facets, chartHeight: chartHeight })) : (jsxRuntime.jsx(RangeSliderWithScale, { onSliderChange: handleSliderChange, onSliderRelease: handleSliderRelease, selection: appliedValue(), scale: rangeSliderScale })) }), jsxRuntime.jsx(RangeFilterInput, { from: { ...from, value: appliedValue().min }, to: { ...to, value: appliedValue().max }, handleChange: handleInputChange, onBlur: handleInputChange, unit: unit, ...rest })] }));
+    return (jsxRuntime.jsxs(Flex, { direction: "column", children: [jsxRuntime.jsx(box.Box, { order: { base: 1, sm: 0 }, mb: "sm", px: "md", py: { base: 'md', sm: '0' }, children: facets ? (jsxRuntime.jsx(RangeSliderWithChart, { onSliderChange: handleSliderChange, onSliderRelease: handleSliderRelease, selection: appliedValue(), facets: facets, chartHeight: chartHeight })) : (jsxRuntime.jsx(RangeSliderWithScale, { onSliderChange: handleSliderChange, onSliderRelease: handleSliderRelease, selection: appliedValue(), scale: rangeSliderScale })) }), jsxRuntime.jsx(RangeFilterInput, { from: { ...from, value: appliedValue().min }, to: { ...to, value: appliedValue().max }, handleChange: handleInputChange, onBlur: handleInputChange, unit: unit, ...rest })] }));
 }
 
 function RangeFilterInputWithSlider(props) {
@@ -4309,7 +4315,7 @@ const SimpleGrid = (props) => {
     return (jsxRuntime.jsx(SimpleGrid$1, { ...rest, ...(spacing ? { gap: spacing } : {}), ...(spacingX ? { gapX: spacingX } : {}), ...(spacingY ? { gapY: spacingY } : {}) }));
 };
 
-const Skeleton$1 = react.Skeleton;
+const Skeleton$1 = skeleton.Skeleton;
 Skeleton$1.displayName = 'Skeleton';
 
 const Skeleton = (props) => {
@@ -4442,7 +4448,7 @@ const ArticleTeaser = ({ maxImgW = '4xl', ...props }) => {
     return (jsxRuntime.jsx("article", { children: jsxRuntime.jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", children: jsxRuntime.jsxs(Stack$1, { direction: "column", gap: "lg", align: "center", children: [jsxRuntime.jsx(react.chakra.img, { maxWidth: maxImgW, src: imageUrl }), jsxRuntime.jsxs(Stack$1, { direction: "column", gap: "sm", width: "full", children: [jsxRuntime.jsx(react.chakra.h2, { css: styles.title, children: title }), jsxRuntime.jsx(react.chakra.span, { css: styles.text, children: text })] })] }) }) }));
 };
 
-const AspectRatio = react.AspectRatio;
+const AspectRatio = aspectRatio.AspectRatio;
 AspectRatio.displayName = 'AspectRatio';
 
 const Avatar = ({ withNotification, color }) => {
@@ -4453,6 +4459,24 @@ const Avatar = ({ withNotification, color }) => {
 
 const Badge = ({ text, ...props }) => (jsxRuntime.jsx(react.Badge, { ...props, children: text }));
 
+const BreadcrumbsItem = ({ children }) => {
+    return jsxRuntime.jsx(react.Breadcrumb.Item, { children: children });
+};
+
+const BreadcrumbLink = ({ as, children, href, prefetch, replace, ...rest }) => {
+    const recipe = react.useSlotRecipe({ key: 'breadcrumbs' });
+    const styles = recipe();
+    if (!href) {
+        return children;
+    }
+    const isComponentAs = Boolean(as) && typeof as !== 'string';
+    if (isComponentAs) {
+        const AsComp = as;
+        return (jsxRuntime.jsx(react.Breadcrumb.Link, { css: styles.link, asChild: true, ...rest, children: jsxRuntime.jsx(AsComp, { href: href, ...(prefetch !== undefined ? { prefetch } : {}), ...(replace ? { replace: true } : {}), children: children }) }));
+    }
+    return (jsxRuntime.jsx(react.Breadcrumb.Link, { css: styles.link, as: as, href: href, ...rest, children: children }));
+};
+
 const BreadcrumbSeparator = () => {
     const recipe = react.useSlotRecipe({ key: 'breadcrumbs' });
     const styles = recipe();
@@ -4474,24 +4498,6 @@ const Breadcrumbs = ({ children, ...props }) => {
             }) }) }));
 };
 
-const BreadcrumbsItem = ({ children }) => {
-    return jsxRuntime.jsx(react.Breadcrumb.Item, { children: children });
-};
-
-const BreadcrumbLink = ({ as, children, href, prefetch, replace, ...rest }) => {
-    const recipe = react.useSlotRecipe({ key: 'breadcrumbs' });
-    const styles = recipe();
-    if (!href) {
-        return children;
-    }
-    const isComponentAs = Boolean(as) && typeof as !== 'string';
-    if (isComponentAs) {
-        const AsComp = as;
-        return (jsxRuntime.jsx(react.Breadcrumb.Link, { css: styles.link, asChild: true, ...rest, children: jsxRuntime.jsx(AsComp, { href: href, ...(prefetch !== undefined ? { prefetch } : {}), ...(replace ? { replace: true } : {}), children: children }) }));
-    }
-    return (jsxRuntime.jsx(react.Breadcrumb.Link, { css: styles.link, as: as, href: href, ...rest, children: children }));
-};
-
 const { Root, Header, Body, Footer: Footer$1 } = react.Card;
 Root.displayName = 'Card.Root';
 Header.displayName = 'Card.Header';
@@ -4550,7 +4556,7 @@ const ThumbnailPagination = ({ currentSlideIndex, thumbnails, mainCarousel, pagi
         paginationCarousel.on('scroll', evalPaginationButtonVisibility);
         paginationCarousel.on('slidesInView', evalPaginationButtonVisibility);
     }, [paginationCarousel, evalPaginationButtonVisibility]);
-    return (jsxRuntime.jsxs(react.Box, { ref: paginationCarouselRef, css: styles.pagination, "aria-label": "Pagination", children: [jsxRuntime.jsx(Flex, { alignItems: "center", height: "full", id: "thumbnail-wrapper", children: thumbnails.map((slide, index) => (jsxRuntime.jsx(Thumbnail, { onClick: () => onThumbnailClick(index), isCurrent: index === currentSlideIndex, thumbnailIndex: index, totalThumbnails: thumbnails.length, children: paginationCarouselRef ? (slide) : (jsxRuntime.jsx(react.Box, { h: "full", w: "full", backgroundColor: "gray.50" })) }, `slide-${index}`))) }), paginationButtonVisibility.previous ? (jsxRuntime.jsx(ThumbnailNavigationButton, { onClick: scrollPrev, direction: "previous" })) : null, paginationButtonVisibility.next ? (jsxRuntime.jsx(ThumbnailNavigationButton, { onClick: scrollNext, direction: "next" })) : null] }));
+    return (jsxRuntime.jsxs(box.Box, { ref: paginationCarouselRef, css: styles.pagination, "aria-label": "Pagination", children: [jsxRuntime.jsx(Flex, { alignItems: "center", height: "full", id: "thumbnail-wrapper", children: thumbnails.map((slide, index) => (jsxRuntime.jsx(Thumbnail, { onClick: () => onThumbnailClick(index), isCurrent: index === currentSlideIndex, thumbnailIndex: index, totalThumbnails: thumbnails.length, children: paginationCarouselRef ? (slide) : (jsxRuntime.jsx(box.Box, { h: "full", w: "full", backgroundColor: "gray.50" })) }, `slide-${index}`))) }), paginationButtonVisibility.previous ? (jsxRuntime.jsx(ThumbnailNavigationButton, { onClick: scrollPrev, direction: "previous" })) : null, paginationButtonVisibility.next ? (jsxRuntime.jsx(ThumbnailNavigationButton, { onClick: scrollNext, direction: "next" })) : null] }));
 };
 
 const Slide = ({ onClick, slideIndex, totalSlides, isCurrent, children, fullScreen, slidesPerView, }) => {
@@ -4570,7 +4576,7 @@ const Slide = ({ onClick, slideIndex, totalSlides, isCurrent, children, fullScre
             });
             return result;
         })();
-    return (jsxRuntime.jsx(react.Box, { css: {
+    return (jsxRuntime.jsx(box.Box, { css: {
             ...styles.slide,
             ...(basisVarResponsive
                 ? { '--carousel-slide-basis': basisVarResponsive }
@@ -4591,7 +4597,7 @@ const NumbersPagination = ({ currentSlideIndex, numberOfSlides, mainCarousel, })
         }
     }, [mainCarousel]);
     const pagination = Array.from({ length: numberOfSlides }, (_, i) => i);
-    return (jsxRuntime.jsx(react.Box, { "aria-label": "Numbers Pagination", children: jsxRuntime.jsx(Flex, { flexDirection: "row", alignItems: "center", justifyContent: "center", children: pagination.map((index) => (jsxRuntime.jsx(NumbersPaginationButton, { isCurrent: index === currentSlideIndex, currentPageNumber: index + 1, totalNumbers: numberOfSlides, onClick: () => onClick(index) }, `slide-${index}`))) }) }));
+    return (jsxRuntime.jsx(box.Box, { "aria-label": "Numbers Pagination", children: jsxRuntime.jsx(Flex, { flexDirection: "row", alignItems: "center", justifyContent: "center", children: pagination.map((index) => (jsxRuntime.jsx(NumbersPaginationButton, { isCurrent: index === currentSlideIndex, currentPageNumber: index + 1, totalNumbers: numberOfSlides, onClick: () => onClick(index) }, `slide-${index}`))) }) }));
 };
 
 const NavigationButton = ({ direction, onClick, fullScreen, }) => {
@@ -4618,7 +4624,7 @@ const DotsPagination = ({ currentSlideIndex, numberOfSlides, }) => {
     const pagination = Array.from({ length: numberOfSlides }, (_, i) => i);
     const recipe = react.useSlotRecipe({ key: 'carousel' });
     const styles = recipe();
-    return (jsxRuntime.jsx(react.Box, { "aria-label": "Dots Pagination", css: styles.dotsPaginationContainer, children: jsxRuntime.jsx(Flex, { flexDirection: "row", alignItems: "center", justifyContent: "center", children: pagination.map((index) => (jsxRuntime.jsx(DotsPaginationIndicator, { isCurrent: index === currentSlideIndex }, `slide-${index}`))) }) }));
+    return (jsxRuntime.jsx(box.Box, { "aria-label": "Dots Pagination", css: styles.dotsPaginationContainer, children: jsxRuntime.jsx(Flex, { flexDirection: "row", alignItems: "center", justifyContent: "center", children: pagination.map((index) => (jsxRuntime.jsx(DotsPaginationIndicator, { isCurrent: index === currentSlideIndex }, `slide-${index}`))) }) }));
 };
 
 exports.PaginationType = void 0;
@@ -4734,9 +4740,9 @@ const Carousel = (props) => {
     const carouselHeightCssVarValue = hasThumbnailPagination
         ? carouselHeightByPaginationTypeMap[exports.PaginationType.Thumbnail]
         : carouselHeightByPaginationTypeMap[paginationType];
-    return (jsxRuntime.jsxs(react.Box, { css: styles.container, children: [prerenderFallbackSlide ? (jsxRuntime.jsx(Slide, { slideIndex: startIndex, onClick: () => onClick(startIndex), totalSlides: numberOfSlides, isCurrent: startIndex === selectedIndex, fullScreen: !!fullScreen, slidesPerView: slidesPerView, children: props.fullScreen
+    return (jsxRuntime.jsxs(box.Box, { css: styles.container, children: [prerenderFallbackSlide ? (jsxRuntime.jsx(Slide, { slideIndex: startIndex, onClick: () => onClick(startIndex), totalSlides: numberOfSlides, isCurrent: startIndex === selectedIndex, fullScreen: !!fullScreen, slidesPerView: slidesPerView, children: props.fullScreen
                     ? props.children[startIndex]?.slide
-                    : props.children[startIndex] })) : (jsxRuntime.jsxs(react.Box, { ref: mainCarouselRef, "aria-label": "Carousel", "aria-roledescription": "Carousel", role: "group", className: "group", height: 'var(--carousel-height)', css: {
+                    : props.children[startIndex] })) : (jsxRuntime.jsxs(box.Box, { ref: mainCarouselRef, "aria-label": "Carousel", "aria-roledescription": "Carousel", role: "group", className: "group", height: 'var(--carousel-height)', css: {
                     ...styles.carousel,
                     '--carousel-height': carouselHeightCssVarValue,
                 }, children: [jsxRuntime.jsx(Flex, { css: styles.slideContainer, marginLeft: slidesPerView === 1 ? '0' : { base: '-md', md: '-2xl' }, children: props.children.map((slide, index) => (jsxRuntime.jsx(Slide, { slideIndex: index, onClick: () => onClick(index), totalSlides: numberOfSlides, isCurrent: index === selectedIndex, fullScreen: !!fullScreen, slidesPerView: slidesPerView, children: isFullScreenSlide(slide) ? slide.slide : slide }, `slide-${index}`))) }), canScrollPrevious ? (jsxRuntime.jsx(NavigationButton, { onClick: scrollPrev, direction: "previous", fullScreen: !!fullScreen })) : null, canScrollNext ? (jsxRuntime.jsx(NavigationButton, { onClick: scrollNext, direction: "next", fullScreen: !!fullScreen })) : null, paginationType === exports.PaginationType.Dot ? (jsxRuntime.jsx(DotsPagination, { currentSlideIndex: selectedIndex, numberOfSlides: props.children.length })) : null] })), hasThumbnailPagination ? (jsxRuntime.jsx(ThumbnailPagination, { currentSlideIndex: selectedIndex, thumbnails: props.children.map((slide) => slide.thumbnail), mainCarousel: mainCarousel, paginationCarousel: paginationCarousel, paginationCarouselRef: paginationCarouselRef })) : null, paginationType === exports.PaginationType.Number ? (jsxRuntime.jsx(NumbersPagination, { mainCarousel: mainCarousel, currentSlideIndex: selectedIndex, numberOfSlides: props.children.length })) : null] }));
@@ -4744,9 +4750,9 @@ const Carousel = (props) => {
 
 const Center = ({ children, padding }) => (jsxRuntime.jsx(react.Center, { padding: padding, children: children }));
 
-const Grid = react.Grid;
+const Grid = grid.Grid;
 Grid.displayName = 'Grid';
-const GridItem = react.GridItem;
+const GridItem = grid.GridItem;
 GridItem.displayName = 'GridItem';
 
 const HighlightedText = ({ text, highlightIndices = [], ...textProps }) => {
@@ -4897,8 +4903,9 @@ const DiscreteSlider = ({ marks, applyIndentation = true, onValueChanged, value,
                         }, children: label }, index))) })] }) }));
 };
 
-const DrawerOverlay = (props) => {
-    return jsxRuntime.jsx(react.Drawer.Backdrop, { ...props });
+const DrawerBody = (props) => {
+    const { children, ...drawerBodyProps } = props;
+    return jsxRuntime.jsx(react.Drawer.Body, { ...drawerBodyProps, children: children });
 };
 
 const DrawerContent = (props) => {
@@ -4906,9 +4913,8 @@ const DrawerContent = (props) => {
     return (jsxRuntime.jsx(react.Drawer.Positioner, { children: jsxRuntime.jsxs(react.Drawer.Content, { ...drawerContentProps, children: [withCloseButton ? (jsxRuntime.jsx(react.Drawer.CloseTrigger, { asChild: true, fontSize: "base", children: jsxRuntime.jsx(CloseIcon, {}) })) : null, children] }) }));
 };
 
-const DrawerBody = (props) => {
-    const { children, ...drawerBodyProps } = props;
-    return jsxRuntime.jsx(react.Drawer.Body, { ...drawerBodyProps, children: children });
+const DrawerOverlay = (props) => {
+    return jsxRuntime.jsx(react.Drawer.Backdrop, { ...props });
 };
 
 const Drawer = (props) => {
@@ -4921,7 +4927,7 @@ const EnergyLabel = (props) => {
     const recipe = react.useSlotRecipe({ key: 'energyLabel' });
     const [recipeProps] = recipe.splitVariantProps(props);
     const styles = recipe(recipeProps);
-    return (jsxRuntime.jsxs(Flex, { css: styles.root, children: [jsxRuntime.jsx(react.Box, { css: styles.triangle }), jsxRuntime.jsx(Flex, { css: styles.textWrapper, children: jsxRuntime.jsx(Text$1, { css: styles.text, children: efficiency.toString() }) })] }));
+    return (jsxRuntime.jsxs(Flex, { css: styles.root, children: [jsxRuntime.jsx(box.Box, { css: styles.triangle }), jsxRuntime.jsx(Flex, { css: styles.textWrapper, children: jsxRuntime.jsx(Text$1, { css: styles.text, children: efficiency.toString() }) })] }));
 };
 
 const getStaticImageSource = (image) => {
@@ -4974,7 +4980,7 @@ const BackToHomepagePrimary = (props) => {
 };
 
 const EmailChangeVerificationErrorContent = () => {
-    return (jsxRuntime.jsxs(react.Box, { width: "full", children: [jsxRuntime.jsx("p", { children: jsxRuntime.jsx(Trans, { i18nKey: "errorPage.EMAIL_CHANGE_VERIFICATION_ERROR.content.email", children: jsxRuntime.jsx("strong", {}) }) }), jsxRuntime.jsx("p", { children: jsxRuntime.jsx(Trans, { i18nKey: "errorPage.EMAIL_CHANGE_VERIFICATION_ERROR.content.workingHours", children: jsxRuntime.jsx("strong", {}) }) }), jsxRuntime.jsx("p", { children: jsxRuntime.jsx(Trans, { i18nKey: "errorPage.EMAIL_CHANGE_VERIFICATION_ERROR.content.phone", children: jsxRuntime.jsx("strong", {}) }) })] }));
+    return (jsxRuntime.jsxs(box.Box, { width: "full", children: [jsxRuntime.jsx("p", { children: jsxRuntime.jsx(Trans, { i18nKey: "errorPage.EMAIL_CHANGE_VERIFICATION_ERROR.content.email", children: jsxRuntime.jsx("strong", {}) }) }), jsxRuntime.jsx("p", { children: jsxRuntime.jsx(Trans, { i18nKey: "errorPage.EMAIL_CHANGE_VERIFICATION_ERROR.content.workingHours", children: jsxRuntime.jsx("strong", {}) }) }), jsxRuntime.jsx("p", { children: jsxRuntime.jsx(Trans, { i18nKey: "errorPage.EMAIL_CHANGE_VERIFICATION_ERROR.content.phone", children: jsxRuntime.jsx("strong", {}) }) })] }));
 };
 
 const Nonce = () => {
@@ -5508,27 +5514,27 @@ var img$3 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBo
 
 const FocusedHeader = ({ brand }) => {
     const logo = brand === Brand.AutoScout24 ? img$3 : img$4;
-    return (jsxRuntime.jsx(react.Box, { width: "full", borderBottomColor: "gray.200", borderBottomWidth: "1px", zIndex: "header", position: "relative", backgroundColor: "white", children: jsxRuntime.jsx(react.Box, { maxWidth: "container.2xl", height: menuHeightConfig, alignItems: "center", margin: "auto", display: "flex", justifyContent: "space-between", px: { base: 'sm', xs: 'lg', sm: '2xl' }, children: jsxRuntime.jsx(react.Image, { width: { sm: '124px', base: '101px' }, height: { sm: '30px', base: 'sm' }, src: logo, alt: "Platform logo" }) }) }));
+    return (jsxRuntime.jsx(box.Box, { width: "full", borderBottomColor: "gray.200", borderBottomWidth: "1px", zIndex: "header", position: "relative", backgroundColor: "white", children: jsxRuntime.jsx(box.Box, { maxWidth: "container.2xl", height: menuHeightConfig, alignItems: "center", margin: "auto", display: "flex", justifyContent: "space-between", px: { base: 'sm', xs: 'lg', sm: '2xl' }, children: jsxRuntime.jsx(react.Image, { width: { sm: '124px', base: '101px' }, height: { sm: '30px', base: 'sm' }, src: logo, alt: "Platform logo" }) }) }));
 };
 
 const FormControlSection = ({ children, errorMessage, id, label, hint, tooltip, }) => {
     const isInvalid = !!errorMessage;
-    return (jsxRuntime.jsxs(react.Field.Root, { id: id, invalid: isInvalid, children: [jsxRuntime.jsx(react.Box, { border: "1px", borderRadius: "sm", borderColor: isInvalid ? 'red.500' : 'gray.400', padding: "2xl", children: jsxRuntime.jsxs(Flex, { flexDirection: "column", children: [jsxRuntime.jsxs(react.Box, { mb: "lg", children: [jsxRuntime.jsxs(Flex, { alignItems: "center", children: [label ? (jsxRuntime.jsx(Text$1, { color: "gray.900", textStyle: "heading4", children: label })) : null, tooltip ? (jsxRuntime.jsx(Tooltip, { label: tooltip, children: jsxRuntime.jsx(InformationIcon, { ml: "md" }) })) : null] }), hint ? (jsxRuntime.jsx(Text$1, { color: "gray.900", textStyle: "body", children: hint })) : null] }), children] }) }), jsxRuntime.jsx(react.Field.ErrorText, { children: errorMessage })] }));
+    return (jsxRuntime.jsxs(react.Field.Root, { id: id, invalid: isInvalid, children: [jsxRuntime.jsx(box.Box, { border: "1px", borderRadius: "sm", borderColor: isInvalid ? 'red.500' : 'gray.400', padding: "2xl", children: jsxRuntime.jsxs(Flex, { flexDirection: "column", children: [jsxRuntime.jsxs(box.Box, { mb: "lg", children: [jsxRuntime.jsxs(Flex, { alignItems: "center", children: [label ? (jsxRuntime.jsx(Text$1, { color: "gray.900", textStyle: "heading4", children: label })) : null, tooltip ? (jsxRuntime.jsx(Tooltip, { label: tooltip, children: jsxRuntime.jsx(InformationIcon, { ml: "md" }) })) : null] }), hint ? (jsxRuntime.jsx(Text$1, { color: "gray.900", textStyle: "body", children: hint })) : null] }), children] }) }), jsxRuntime.jsx(react.Field.ErrorText, { children: errorMessage })] }));
 };
 
-const FullHeight = ({ children }) => (jsxRuntime.jsx(react.Box, { minHeight: "screen-height", height: "screen-height", children: children }));
+const FullHeight = ({ children }) => (jsxRuntime.jsx(box.Box, { minHeight: "screen-height", height: "screen-height", children: children }));
 
 const GalleryHeaderContent = ({ currentSlide, slidesCount, onClose, children }) => {
     const { t } = useI18n();
     const recipe = react.useSlotRecipe({ key: 'galleryHeader' });
     const styles = recipe();
-    return (jsxRuntime.jsx(react.Box, { css: styles.container, children: jsxRuntime.jsx(react.Box, { css: styles.grid, children: jsxRuntime.jsxs(SimpleGrid$1, { columns: {
+    return (jsxRuntime.jsx(box.Box, { css: styles.container, children: jsxRuntime.jsx(box.Box, { css: styles.grid, children: jsxRuntime.jsxs(SimpleGrid$1, { columns: {
                     base: 2,
                     md: 3,
-                }, alignItems: "center", children: [jsxRuntime.jsx(react.Box, { hideBelow: "md", children: children }), jsxRuntime.jsx(react.Box, { css: styles.countContainer, children: jsxRuntime.jsx(react.Box, { children: t('galleryHeader.imageCount', {
+                }, alignItems: "center", children: [jsxRuntime.jsx(box.Box, { hideBelow: "md", children: children }), jsxRuntime.jsx(box.Box, { css: styles.countContainer, children: jsxRuntime.jsx(box.Box, { children: t('galleryHeader.imageCount', {
                                 x: currentSlide,
                                 of: slidesCount,
-                            }) }) }), jsxRuntime.jsx(react.Box, { css: styles.closeContainer, children: jsxRuntime.jsx(Link$2, { "aria-label": "Close gallery", onClick: () => onClose(), children: jsxRuntime.jsx(CloseIcon, { color: "white" }) }) })] }) }) }));
+                            }) }) }), jsxRuntime.jsx(box.Box, { css: styles.closeContainer, children: jsxRuntime.jsx(Link$2, { "aria-label": "Close gallery", onClick: () => onClose(), children: jsxRuntime.jsx(CloseIcon, { color: "white" }) }) })] }) }) }));
 };
 
 const GalleryHeader = withTranslationProvider(['galleryHeader'])(GalleryHeaderContent);
@@ -5574,7 +5580,7 @@ const TwoColumnsLayout = (props) => {
 };
 
 const MissingImage = (props) => {
-    return (jsxRuntime.jsx(react.Box, { backgroundColor: "gray.50", ...props, display: "flex", alignItems: "center", justifyContent: "center", children: jsxRuntime.jsx(MissingImageIcon, { "data-testid": "missing-image", boxSize: "lg", color: "gray.300" }) }));
+    return (jsxRuntime.jsx(box.Box, { backgroundColor: "gray.50", ...props, display: "flex", alignItems: "center", justifyContent: "center", children: jsxRuntime.jsx(MissingImageIcon, { "data-testid": "missing-image", boxSize: "lg", color: "gray.300" }) }));
 };
 
 const VehicleReference = ({ templateColumns = { base: 'auto 1fr', md: '1fr' }, ...props }) => {
@@ -5582,13 +5588,13 @@ const VehicleReference = ({ templateColumns = { base: 'auto 1fr', md: '1fr' }, .
     const [recipeProps, componentProps] = recipe.splitVariantProps(props);
     const styles = recipe(recipeProps);
     const { image, vehicleTitle, price, sellerName, sellerAddress, callToAction, } = componentProps;
-    return (jsxRuntime.jsxs(react.Box, { as: "article", children: [jsxRuntime.jsxs(Grid, { templateColumns: templateColumns, gap: "md", children: [jsxRuntime.jsx(AspectRatio, { minW: "2xl", ratio: 4 / 3, borderRadius: "sm", overflow: "hidden", children: image ? image : jsxRuntime.jsx(MissingImage, {}) }), jsxRuntime.jsxs(Stack$1, { gap: { base: 'xs', md: 'md' }, justify: { base: 'center', md: 'space-between' }, children: [jsxRuntime.jsx(react.chakra.p, { css: styles.carTitle, children: vehicleTitle }), jsxRuntime.jsx(react.chakra.span, { css: styles.price, children: price }), jsxRuntime.jsxs(react.Box, { children: [jsxRuntime.jsx(react.chakra.p, { css: styles.dealerName, children: sellerName }), jsxRuntime.jsx(react.chakra.p, { css: styles.dealerAddress, children: sellerAddress })] })] })] }), callToAction ? (jsxRuntime.jsx(react.Box, { marginTop: { base: 'lg', md: 'sm' }, children: callToAction })) : null] }));
+    return (jsxRuntime.jsxs(box.Box, { as: "article", children: [jsxRuntime.jsxs(Grid, { templateColumns: templateColumns, gap: "md", children: [jsxRuntime.jsx(AspectRatio, { minW: "2xl", ratio: 4 / 3, borderRadius: "sm", overflow: "hidden", children: image ? image : jsxRuntime.jsx(MissingImage, {}) }), jsxRuntime.jsxs(Stack$1, { gap: { base: 'xs', md: 'md' }, justify: { base: 'center', md: 'space-between' }, children: [jsxRuntime.jsx(react.chakra.p, { css: styles.carTitle, children: vehicleTitle }), jsxRuntime.jsx(react.chakra.span, { css: styles.price, children: price }), jsxRuntime.jsxs(box.Box, { children: [jsxRuntime.jsx(react.chakra.p, { css: styles.dealerName, children: sellerName }), jsxRuntime.jsx(react.chakra.p, { css: styles.dealerAddress, children: sellerAddress })] })] })] }), callToAction ? (jsxRuntime.jsx(box.Box, { marginTop: { base: 'lg', md: 'sm' }, children: callToAction })) : null] }));
 };
 
 const LayoutWithVehicleReference = ({ title, backLink, vehicle, header, children, leftColumnSize = 8, rightColumnSize = 4, maxContentWidth = 'lg', }) => {
     const contentMargin = { marginRight: { md: '2xl' } };
-    return (jsxRuntime.jsx(TwoColumnsLayout, { header: header, backLink: backLink, title: title ? jsxRuntime.jsx(react.Box, { css: contentMargin, children: title }) : null, left: {
-            content: jsxRuntime.jsx(react.Box, { css: contentMargin, children: children }),
+    return (jsxRuntime.jsx(TwoColumnsLayout, { header: header, backLink: backLink, title: title ? jsxRuntime.jsx(box.Box, { css: contentMargin, children: title }) : null, left: {
+            content: jsxRuntime.jsx(box.Box, { css: contentMargin, children: children }),
             columns: leftColumnSize,
         }, right: {
             content: jsxRuntime.jsx(VehicleReference, { ...vehicle }),
@@ -5611,16 +5617,16 @@ const AppLayoutContent = React.forwardRef((props, ref) => {
 });
 AppLayoutContent.displayName = 'AppLayoutContent';
 
-const AppLayoutHeader = React.forwardRef((props, ref) => {
-    return jsxRuntime.jsx(GridItem, { as: "div", area: "header", ref: ref, ...props });
-});
-AppLayoutHeader.displayName = 'AppLayoutHeader';
-
 const AppLayoutFooter = React.forwardRef((props, ref) => {
     return jsxRuntime.jsx(GridItem, { as: "div", area: "footer", ref: ref, ...props });
 });
 AppLayoutFooter.displayName = 'AppLayoutFooter';
 
+const AppLayoutHeader = React.forwardRef((props, ref) => {
+    return jsxRuntime.jsx(GridItem, { as: "div", area: "header", ref: ref, ...props });
+});
+AppLayoutHeader.displayName = 'AppLayoutHeader';
+
 const SearchableListItemLabel = ({ label, isSelected, showChevron = true, highlightIndices = [], isCheckbox = false, facet, }) => {
     return (jsxRuntime.jsxs(Flex, { width: "full", justifyContent: "space-between", whiteSpace: "pre-wrap", fontWeight: isSelected && !isCheckbox ? 'bold' : undefined, color: "gray.900", cursor: "pointer", children: [jsxRuntime.jsxs(Flex, { children: [isSelected && !isCheckbox ? (jsxRuntime.jsx(CheckmarkIcon, { w: "xs", mr: "xs", color: "gray.900" })) : null, jsxRuntime.jsx(HighlightedText, { text: label, highlightIndices: highlightIndices, textAlign: "left" })] }), jsxRuntime.jsxs(Flex, { as: "span", children: [facet ? (jsxRuntime.jsx(Text$1, { as: "span", color: "gray.400", mr: showChevron ? 'lg' : undefined, ml: "sm", minW: "lg", textAlign: "right", fontWeight: "regular", children: facet })) : null, showChevron ? (jsxRuntime.jsx(ChevronRightSmallIcon, { color: "gray.500", w: "sm", h: "sm" })) : null] })] }));
 };
@@ -5766,7 +5772,7 @@ const chunkArray = ({ array, chunkSize, }) => {
 
 const MobileOnlyAccordionPanel = (props) => {
     const { children, ...rest } = props;
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Box, { hideBelow: "md", textStyle: "body-small", paddingX: "lg", ...rest, children: children }), jsxRuntime.jsx(react.Box, { hideFrom: "md", children: jsxRuntime.jsx(AccordionPanel, { ...rest, children: children }) })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(box.Box, { hideBelow: "md", textStyle: "body-small", paddingX: "lg", ...rest, children: children }), jsxRuntime.jsx(box.Box, { hideFrom: "md", children: jsxRuntime.jsx(AccordionPanel, { ...rest, children: children }) })] }));
 };
 
 const MobileOnlyAccordionItem = (props) => {
@@ -5776,7 +5782,7 @@ const MobileOnlyAccordionItem = (props) => {
 
 const MobileOnlyAccordionButton = (props) => {
     const { children, ...rest } = props;
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Box, { hideBelow: "md", textStyle: "heading5", paddingX: "lg", paddingBottom: "md", children: children }), jsxRuntime.jsx(react.Box, { hideFrom: "md", children: jsxRuntime.jsx(AccordionButton, { ...rest, children: children }) })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(box.Box, { hideBelow: "md", textStyle: "heading5", paddingX: "lg", paddingBottom: "md", children: children }), jsxRuntime.jsx(box.Box, { hideFrom: "md", children: jsxRuntime.jsx(AccordionButton, { ...rest, children: children }) })] }));
 };
 
 const FooterSections = ({ config }) => {
@@ -5812,12 +5818,12 @@ const FooterSectionGrid = ({ config }) => {
 };
 
 const FooterLanguageNavigation = () => {
-    return (jsxRuntime.jsx(Center, { children: jsxRuntime.jsxs(Stack$1, { marginTop: "md", gap: "2xl", direction: "row", separator: jsxRuntime.jsx(react.StackSeparator, { borderColor: "gray.700" }), children: [jsxRuntime.jsx(Link$2, { href: "/de", color: "white", children: jsxRuntime.jsx(Text$1, { textStyle: "body-small", children: "Deutsch" }) }), jsxRuntime.jsx(Link$2, { href: "/fr", color: "white", children: jsxRuntime.jsx(Text$1, { textStyle: "body-small", children: "Fran\u00E7ais" }) }), jsxRuntime.jsx(Link$2, { href: "/it", color: "white", children: jsxRuntime.jsx(Text$1, { textStyle: "body-small", children: "Italiano" }) }), jsxRuntime.jsx(Link$2, { href: "/en", color: "white", children: jsxRuntime.jsx(Text$1, { textStyle: "body-small", children: "English" }) })] }) }));
+    return (jsxRuntime.jsx(Center, { children: jsxRuntime.jsxs(Stack$1, { marginTop: "md", gap: "2xl", direction: "row", separator: jsxRuntime.jsx(stack.StackSeparator, { borderColor: "gray.700" }), children: [jsxRuntime.jsx(Link$2, { href: "/de", color: "white", children: jsxRuntime.jsx(Text$1, { textStyle: "body-small", children: "Deutsch" }) }), jsxRuntime.jsx(Link$2, { href: "/fr", color: "white", children: jsxRuntime.jsx(Text$1, { textStyle: "body-small", children: "Fran\u00E7ais" }) }), jsxRuntime.jsx(Link$2, { href: "/it", color: "white", children: jsxRuntime.jsx(Text$1, { textStyle: "body-small", children: "Italiano" }) }), jsxRuntime.jsx(Link$2, { href: "/en", color: "white", children: jsxRuntime.jsx(Text$1, { textStyle: "body-small", children: "English" }) })] }) }));
 };
 
 const FooterCopyright = ({ brand }) => {
     const { t } = useI18n();
-    return (jsxRuntime.jsx(react.Box, { textStyle: "body-small", textAlign: "center", opacity: "80", children: t(`footer.copyright.${brand}`, { year: new Date().getFullYear() }) }));
+    return (jsxRuntime.jsx(box.Box, { textStyle: "body-small", textAlign: "center", opacity: "80", children: t(`footer.copyright.${brand}`, { year: new Date().getFullYear() }) }));
 };
 
 class FooterConfig extends BaseConfig {
@@ -6521,7 +6527,7 @@ const footerConfig = () => ({
 });
 
 const FooterCompanies = ({ config }) => {
-    return (jsxRuntime.jsx(react.Box, { gap: { base: 'md', md: '2xl' }, marginBottom: "md", marginTop: "2xl", as: Stack$1, flexDirection: "row", justifyContent: "center", flexWrap: "wrap", children: config.companies.map((companyLink, index) => {
+    return (jsxRuntime.jsx(box.Box, { gap: { base: 'md', md: '2xl' }, marginBottom: "md", marginTop: "2xl", as: Stack$1, flexDirection: "row", justifyContent: "center", flexWrap: "wrap", children: config.companies.map((companyLink, index) => {
             return (jsxRuntime.jsx(FooterLink, { linkInstance: companyLink, bold: true }, `company-${index}`));
         }) }));
 };
@@ -6537,7 +6543,7 @@ const Footer = ({ brand, language, environment, useAbsoluteUrls, project, }) =>
         });
         return footerConfigInstance.getMappedConfig();
     }, [brand, environment, useAbsoluteUrls, project]);
-    return (jsxRuntime.jsx(TranslationProvider, { language: language, scopes: ['footer'], children: jsxRuntime.jsx("footer", { children: jsxRuntime.jsxs(react.Box, { width: "full", background: "gray.900", color: "white", paddingTop: { md: 'md' }, paddingBottom: { base: 'lg', md: '2xl' }, children: [jsxRuntime.jsx(Center, { children: jsxRuntime.jsxs(react.Container, { width: "full", maxWidth: "container.2xl", paddingX: { md: 'xs' }, children: [jsxRuntime.jsx(FooterSectionGrid, { config: config }), jsxRuntime.jsx(FooterLanguageNavigation, {}), jsxRuntime.jsx(SocialMedia, { config: config })] }) }), jsxRuntime.jsx(Separator, { orientation: "horizontal", borderColor: "gray.700" }), jsxRuntime.jsx(Center, { children: jsxRuntime.jsxs(react.Container, { width: "full", maxWidth: "container.xl", paddingX: "lg", children: [jsxRuntime.jsx(FooterCompanies, { config: config }), jsxRuntime.jsx(FooterCopyright, { brand: brand })] }) })] }) }) }));
+    return (jsxRuntime.jsx(TranslationProvider, { language: language, scopes: ['footer'], children: jsxRuntime.jsx("footer", { children: jsxRuntime.jsxs(box.Box, { width: "full", background: "gray.900", color: "white", paddingTop: { md: 'md' }, paddingBottom: { base: 'lg', md: '2xl' }, children: [jsxRuntime.jsx(Center, { children: jsxRuntime.jsxs(react.Container, { width: "full", maxWidth: "container.2xl", paddingX: { md: 'xs' }, children: [jsxRuntime.jsx(FooterSectionGrid, { config: config }), jsxRuntime.jsx(FooterLanguageNavigation, {}), jsxRuntime.jsx(SocialMedia, { config: config })] }) }), jsxRuntime.jsx(Separator, { orientation: "horizontal", borderColor: "gray.700" }), jsxRuntime.jsx(Center, { children: jsxRuntime.jsxs(react.Container, { width: "full", maxWidth: "container.xl", paddingX: "lg", children: [jsxRuntime.jsx(FooterCompanies, { config: config }), jsxRuntime.jsx(FooterCopyright, { brand: brand })] }) })] }) }) }));
 };
 
 const createTenantLabel = (managedSeller) => {
@@ -6567,7 +6573,7 @@ const TenantSelectionSelectList = ({ managedSellers, selectedTenantId, onTenantS
 
 const Spinner = ({ size }) => (jsxRuntime.jsx(react.Spinner, { size: size }));
 
-const NavigationTenantMenuLoading = () => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Box, { position: "absolute", top: "0", bottom: "0", left: "0", right: "0", bg: "gray.900", css: { opacity: 0.7 } }), jsxRuntime.jsx(react.Box, { position: "absolute", css: { top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }, children: jsxRuntime.jsx(Spinner, {}) })] }));
+const NavigationTenantMenuLoading = () => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(box.Box, { position: "absolute", top: "0", bottom: "0", left: "0", right: "0", bg: "gray.900", css: { opacity: 0.7 } }), jsxRuntime.jsx(box.Box, { position: "absolute", css: { top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }, children: jsxRuntime.jsx(Spinner, {}) })] }));
 
 const NavigationTenantMenuContent = ({ user, selectTenant, onClose, title, selectedTenantId, }) => {
     const [isLoading, setIsLoading] = React.useState(false);
@@ -6594,10 +6600,10 @@ const NavigationTenantMenu = ({ user, selectTenant }) => {
         return null;
     const selectedTenantInfo = `${selectedTenant.billingName || ''} ${selectedTenant.billingCity || ''}`.trim() ||
         selectedTenant.id.toString();
-    return (jsxRuntime.jsx(react.Box, { hideBelow: "sm", display: "flex", alignItems: "center", children: jsxRuntime.jsxs(react.Popover.Root, { positioning: { placement: 'bottom-end' }, onOpenChange: (e) => {
+    return (jsxRuntime.jsx(box.Box, { hideBelow: "sm", display: "flex", alignItems: "center", children: jsxRuntime.jsxs(react.Popover.Root, { positioning: { placement: 'bottom-end' }, onOpenChange: (e) => {
                 if (!e.open)
                     onClose();
-            }, open: open, lazyMount: true, unmountOnExit: true, children: [jsxRuntime.jsx(react.Popover.Trigger, { asChild: true, children: jsxRuntime.jsxs(react.Button, { p: "0", color: open ? 'blue.700' : 'gray.900', _hover: { color: 'blue.700' }, onClick: onToggle, display: "inline-flex", flexDirection: "row", alignItems: "center", gap: "xs", cursor: "pointer", css: { background: 'transparent' }, children: [jsxRuntime.jsx(GarageIcon, {}), jsxRuntime.jsx(react.Box, { hideBelow: "md", children: jsxRuntime.jsx(Text$1, { fontWeight: "bold", lineClamp: 1, maxW: "2xl", textAlign: "left", title: selectedTenantInfo, children: selectedTenantInfo }) }), jsxRuntime.jsx(ChevronDownSmallIcon, { transition: "transform", transitionDuration: "fast", transform: open ? 'rotate(180deg)' : 'rotate(0deg)' })] }) }), jsxRuntime.jsx(react.Portal, { children: jsxRuntime.jsx(react.Box, { zIndex: "popover", w: "full", h: "full", position: "relative", children: jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { bg: "white", boxShadow: "sm", color: "gray.900", width: {
+            }, open: open, lazyMount: true, unmountOnExit: true, children: [jsxRuntime.jsx(react.Popover.Trigger, { asChild: true, children: jsxRuntime.jsxs(react.Button, { p: "0", color: open ? 'blue.700' : 'gray.900', _hover: { color: 'blue.700' }, onClick: onToggle, display: "inline-flex", flexDirection: "row", alignItems: "center", gap: "xs", cursor: "pointer", css: { background: 'transparent' }, children: [jsxRuntime.jsx(GarageIcon, {}), jsxRuntime.jsx(box.Box, { hideBelow: "md", children: jsxRuntime.jsx(Text$1, { fontWeight: "bold", lineClamp: 1, maxW: "2xl", textAlign: "left", title: selectedTenantInfo, children: selectedTenantInfo }) }), jsxRuntime.jsx(ChevronDownSmallIcon, { transition: "transform", transitionDuration: "fast", transform: open ? 'rotate(180deg)' : 'rotate(0deg)' })] }) }), jsxRuntime.jsx(react.Portal, { children: jsxRuntime.jsx(box.Box, { zIndex: "popover", w: "full", h: "full", position: "relative", children: jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { bg: "white", boxShadow: "sm", color: "gray.900", width: {
                                     base: 'full',
                                     md: '6xl',
                                 }, css: {
@@ -6613,7 +6619,7 @@ const replaceLanguage = ({ activeLanguage, newLanguage, }) => {
 };
 
 const NavigationLanguageMenu = ({ activeLanguage, }) => {
-    return (jsxRuntime.jsx(react.Box, { hideBelow: "sm", children: jsxRuntime.jsx(Menu, { title: activeLanguage.toUpperCase(), fontWeightTitle: "bold", menuColor: "gray.900", offset: {
+    return (jsxRuntime.jsx(box.Box, { hideBelow: "sm", children: jsxRuntime.jsx(Menu, { title: activeLanguage.toUpperCase(), fontWeightTitle: "bold", menuColor: "gray.900", offset: {
                 mainAxis: 8,
                 crossAxis: 0,
             }, iconSpacing: "xs", placement: "bottom-end", items: [
@@ -6641,14 +6647,14 @@ const NavigationLanguageMenu = ({ activeLanguage, }) => {
 };
 
 const DrawerIndicator = ({ isOpen }) => {
-    return (jsxRuntime.jsx(react.Box, { hideBelow: "xs", display: "inline-flex", children: jsxRuntime.jsx(ChevronDownSmallIcon, { transition: "transform", transitionDuration: "fast", color: isOpen ? 'blue.700' : 'currentColor', transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }) }));
+    return (jsxRuntime.jsx(box.Box, { hideBelow: "xs", display: "inline-flex", children: jsxRuntime.jsx(ChevronDownSmallIcon, { transition: "transform", transitionDuration: "fast", color: isOpen ? 'blue.700' : 'currentColor', transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }) }));
 };
 
 const NavigationItem = ({ translationKey, drawerHandler, isOpen }) => {
     const { t } = useI18n();
     const recipe = react.useSlotRecipe({ key: 'link' });
     const styles = recipe({ variant: 'navigationLink' });
-    return (jsxRuntime.jsxs(react.Box, { onClick: drawerHandler, css: {
+    return (jsxRuntime.jsxs(box.Box, { onClick: drawerHandler, css: {
             ...styles.root,
         }, fontWeight: "bold", color: isOpen ? 'blue.700' : 'gray.900', _hover: { color: 'blue.700' }, position: "relative", cursor: "pointer", display: "flex", alignItems: "center", children: [t(translationKey), " ", jsxRuntime.jsx(DrawerIndicator, { isOpen: isOpen })] }));
 };
@@ -6657,11 +6663,11 @@ const NavigationLink = ({ link, title, translationKey, translationParameters = {
     const { t, language } = useI18n();
     const linkColor = color || 'gray.900';
     const hoverStyle = variant === 'navigationLink' ? { color: 'blue.700' } : undefined;
-    return (jsxRuntime.jsxs(Link$2, { href: link && link[language], variant: variant, fontWeight: fontWeight, css: { color: linkColor }, _hover: hoverStyle, onClick: onClick, display: "flex", alignItems: "center", gap: "md", children: [leftIcon, (translationKey || title) && (jsxRuntime.jsxs(react.Box, { hideBelow: hideTextBelow, children: [translationKey ? t(translationKey, translationParameters) : title, isNew ? jsxRuntime.jsx(Badge, { variant: "navigationLinkBadge", text: "New" }) : null] })), rightIcon] }));
+    return (jsxRuntime.jsxs(Link$2, { href: link && link[language], variant: variant, fontWeight: fontWeight, css: { color: linkColor }, _hover: hoverStyle, onClick: onClick, display: "flex", alignItems: "center", gap: "md", children: [leftIcon, (translationKey || title) && (jsxRuntime.jsxs(box.Box, { hideBelow: hideTextBelow, children: [translationKey ? t(translationKey, translationParameters) : title, isNew ? jsxRuntime.jsx(Badge, { variant: "navigationLinkBadge", text: "New" }) : null] })), rightIcon] }));
 };
 
 const HeaderLink = ({ link }) => {
-    return (jsxRuntime.jsx(react.Box, { hideBelow: link.showUnderMoreLinkBelow, children: jsxRuntime.jsx(NavigationLink, { ...link, fontWeight: "bold" }) }));
+    return (jsxRuntime.jsx(box.Box, { hideBelow: link.showUnderMoreLinkBelow, children: jsxRuntime.jsx(NavigationLink, { ...link, fontWeight: "bold" }) }));
 };
 
 const autoScoutVehiclesLinkConfig = {
@@ -7722,7 +7728,7 @@ const getComparisonUrl = (comparisonItemIds) => {
 };
 const ComparisonItem = ({ link, count }) => {
     const { t, language } = useI18n();
-    return (jsxRuntime.jsxs(react.chakra.a, { position: "relative", display: "block", href: link.link?.[language], onClick: link.onClick, "aria-label": t(link.translationKey ?? '', link.translationParameters), mr: "lg", children: [jsxRuntime.jsx(CompareIcon, { color: "gray.900" }), jsxRuntime.jsx(react.Box, { position: "absolute", css: { top: '-10px', right: '-15px' }, children: count > 0 ? jsxRuntime.jsx(Count, { count: count }) : null })] }));
+    return (jsxRuntime.jsxs(react.chakra.a, { position: "relative", display: "block", href: link.link?.[language], onClick: link.onClick, "aria-label": t(link.translationKey ?? '', link.translationParameters), mr: "lg", children: [jsxRuntime.jsx(CompareIcon, { color: "gray.900" }), jsxRuntime.jsx(box.Box, { position: "absolute", css: { top: '-10px', right: '-15px' }, children: count > 0 ? jsxRuntime.jsx(Count, { count: count }) : null })] }));
 };
 
 const comparisonLinkConfig = ({ comparisonItemIds, }) => {
@@ -8156,7 +8162,7 @@ const NavigationItems = ({ platform, headerLinks, drawer, isOpen, createDrawerHa
     return (jsxRuntime.jsxs(Stack$1, { direction: "row", gap: { base: 'lg', sm: '2xl' }, align: "center", children: [jsxRuntime.jsx(Link$2, { href: `/${language}`, children: jsxRuntime.jsx(react.Image, { css: {
                         width: { sm: '124px', base: '101px' },
                         height: { sm: '30px', base: 'var(--spacing-sm)' },
-                    }, src: logo, alt: "Platform logo", htmlWidth: 300, htmlHeight: 71 }) }), jsxRuntime.jsx(react.Box, { hideBelow: "sm", children: jsxRuntime.jsx(NavigationItem, { translationKey: "header.search", drawerHandler: searchDrawerHandler, isOpen: isOpen && drawer?.current === DrawerNode.Search }) }), headerLinks.map((link, index) => (jsxRuntime.jsx(HeaderLink, { link: link }, `link-${index}`))), jsxRuntime.jsx(react.Box, { display: { base: 'none', sm: 'block', lg: 'none' }, children: jsxRuntime.jsx(NavigationItem, { translationKey: "header.more", drawerHandler: moreDrawerHandler, isOpen: isOpen && drawer?.current === DrawerNode.More }) })] }));
+                    }, src: logo, alt: "Platform logo", htmlWidth: 300, htmlHeight: 71 }) }), jsxRuntime.jsx(box.Box, { hideBelow: "sm", children: jsxRuntime.jsx(NavigationItem, { translationKey: "header.search", drawerHandler: searchDrawerHandler, isOpen: isOpen && drawer?.current === DrawerNode.Search }) }), headerLinks.map((link, index) => (jsxRuntime.jsx(HeaderLink, { link: link }, `link-${index}`))), jsxRuntime.jsx(box.Box, { display: { base: 'none', sm: 'block', lg: 'none' }, children: jsxRuntime.jsx(NavigationItem, { translationKey: "header.more", drawerHandler: moreDrawerHandler, isOpen: isOpen && drawer?.current === DrawerNode.More }) })] }));
 };
 
 const NavigationAvatar = ({ user, isOpen, drawer, hasNotification, createDrawerHandler, onLogin, }) => {
@@ -8165,20 +8171,20 @@ const NavigationAvatar = ({ user, isOpen, drawer, hasNotification, createDrawerH
     const styles = recipe({ variant: 'navigationLink' });
     const { t } = useI18n();
     if (user) {
-        return (jsxRuntime.jsx(react.Box, { hideBelow: "sm", children: jsxRuntime.jsxs(react.Box, { display: "flex", flexDirection: "row", gap: "xs", cursor: "pointer", _hover: { color: 'blue.700' }, color: isDrawerOpened ? 'blue.700' : 'gray.900', onClick: createDrawerHandler({
+        return (jsxRuntime.jsx(box.Box, { hideBelow: "sm", children: jsxRuntime.jsxs(box.Box, { display: "flex", flexDirection: "row", gap: "xs", cursor: "pointer", _hover: { color: 'blue.700' }, color: isDrawerOpened ? 'blue.700' : 'gray.900', onClick: createDrawerHandler({
                     nodeName: DrawerNode.User,
-                }), alignItems: "center", children: [jsxRuntime.jsx(Avatar, { withNotification: hasNotification }), jsxRuntime.jsx(react.Box, { hideBelow: "md", children: jsxRuntime.jsx(Text$1, { fontWeight: "bold", lineClamp: 1, maxW: "2xl", title: user.email, children: user.email }) }), jsxRuntime.jsx(DrawerIndicator, { isOpen: isDrawerOpened })] }) }));
+                }), alignItems: "center", children: [jsxRuntime.jsx(Avatar, { withNotification: hasNotification }), jsxRuntime.jsx(box.Box, { hideBelow: "md", children: jsxRuntime.jsx(Text$1, { fontWeight: "bold", lineClamp: 1, maxW: "2xl", title: user.email, children: user.email }) }), jsxRuntime.jsx(DrawerIndicator, { isOpen: isDrawerOpened })] }) }));
     }
-    return (jsxRuntime.jsx(react.Box, { hideBelow: "sm", children: jsxRuntime.jsxs(react.Box, { display: "flex", flexDirection: "row", onClick: onLogin, css: {
+    return (jsxRuntime.jsx(box.Box, { hideBelow: "sm", children: jsxRuntime.jsxs(box.Box, { display: "flex", flexDirection: "row", onClick: onLogin, css: {
                 ...styles.root,
-            }, fontWeight: "bold", position: "relative", cursor: "pointer", alignItems: "center", gap: "sm", color: "gray.900", children: [jsxRuntime.jsx(react.Box, { as: Avatar, css: { marginLeft: 'xxs' } }), jsxRuntime.jsx(react.Box, { hideBelow: "md", marginRight: "xs", children: t('header.login') })] }) }));
+            }, fontWeight: "bold", position: "relative", cursor: "pointer", alignItems: "center", gap: "sm", color: "gray.900", children: [jsxRuntime.jsx(box.Box, { as: Avatar, css: { marginLeft: 'xxs' } }), jsxRuntime.jsx(box.Box, { hideBelow: "md", marginRight: "xs", children: t('header.login') })] }) }));
 };
 
 const MobileHeaderMenuToggle = ({ isOpen, createDrawerHandler, }) => {
     const mobileDrawerHandler = createDrawerHandler({
         nodeName: DrawerNode.Combined,
     });
-    return (jsxRuntime.jsx(react.Box, { hideFrom: "sm", as: "button", onClick: mobileDrawerHandler, color: isOpen ? 'blue.700' : 'gray.900', children: isOpen ? jsxRuntime.jsx(CloseIcon, {}) : jsxRuntime.jsx(HamburgerMenuIcon, {}) }));
+    return (jsxRuntime.jsx(box.Box, { hideFrom: "sm", as: "button", onClick: mobileDrawerHandler, color: isOpen ? 'blue.700' : 'gray.900', children: isOpen ? jsxRuntime.jsx(CloseIcon, {}) : jsxRuntime.jsx(HamburgerMenuIcon, {}) }));
 };
 
 const drawerHandlerFactory = ({ nodeName, drawerNodeItems, isOpen, onOpen, onClose, drawer, setDrawer, }) => {
@@ -8232,11 +8238,11 @@ const SelectedTenantInfo = ({ selectedTenant }) => (jsxRuntime.jsxs(Stack$1, { d
             }, gap: {
                 base: '0',
                 sm: 'sm',
-            }, children: [jsxRuntime.jsx(react.Box, { as: "span", textStyle: "body", fontWeight: "bold", children: selectedTenant.billingName || selectedTenant.id }), jsxRuntime.jsxs(react.Box, { as: "span", textStyle: "body", children: [selectedTenant.billingZipCode, " ", selectedTenant.billingCity] })] })] }));
+            }, children: [jsxRuntime.jsx(box.Box, { as: "span", textStyle: "body", fontWeight: "bold", children: selectedTenant.billingName || selectedTenant.id }), jsxRuntime.jsxs(box.Box, { as: "span", textStyle: "body", children: [selectedTenant.billingZipCode, " ", selectedTenant.billingCity] })] })] }));
 
 const TenantSelectionMenu = ({ user, selectedTenant, selectTenant, }) => {
     const [expandedItems, setExpandedItems] = React.useState([]);
-    return (jsxRuntime.jsx(MobileOnlyAccordion, { multiple: true, collapsible: true, value: expandedItems, onValueChange: (details) => setExpandedItems(details.value), children: jsxRuntime.jsxs(MobileOnlyAccordionItem, { value: "tenant-selection", style: { borderTop: 'none', borderBottom: '1px solid #CFCFCF' }, children: [jsxRuntime.jsx(MobileOnlyAccordionButton, { "data-testid": "tenant-selection-accordion-toggle", children: jsxRuntime.jsx(SelectedTenantInfo, { selectedTenant: selectedTenant }) }), jsxRuntime.jsx(react.Box, { as: MobileOnlyAccordionPanel, position: "relative", "data-testid": "tenant-selection-accordion-panel", children: jsxRuntime.jsx(NavigationTenantMenuContent, { user: user, onClose: () => setExpandedItems([]), selectedTenantId: selectedTenant.id, selectTenant: selectTenant }) })] }) }));
+    return (jsxRuntime.jsx(MobileOnlyAccordion, { multiple: true, collapsible: true, value: expandedItems, onValueChange: (details) => setExpandedItems(details.value), children: jsxRuntime.jsxs(MobileOnlyAccordionItem, { value: "tenant-selection", style: { borderTop: 'none', borderBottom: '1px solid #CFCFCF' }, children: [jsxRuntime.jsx(MobileOnlyAccordionButton, { "data-testid": "tenant-selection-accordion-toggle", children: jsxRuntime.jsx(SelectedTenantInfo, { selectedTenant: selectedTenant }) }), jsxRuntime.jsx(box.Box, { as: MobileOnlyAccordionPanel, position: "relative", "data-testid": "tenant-selection-accordion-panel", children: jsxRuntime.jsx(NavigationTenantMenuContent, { user: user, onClose: () => setExpandedItems([]), selectedTenantId: selectedTenant.id, selectTenant: selectTenant }) })] }) }));
 };
 
 const DrawerUserInfo = ({ user, selectTenant, showTenantSelection, }) => {
@@ -8252,9 +8258,9 @@ const DrawerUserInfo = ({ user, selectTenant, showTenantSelection, }) => {
                                 }, gap: {
                                     base: '0',
                                     md: 'sm',
-                                }, children: [jsxRuntime.jsx(react.Box, { as: "span", fontWeight: "bold", css: {
+                                }, children: [jsxRuntime.jsx(box.Box, { as: "span", fontWeight: "bold", css: {
                                             maxWidth: 'calc(100vw - 2 * var(--chakra-space-lg) - var(--chakra-space-sm) - var(--chakra-sizes-sm))',
-                                        }, children: user.email }), user.userType === auth$4.Auth0UserType.Professional ? (jsxRuntime.jsxs(react.Box, { as: "span", children: ["(", user.sellerId, ")"] })) : null] })] }), selectedTenant && showTenantSelection ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Box, { hideBelow: "md", children: jsxRuntime.jsx(SelectedTenantInfo, { selectedTenant: selectedTenant }) }), jsxRuntime.jsx(react.Box, { hideFrom: "sm", marginX: "-lg", marginBottom: "-lg", children: jsxRuntime.jsx(TenantSelectionMenu, { user: user, selectedTenant: selectedTenant, selectTenant: selectTenant }) })] })) : null] }), jsxRuntime.jsx(react.Separator, { css: {
+                                        }, children: user.email }), user.userType === auth$4.Auth0UserType.Professional ? (jsxRuntime.jsxs(box.Box, { as: "span", children: ["(", user.sellerId, ")"] })) : null] })] }), selectedTenant && showTenantSelection ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(box.Box, { hideBelow: "md", children: jsxRuntime.jsx(SelectedTenantInfo, { selectedTenant: selectedTenant }) }), jsxRuntime.jsx(box.Box, { hideFrom: "sm", marginX: "-lg", marginBottom: "-lg", children: jsxRuntime.jsx(TenantSelectionMenu, { user: user, selectedTenant: selectedTenant, selectTenant: selectTenant }) })] })) : null] }), jsxRuntime.jsx(react.Separator, { css: {
                     borderBottomWidth: selectedTenant
                         ? { base: 0, md: '1px' }
                         : { base: '1px', md: '1px' },
@@ -8267,11 +8273,11 @@ const DrawerNavigationLink = ({ item }) => {
     const hideProps = item.showUnderMoreLinkBelow
         ? { hideFrom: item.showUnderMoreLinkBelow }
         : {};
-    return (jsxRuntime.jsx(react.Box, { ...hideProps, children: jsxRuntime.jsx(List$1.Item, { paddingBottom: { base: 'lg', md: 'md' }, children: jsxRuntime.jsx(NavigationLink, { ...item, variant: "subNavigationLink", color: item.color }) }) }));
+    return (jsxRuntime.jsx(box.Box, { ...hideProps, children: jsxRuntime.jsx(List$1.Item, { paddingBottom: { base: 'lg', md: 'md' }, children: jsxRuntime.jsx(NavigationLink, { ...item, variant: "subNavigationLink", color: item.color }) }) }));
 };
 
 const NonCollapsibleSection = ({ node, }) => {
-    return (jsxRuntime.jsx(react.Box, { py: { base: '2xl', md: '0' }, px: "2xl", children: jsxRuntime.jsx(List$1.Root, { children: node.items.map((item, index) => {
+    return (jsxRuntime.jsx(box.Box, { py: { base: '2xl', md: '0' }, px: "2xl", children: jsxRuntime.jsx(List$1.Root, { children: node.items.map((item, index) => {
                 return jsxRuntime.jsx(DrawerNavigationLink, { item: item }, index);
             }) }) }));
 };
@@ -8280,7 +8286,7 @@ const CollapsibleSection = ({ node, }) => {
     if (!node.translationKey && !node.title) {
         return null;
     }
-    return (jsxRuntime.jsx(react.GridItem, { children: jsxRuntime.jsx(MobileOnlyAccordion, { multiple: true, collapsible: true, children: jsxRuntime.jsxs(MobileOnlyAccordionItem, { value: "section", border: "none", children: [jsxRuntime.jsx(MobileOnlyAccordionButton, { children: jsxRuntime.jsx(react.Box, { flex: "1", textAlign: "left", fontSize: "base", children: node.translationKey ? t(node.translationKey) : node.title }) }), jsxRuntime.jsx(MobileOnlyAccordionPanel, { pb: "0", children: jsxRuntime.jsx(react.Box, { paddingTop: { base: 'lg', md: '0' }, children: jsxRuntime.jsx(List$1.Root, { children: node.items.map((item, index) => (jsxRuntime.jsx(DrawerNavigationLink, { item: item }, index))) }) }) })] }) }) }));
+    return (jsxRuntime.jsx(react.GridItem, { children: jsxRuntime.jsx(MobileOnlyAccordion, { multiple: true, collapsible: true, children: jsxRuntime.jsxs(MobileOnlyAccordionItem, { value: "section", border: "none", children: [jsxRuntime.jsx(MobileOnlyAccordionButton, { children: jsxRuntime.jsx(box.Box, { flex: "1", textAlign: "left", fontSize: "base", children: node.translationKey ? t(node.translationKey) : node.title }) }), jsxRuntime.jsx(MobileOnlyAccordionPanel, { pb: "0", children: jsxRuntime.jsx(box.Box, { paddingTop: { base: 'lg', md: '0' }, children: jsxRuntime.jsx(List$1.Root, { children: node.items.map((item, index) => (jsxRuntime.jsx(DrawerNavigationLink, { item: item }, index))) }) }) })] }) }) }));
 };
 
 const DrawerMenu = ({ node }) => {
@@ -8391,9 +8397,9 @@ const Navigation = ({ brand, comparisonItemIds, environment, hasNotification, la
             onClose();
         }
     }, [user?.userId, onClose]);
-    return (jsxRuntime.jsxs(TranslationProvider, { language: language, scopes: ['header', 'auth.tenantSelection'], children: [jsxRuntime.jsx(react.Box, { width: "full", borderBottom: "1px", borderBottomColor: "gray.200", zIndex: "header", backgroundColor: "white", ...(isOpen
+    return (jsxRuntime.jsxs(TranslationProvider, { language: language, scopes: ['header', 'auth.tenantSelection'], children: [jsxRuntime.jsx(box.Box, { width: "full", borderBottom: "1px", borderBottomColor: "gray.200", zIndex: "header", backgroundColor: "white", ...(isOpen
                     ? { position: 'fixed', top: '0' }
-                    : { position: 'relative' }), children: jsxRuntime.jsxs(react.Box, { maxWidth: "container.2xl", css: { height: config.menuHeight }, alignItems: "center", margin: "auto", display: "flex", justifyContent: "space-between", px: { base: 'sm', xs: 'lg', sm: '2xl' }, children: [jsxRuntime.jsx(NavigationItems, { platform: brand, headerLinks: config.headerItems, drawer: drawer, isOpen: isOpen, createDrawerHandler: createDrawerHandler, language: language }), jsxRuntime.jsxs(Stack$1, { direction: "row", gap: "2xl", align: "center", children: [config.iconItems.favorites?.isVisible ? (jsxRuntime.jsx(FavoritesItem, { link: config.iconItems.favorites })) : null, config.iconItems.comparison ? (jsxRuntime.jsx(ComparisonItem, { link: config.iconItems.comparison, count: comparisonItemIds?.length ?? 0 })) : null, jsxRuntime.jsx(NavigationAvatar, { user: user, createDrawerHandler: createDrawerHandler, isOpen: isOpen, drawer: drawer, hasNotification: hasNotification, onLogin: onLogin }), showTenantSelection ? (jsxRuntime.jsx(NavigationTenantMenu, { user: user, selectTenant: selectTenant })) : null, jsxRuntime.jsx(NavigationLanguageMenu, { activeLanguage: language }), jsxRuntime.jsx(MobileHeaderMenuToggle, { isOpen: isOpen, createDrawerHandler: createDrawerHandler })] })] }) }), jsxRuntime.jsx(NavigationDrawer, { user: user, showTenantSelection: showTenantSelection, drawer: drawer, isOpen: isOpen, onClose: onClose, menuHeight: config.menuHeight, onLogin: onLogin, onLogout: onLogout, selectTenant: selectTenant })] }));
+                    : { position: 'relative' }), children: jsxRuntime.jsxs(box.Box, { maxWidth: "container.2xl", css: { height: config.menuHeight }, alignItems: "center", margin: "auto", display: "flex", justifyContent: "space-between", px: { base: 'sm', xs: 'lg', sm: '2xl' }, children: [jsxRuntime.jsx(NavigationItems, { platform: brand, headerLinks: config.headerItems, drawer: drawer, isOpen: isOpen, createDrawerHandler: createDrawerHandler, language: language }), jsxRuntime.jsxs(Stack$1, { direction: "row", gap: "2xl", align: "center", children: [config.iconItems.favorites?.isVisible ? (jsxRuntime.jsx(FavoritesItem, { link: config.iconItems.favorites })) : null, config.iconItems.comparison ? (jsxRuntime.jsx(ComparisonItem, { link: config.iconItems.comparison, count: comparisonItemIds?.length ?? 0 })) : null, jsxRuntime.jsx(NavigationAvatar, { user: user, createDrawerHandler: createDrawerHandler, isOpen: isOpen, drawer: drawer, hasNotification: hasNotification, onLogin: onLogin }), showTenantSelection ? (jsxRuntime.jsx(NavigationTenantMenu, { user: user, selectTenant: selectTenant })) : null, jsxRuntime.jsx(NavigationLanguageMenu, { activeLanguage: language }), jsxRuntime.jsx(MobileHeaderMenuToggle, { isOpen: isOpen, createDrawerHandler: createDrawerHandler })] })] }) }), jsxRuntime.jsx(NavigationDrawer, { user: user, showTenantSelection: showTenantSelection, drawer: drawer, isOpen: isOpen, onClose: onClose, menuHeight: config.menuHeight, onLogin: onLogin, onLogout: onLogout, selectTenant: selectTenant })] }));
 };
 
 const Pagination = ({ totalPages, currentPage = 0, onChange, marginBottom, marginTop, }) => {
@@ -8412,26 +8418,6 @@ const Progress = ({ current, max, label }) => {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Progress.Root, { value: validCurrent, max: validMax, "aria-label": label(validCurrent, max), children: jsxRuntime.jsx(react.Progress.Track, { children: jsxRuntime.jsx(react.Progress.Range, {}) }) }), jsxRuntime.jsxs(Stack$1, { direction: "row", gap: "xs", align: "center", marginTop: "sm", children: [isComplete && jsxRuntime.jsx(CheckmarkCircleIcon, { color: "green.400" }), jsxRuntime.jsx(Text$1, { textStyle: "body", children: label(validCurrent, max) })] })] }));
 };
 
-const Radio = React.forwardRef((props, ref) => {
-    const recipe = react.useSlotRecipe({ key: 'radio' });
-    const [recipeProps, restProps] = recipe.splitVariantProps(props);
-    const styles = recipe(recipeProps);
-    const { value, name, onChange, items, orientation = 'horizontal', children, ...rootDomProps } = restProps;
-    const renderedItems = items.map((item) => (jsxRuntime.jsxs(react.RadioGroup.Item, { value: item.value, disabled: item.disabled, invalid: item.invalid, css: styles.item, children: [jsxRuntime.jsx(react.RadioGroup.ItemControl, { css: styles.control, children: jsxRuntime.jsx(react.RadioGroup.ItemIndicator, { css: styles.indicator }) }), jsxRuntime.jsx(react.RadioGroup.ItemText, { css: styles.label, children: item.label }), jsxRuntime.jsx(react.RadioGroup.ItemHiddenInput, { ref: ref })] }, item.value)));
-    const defaultWrapped = (jsxRuntime.jsx(react.Stack, { direction: orientation === 'horizontal' ? 'row' : 'column', gap: orientation === 'horizontal' ? '2xl' : 'xxs', children: renderedItems }));
-    const content = children ? children(renderedItems) : defaultWrapped;
-    return (jsxRuntime.jsx(react.RadioGroup.Root, { name: name, value: value, onValueChange: (details) => {
-            if (!onChange)
-                return;
-            const target = {
-                value: details.value,
-                name,
-                checked: details.value === value,
-            };
-            onChange({ target });
-        }, css: styles.root, ...rootDomProps, children: content }));
-});
-
 const RadioListItem = React.forwardRef(({ children, value, ...rest }, ref) => {
     const recipe = react.useRecipe({ key: 'radioListItem' });
     const styles = recipe();
@@ -8448,7 +8434,7 @@ const RadioListItem = React.forwardRef(({ children, value, ...rest }, ref) => {
             event.stopPropagation();
         }
     };
-    return (jsxRuntime.jsx(react.RadioGroup.Item, { value: value, asChild: true, ...rest, children: jsxRuntime.jsxs(react.Box, { as: "label", css: styles, children: [jsxRuntime.jsx(react.RadioGroup.ItemHiddenInput, { ref: ref }), jsxRuntime.jsx(react.Box, { onPointerDownCapture: stopIfInteractiveTarget, onClickCapture: stopIfInteractiveTarget, children: children })] }) }));
+    return (jsxRuntime.jsx(react.RadioGroup.Item, { value: value, asChild: true, ...rest, children: jsxRuntime.jsxs(box.Box, { as: "label", css: styles, children: [jsxRuntime.jsx(react.RadioGroup.ItemHiddenInput, { ref: ref }), jsxRuntime.jsx(box.Box, { onPointerDownCapture: stopIfInteractiveTarget, onClickCapture: stopIfInteractiveTarget, children: children })] }) }));
 });
 RadioListItem.displayName = 'RadioListItem';
 
@@ -8458,7 +8444,7 @@ const RadioList = ({ name, defaultValue, options, onChange, }) => {
             onChange?.(details.value);
         }
     };
-    return (jsxRuntime.jsx(react.RadioGroup.Root, { name: name, defaultValue: defaultValue, onValueChange: handleValueChange, children: jsxRuntime.jsx(react.VStack, { gap: "0", align: "stretch", separator: jsxRuntime.jsx(react.StackSeparator, { borderColor: "gray.100" }), children: options.map((option, idx) => {
+    return (jsxRuntime.jsx(react.RadioGroup.Root, { name: name, defaultValue: defaultValue, onValueChange: handleValueChange, children: jsxRuntime.jsx(react.VStack, { gap: "0", align: "stretch", separator: jsxRuntime.jsx(stack.StackSeparator, { borderColor: "gray.100" }), children: options.map((option, idx) => {
                 // Chakra v3 RadioGroup expects item values to be strings.
                 // Since React `option.key` may be a number, we explicitly convert it to `String(key)`.
                 const value = option.key != null ? option.key.toString() : idx.toString();
@@ -8466,6 +8452,26 @@ const RadioList = ({ name, defaultValue, options, onChange, }) => {
             }) }) }));
 };
 
+const Radio = React.forwardRef((props, ref) => {
+    const recipe = react.useSlotRecipe({ key: 'radio' });
+    const [recipeProps, restProps] = recipe.splitVariantProps(props);
+    const styles = recipe(recipeProps);
+    const { value, name, onChange, items, orientation = 'horizontal', children, ...rootDomProps } = restProps;
+    const renderedItems = items.map((item) => (jsxRuntime.jsxs(react.RadioGroup.Item, { value: item.value, disabled: item.disabled, invalid: item.invalid, css: styles.item, children: [jsxRuntime.jsx(react.RadioGroup.ItemControl, { css: styles.control, children: jsxRuntime.jsx(react.RadioGroup.ItemIndicator, { css: styles.indicator }) }), jsxRuntime.jsx(react.RadioGroup.ItemText, { css: styles.label, children: item.label }), jsxRuntime.jsx(react.RadioGroup.ItemHiddenInput, { ref: ref })] }, item.value)));
+    const defaultWrapped = (jsxRuntime.jsx(react.Stack, { direction: orientation === 'horizontal' ? 'row' : 'column', gap: orientation === 'horizontal' ? '2xl' : 'xxs', children: renderedItems }));
+    const content = children ? children(renderedItems) : defaultWrapped;
+    return (jsxRuntime.jsx(react.RadioGroup.Root, { name: name, value: value, onValueChange: (details) => {
+            if (!onChange)
+                return;
+            const target = {
+                value: details.value,
+                name,
+                checked: details.value === value,
+            };
+            onChange({ target });
+        }, css: styles.root, ...rootDomProps, children: content }));
+});
+
 const Rating = ({ rating, ...props }) => {
     const percent = `calc((${rating.toString()} - 0.16) / 5 * 100%)`;
     const recipe = react.useRecipe({ key: 'rating' });
@@ -8498,7 +8504,7 @@ const Section = ({ maxImgW = '2xl', ...props }) => {
 const TabList = ({ variant, children, ...rest }) => {
     const recipe = react.useSlotRecipe({ key: 'tabs' });
     const styles = recipe({ variant });
-    return (jsxRuntime.jsx(react.Box, { overflowX: "auto", children: jsxRuntime.jsx(react.Tabs.List, { ...rest, css: styles.list, children: React.Children.map(children, (child) => React.isValidElement(child)
+    return (jsxRuntime.jsx(box.Box, { overflowX: "auto", children: jsxRuntime.jsx(react.Tabs.List, { ...rest, css: styles.list, children: React.Children.map(children, (child) => React.isValidElement(child)
                 ? React.cloneElement(child, { variant })
                 : child) }) }));
 };
@@ -8512,13 +8518,13 @@ const TabPanel = ({ variant, children, ...rest }) => {
 const TabPanels = ({ variant, children, }) => {
     const recipe = react.useSlotRecipe({ key: 'tabs' });
     const styles = recipe({ variant });
-    return (jsxRuntime.jsx(react.Box, { css: styles.contentGroup, children: React.Children.map(children, (child) => React.isValidElement(child)
+    return (jsxRuntime.jsx(box.Box, { css: styles.contentGroup, children: React.Children.map(children, (child) => React.isValidElement(child)
             ? React.cloneElement(child, { variant })
             : child) }));
 };
 
 const TenantSelectionModalLayout = ({ children }) => {
-    return (jsxRuntime.jsx(react.Box, { height: { base: 'full', sm: 'auth0-height' }, maxH: "screen-height", overflowX: "hidden", overflowY: "auto", paddingX: "2xl", paddingY: { base: '3xl', sm: '2xl' }, color: "gray.900", children: jsxRuntime.jsx(Flex, { direction: "column", alignItems: "center", gridGap: "md", minHeight: "full", children: children }) }));
+    return (jsxRuntime.jsx(box.Box, { height: { base: 'full', sm: 'auth0-height' }, maxH: "screen-height", overflowX: "hidden", overflowY: "auto", paddingX: "2xl", paddingY: { base: '3xl', sm: '2xl' }, color: "gray.900", children: jsxRuntime.jsx(Flex, { direction: "column", alignItems: "center", gridGap: "md", minHeight: "full", children: children }) }));
 };
 
 const TenantSelectionSelect = ({ tenantSelection, setTenantSelection, user, }) => {
@@ -8559,7 +8565,7 @@ const TenantSelectionOverview = ({ tenantSelection, setTenantSelection, user, se
 };
 
 const TenantSelectionLoadingState = () => {
-    return (jsxRuntime.jsx(TenantSelectionModalLayout, { children: jsxRuntime.jsx(react.Box, { margin: "auto", children: jsxRuntime.jsx(Spinner, {}) }) }));
+    return (jsxRuntime.jsx(TenantSelectionModalLayout, { children: jsxRuntime.jsx(box.Box, { margin: "auto", children: jsxRuntime.jsx(Spinner, {}) }) }));
 };
 
 const TenantSelectionContainer = ({ language, children }) => (jsxRuntime.jsx(TranslationProvider, { language: language, scopes: ['auth.tenantSelection'], children: jsxRuntime.jsx(Dialog, { open: true, onOpenChange: () => { }, motionPreset: "none", size: "auth0", overlayColor: "gray", disableBodyPadding: true, children: children }) }));
@@ -8610,7 +8616,7 @@ const MarkedText = ({ children, ...props }) => {
     const [recipeProps, boxProps] = recipe.splitVariantProps(props);
     const styles = recipe(recipeProps);
     const { variant, highlightColor } = props;
-    return (jsxRuntime.jsxs(react.Box, { css: styles.container, ...boxProps, children: [jsxRuntime.jsx(MarkedTextMark, { variant: variant, highlightColor: highlightColor }), jsxRuntime.jsx(react.Box, { css: styles.text, children: children })] }));
+    return (jsxRuntime.jsxs(box.Box, { css: styles.container, ...boxProps, children: [jsxRuntime.jsx(MarkedTextMark, { variant: variant, highlightColor: highlightColor }), jsxRuntime.jsx(box.Box, { css: styles.text, children: children })] }));
 };
 
 const Textarea = React.forwardRef(({ ...props }, ref) => {