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

package/dist/cjs/index.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 var react = require('@chakra-ui/react');
@@ -456,17 +457,6 @@ 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);
@@ -495,6 +485,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
@@ -4453,6 +4454,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 +4493,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';
@@ -4897,8 +4898,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 +4908,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) => {
@@ -5508,7 +5509,7 @@ 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: getStaticImageSource(logo), alt: "Platform logo" }) }) }));
+    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" }) }) }));
 };
 
 const FormControlSection = ({ children, errorMessage, id, label, hint, tooltip, }) => {
@@ -5611,16 +5612,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] })] }));
 };
@@ -5801,7 +5802,7 @@ var img$1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARAAAABQCAMAAADm+9r/A
 
 const FooterApps = ({ config }) => {
     const { t } = useI18n();
-    return (jsxRuntime.jsx(GridItem, { children: jsxRuntime.jsxs(Stack$1, { paddingY: { base: '2xl', md: 'md' }, paddingX: { base: 'md', md: '0' }, gap: "md", children: [jsxRuntime.jsx(Text$1, { textStyle: "heading5", children: t('footer.apps.title') }), jsxRuntime.jsxs(Root$2, { children: [jsxRuntime.jsx(Item, { display: "flex", alignItems: "center", children: jsxRuntime.jsx(FooterLink, { linkInstance: config.apps.android[0], children: jsxRuntime.jsx(react.Image, { src: getStaticImageSource(img$2), alt: 'Googleplay Icon', width: "3xl", height: "auto", loading: "lazy" }) }) }), jsxRuntime.jsx(Item, { display: "flex", alignItems: "center", mt: "md", children: jsxRuntime.jsx(FooterLink, { linkInstance: config.apps.apple[0], children: jsxRuntime.jsx(react.Image, { src: getStaticImageSource(img$1), alt: 'Appstore Icon', width: "3xl", height: "auto", loading: "lazy" }) }) })] })] }) }));
+    return (jsxRuntime.jsx(GridItem, { children: jsxRuntime.jsxs(Stack$1, { paddingY: { base: '2xl', md: 'md' }, paddingX: { base: 'md', md: '0' }, gap: "md", children: [jsxRuntime.jsx(Text$1, { textStyle: "heading5", children: t('footer.apps.title') }), jsxRuntime.jsxs(Root$2, { children: [jsxRuntime.jsx(Item, { display: "flex", alignItems: "center", children: jsxRuntime.jsx(FooterLink, { linkInstance: config.apps.android[0], children: jsxRuntime.jsx(react.Image, { src: getStaticImageSource(img$2), alt: 'Googleplay Icon', width: "3xl", height: "auto", loading: "lazy" }) }) }), jsxRuntime.jsx(Item, { display: "flex", alignItems: "center", mt: "md", children: jsxRuntime.jsx(FooterLink, { linkInstance: config.apps.apple[0], children: jsxRuntime.jsx(react.Image, { src: getStaticImageSource(img$1), alt: 'Appsore Icon', width: "3xl", height: "auto", loading: "lazy" }) }) })] })] }) }));
 };
 
 const FooterSectionGrid = ({ config }) => {
@@ -8156,7 +8157,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: getStaticImageSource(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(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 }) })] }));
 };
 
 const NavigationAvatar = ({ user, isOpen, drawer, hasNotification, createDrawerHandler, onLogin, }) => {
@@ -8412,26 +8413,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();
@@ -8466,6 +8447,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' });