@wayke-se/components-react 3.5.3 → 3.6.0-beta.1

package/dist-web/index.js

@@ -66,6 +66,14 @@ const theme = {
         Lg: '@media (min-width: 1200px)',
         LtLg: '@media (max-width: 1199px)',
     },
+    mask: {
+        gradient: {
+            toTop: 'linear-gradient(to top, #000, transparent)',
+            toBottom: 'linear-gradient(to bottom, #000, transparent)',
+            toLeft: 'linear-gradient(to left, #000, transparent)',
+            toRight: 'linear-gradient(to right, #000, transparent)',
+        },
+    },
     distances: {
         baseUnit: '8px',
         inputHeight: '48px',
@@ -650,6 +658,8 @@ const IconExclamationCircle = ({ block }) => (createElement(Icon$1, { viewBox: "
     createElement("path", { d: "M14.482 21.893c0-0.857 0.694-1.551 1.551-1.551s1.551 0.694 1.551 1.551c0 0.857-0.694 1.551-1.551 1.551s-1.551-0.694-1.551-1.551zM16.033 2.838c-7.271 0-13.187 5.916-13.187 13.187s5.916 13.187 13.187 13.187 13.187-5.916 13.187-13.187c0-7.271-5.916-13.187-13.187-13.187zM16.033 27.203c-6.163 0-11.178-5.015-11.178-11.178s5.015-11.178 11.178-11.178c6.164 0 11.178 5.015 11.178 11.178s-5.014 11.178-11.178 11.178zM16.033 8.308c-0.555 0-1.004 0.45-1.004 1.004v8.227c0 0.555 0.45 1.004 1.004 1.004s1.004-0.45 1.004-1.004v-8.227c0-0.555-0.45-1.004-1.004-1.004z" })));
 const IconExclamationTriangle = ({ block }) => (createElement(Icon$1, { viewBox: "0 0 32 32", block: block },
     createElement("path", { d: "M15.951 19.663c-0.457 0-0.828-0.37-0.828-0.828v-4.357c0-0.457 0.37-0.828 0.828-0.828s0.828 0.37 0.828 0.828v4.357c0 0.457-0.371 0.828-0.828 0.828zM15.952 22.906c-0.305 0-0.606-0.126-0.821-0.341s-0.338-0.514-0.338-0.818 0.122-0.606 0.338-0.821c0.431-0.43 1.209-0.43 1.639 0 0.215 0.215 0.341 0.516 0.341 0.821s-0.126 0.603-0.341 0.818c-0.215 0.215-0.513 0.341-0.818 0.341zM27.049 27.070h-22.196c-0.352 0-0.677-0.186-0.855-0.489s-0.184-0.677-0.014-0.985l11.098-20.105c0.175-0.317 0.508-0.513 0.87-0.513s0.695 0.197 0.87 0.513l11.098 20.105c0.17 0.308 0.165 0.683-0.014 0.985s-0.504 0.489-0.856 0.489zM6.536 25.083h18.83l-9.415-17.056-9.415 17.056z" })));
+const IconImage = ({ block }) => (createElement(Icon$1, { viewBox: "0 0 16 16", block: block },
+    createElement("path", { d: "M14.4 1.6H1.6C.7 1.6 0 2.3 0 3.2v9.6c0 .9.7 1.6 1.6 1.6h12.8c.9 0 1.6-.7 1.6-1.6V3.2c0-.9-.7-1.6-1.6-1.6zm0 11.2H1.6V3.2h12.8v9.6zM3.2 6c0-.7.5-1.2 1.2-1.2s1.2.5 1.2 1.2-.5 1.2-1.2 1.2S3.2 6.7 3.2 6zm.2 4.5l6.2-4.4c.4-.3.9-.2 1.1.2v.1l2.4 4.2c.1.2 0 .4-.1.5-.1 0-.1.1-.2.1H3.7c-.2 0-.4-.2-.4-.4 0-.1 0-.3.1-.3z", fillRule: "evenodd", clipRule: "evenodd" })));
 
 const SortSelect = ({ value, options, onChange, unit }) => (React__default.createElement(Wrapper$4, null,
     React__default.createElement(Select, { value: value, onChange: onChange, title: "Sortering", "aria-label": "Sortering" }, options.map((option) => (React__default.createElement(Option, { key: option.value, value: option.value },
@@ -2821,6 +2831,76 @@ const SliderWrapper = styled.div `
     bottom: 0;
     left: 0;
     right: 0;
+    user-select: none;
+    touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+
+    .slick-list,
+    .slick-track {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  .slick-list {
+    position: relative;
+    display: block;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+
+    &:focus {
+      outline: none;
+    }
+
+    &.dragging {
+      cursor: pointer;
+      cursor: hand;
+    }
+  }
+
+  .slick-track {
+    position: relative;
+    top: 0;
+    left: 0;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+
+    &::before,
+    &::after {
+      content: '';
+      display: table;
+    }
+
+    &::after {
+      clear: both;
+    }
+  }
+
+  .slick-slide {
+    display: none;
+    float: left;
+    min-height: 1px;
+  }
+
+  .slick-loading {
+    .slick-track {
+      visibility: hidden;
+    }
+
+    img {
+      display: none;
+    }
+  }
+
+  .slick-initialized {
+    .slick-slide {
+      display: block;
+    }
+  }
+
+  .slick-slide.dragging img {
+    pointer-events: none;
   }
 
   ${(props) => props.theme.breakpoint.LtMd} {
@@ -2833,7 +2913,6 @@ const SliderWrapper = styled.div `
 
     .slick-slide {
       border-right: ${size(1)} solid ${(props) => props.theme.color.bg};
-      //transform: scale(0.95);
       transform-origin: 0 50%;
       transition: transform 150ms ease;
     }
@@ -2871,47 +2950,10 @@ const ImageFull = styled.img `
   object-fit: cover;
 `;
 // Arrow Nav
-const Arrow = styled(ButtonReset) `
+const Arrow = styled.div `
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: ${size(4)};
-  height: ${size(4)};
-  border-radius: 50%;
-  font-size: 1rem;
-  line-height: 1;
-  background-color: rgba(255, 255, 255, 0.4);
-  backdrop-filter: blur(5px);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  color: ${(props) => props.theme.color.textDark};
-  transform-origin: 50% 50%;
-  transition: transform 200ms ease;
-
-  :before {
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    border-radius: 50%;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-    opacity: 0;
-    transition: opacity 200ms ease;
-  }
-
-  :hover {
-    :before {
-      opacity: 1;
-    }
-  }
-
-  :active {
-    transform: translateY(-50%) scale(0.95);
-  }
 
   ${(props) => props.theme.breakpoint.LtSm} {
     display: none;
@@ -3014,6 +3056,46 @@ const EnableNavigationButton = styled.div `
   z-index: 1;
 `;
 
+const NavButton = styled(ButtonReset) `
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${size(4)};
+  height: ${size(4)};
+  border-radius: 50%;
+  background-color: ${(props) => props.theme.color.bg};
+  color: ${(props) => props.theme.color.textDark};
+  font-size: 0.75rem;
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
+  transition: transform 200ms ease;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border-radius: 50%;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+    opacity: 0;
+    transition: opacity 200ms ease;
+  }
+
+  &:enabled {
+    &:hover {
+      &::before {
+        opacity: 1;
+      }
+    }
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+`;
+
 const Wrapper$h = styled.div `
   position: fixed;
   top: 0;
@@ -4020,10 +4102,12 @@ const Gallery = ({ media, placeholderImage }) => {
                         React__default.createElement(ButtonSecondary, { onClick: onEnableNavigation, title: "St\u00E4ng" },
                             React__default.createElement(ButtonContent, null, "St\u00E4ng"))))),
                 !navigationDisabled && mediaLength > 1 && (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(ArrowLeft, { onClick: prevImage, title: "F\u00F6reg\u00E5ende bild" },
-                        React__default.createElement(IconChevronLeft, { block: true })),
-                    React__default.createElement(ArrowRight, { onClick: nextImage, title: "N\u00E4sta bild" },
-                        React__default.createElement(IconChevronRight, { block: true }))))),
+                    React__default.createElement(ArrowLeft, null,
+                        React__default.createElement(NavButton, { onClick: prevImage, title: "F\u00F6reg\u00E5ende bild" },
+                            React__default.createElement(IconChevronLeft, { block: true }))),
+                    React__default.createElement(ArrowRight, null,
+                        React__default.createElement(NavButton, { onClick: nextImage, title: "N\u00E4sta bild" },
+                            React__default.createElement(IconChevronRight, { block: true })))))),
             React__default.createElement(Alt, null,
                 React__default.createElement(QuickNav, { ref: quickNavRef }, !!media?.length ? (media.map((m, i) => {
                     const src = m.files[0].formats.filter(notEmpty).find((x) => x.format === '225x150')?.url ||
@@ -4149,6 +4233,24 @@ const SEARCH_ITEM_QUERY = gql `
         phonenumber
         avatar
       }
+      accessories {
+        articleNumber
+        description
+        excerpt
+        id
+        images
+        logotype
+        manufacturer
+        model
+        name
+        price
+        assemblyPrice
+        productPage {
+          title
+          url
+        }
+        salePrice
+      }
       manufacturer {
         description
         logotype
@@ -5826,69 +5928,200 @@ const SectionHeader = ({ children, onClick, actionTitle }) => (React__default.cr
         React__default.createElement(ButtonClear, { as: "a", href: "#", onClick: onClick },
             React__default.createElement(ButtonContent, null, actionTitle))))));
 
-const OverflowGrid = styled.div `
-  ${(props) => props.theme.breakpoint.LtMd} {
-    ${Wrapper} & {
-      margin-left: ${size(-3)};
-      margin-right: ${size(-2)};
-    }
+const Wrapper$v = styled.div `
+  --container-gutter: ${size(2)};
+  --bg: ${(props) => props.theme.color.bg};
+
+  ${(props) => props.theme.breakpoint.Sm} {
+    --container-gutter: ${size(3)};
   }
 
+  position: relative;
+
+  ${({ $accentBg }) => $accentBg &&
+    css `
+      --bg: ${(props) => props.theme.color.accent};
+    `}
+`;
+const Item$b = styled.li `
+  flex: 1 0 auto;
+  width: 100%;
+  max-width: 100%;
+  scroll-snap-align: start;
+
   ${(props) => props.theme.breakpoint.LtSm} {
-    ${Wrapper} & {
-      margin-left: ${size(-2)};
-      margin-right: ${size(-1)};
+    &:is(:only-child, #important) {
+      width: 100%;
+      max-width: 100%;
     }
   }
 `;
-const OverflowGridList = styled.ul `
+const List$9 = styled.ul `
   display: flex;
-  align-items: flex-start;
+  align-items: stretch;
   list-style: none;
-  padding: 0;
-  margin: ${size(-1)};
+  padding: 0 var(--container-gutter);
+  margin: 0;
+  overflow: auto;
+  scroll-snap-type: x mandatory;
+  scroll-padding-left: var(--container-gutter);
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 
-  ${(props) => props.theme.breakpoint.LtMd} {
-    ${Wrapper} & {
-      overflow: auto;
-      -webkit-overflow-scrolling: touch;
-      padding: 0 ${size(3)};
+  &::-webkit-scrollbar {
+    display: none;
+  }
 
-      :after {
-        content: '';
-        flex: 0 0 auto;
-        height: 1px;
-        width: ${size(2)};
+  ${({ $columns }) => $columns &&
+    css `
+      ${Item$b} {
+        width: ${100 / $columns}%;
+        max-width: ${100 / $columns}%;
       }
-    }
-  }
+    `}
 
-  ${(props) => props.theme.breakpoint.LtSm} {
-    ${Wrapper} & {
-      padding: 0 ${size(2)};
+  ${({ $columnsSm }) => $columnsSm &&
+    css `
+      ${(props) => props.theme.breakpoint.Sm} {
+        ${Item$b} {
+          width: ${100 / $columnsSm}%;
+          max-width: ${100 / $columnsSm}%;
+        }
+      }
+    `}
 
-      :after {
-        width: ${size(1)};
+  ${({ $columnsMd }) => $columnsMd &&
+    css `
+      ${(props) => props.theme.breakpoint.Md} {
+        ${Item$b} {
+          width: ${100 / $columnsMd}%;
+          max-width: ${100 / $columnsMd}%;
+        }
       }
-    }
-  }
+    `}
 `;
-const OverflowGridItem = styled.li `
-  flex: 1 0 auto;
-  width: calc(100% - ${size(2)});
-  max-width: calc(100% - ${size(2)});
-  padding: ${size(1)};
+const ListWrapper = styled.div `
+  position: relative;
+  overflow: hidden;
+  margin: 0 calc(var(--container-gutter) * -1);
 
-  ${(props) => props.theme.breakpoint.Sm} {
-    width: calc(50% - ${size(3)});
-    max-width: calc(50% - ${size(3)});
+  ${(props) => props.theme.breakpoint.Md} {
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: var(--container-gutter);
+      background-color: var(--bg);
+      z-index: 1;
+    }
+
+    &::before {
+      left: 0;
+
+      ${({ $spacing }) => $spacing
+    ? css `
+              mask-image: linear-gradient(to right, #000 ${size($spacing)}, transparent);
+            `
+    : css `
+              mask-image: ${(props) => props.theme.mask.gradient.toRight};
+            `}
+    }
+
+    &::after {
+      right: 0;
+
+      ${({ $spacing }) => $spacing
+    ? css `
+              mask-image: linear-gradient(to left, #000 ${size($spacing)}, transparent);
+            `
+    : css `
+              mask-image: ${(props) => props.theme.mask.gradient.toLeft};
+            `}
+    }
   }
 
-  ${(props) => props.theme.breakpoint.Md} {
-    width: 33.333%;
-    max-width: 33.333%;
+  ${({ $spacing }) => $spacing &&
+    css `
+      ${List$9} {
+        margin: 0 -${size($spacing / 2)};
+      }
+
+      ${Item$b} {
+        padding: 0 ${size($spacing / 2)};
+      }
+    `}
+`;
+const NavBtn = styled.div `
+  position: absolute;
+  top: 50%;
+  z-index: 2;
+
+  ${(props) => props.theme.breakpoint.LtSm} {
+    display: none;
   }
 `;
+const PrevBtn = styled(NavBtn) `
+  left: 0;
+  transform: translate(-50%, -50%);
+`;
+const NextBtn = styled(NavBtn) `
+  right: 0;
+  transform: translate(50%, -50%);
+`;
+
+const OverflowGrid = ({ items, itemKeyBase, spacing, columns, columnsSm, columnsMd, accentBg, }) => {
+    const overflowElement = useRef(null);
+    const onPrev = useCallback(() => {
+        const itemWidth = overflowElement.current?.children[0].clientWidth || 0;
+        const scrollLeft = overflowElement.current?.scrollLeft || 0;
+        if (scrollLeft > 0) {
+            overflowElement.current?.scroll({
+                left: scrollLeft - itemWidth,
+                behavior: 'smooth',
+            });
+        }
+    }, []);
+    const onNext = useCallback(() => {
+        const itemWidth = overflowElement.current?.children[0].clientWidth || 0;
+        const scrollWidth = overflowElement.current?.scrollWidth || 0;
+        const scrollLeft = overflowElement.current?.scrollLeft || 0;
+        const overflowElementWidth = overflowElement.current?.offsetWidth || 0;
+        const overflowElementScrollWidth = scrollWidth - overflowElementWidth;
+        if (overflowElementScrollWidth !== scrollLeft) {
+            overflowElement.current?.scroll({
+                left: scrollLeft + itemWidth,
+                behavior: 'smooth',
+            });
+        }
+    }, []);
+    // Hide navigation buttons depending on scroll position
+    const [hidePrevNav, setHidePrevNav] = useState(true);
+    const [hideNextNav, setHideNextNav] = useState(true);
+    const onScroll = () => {
+        const scrollLeft = overflowElement.current?.scrollLeft || 0;
+        const scrollWidth = overflowElement.current?.scrollWidth || 0;
+        const overflowElementWidth = overflowElement.current?.offsetWidth || 0;
+        const overflowElementScrollWidth = scrollWidth - overflowElementWidth;
+        setHidePrevNav(scrollLeft == 0 ? true : false);
+        setHideNextNav(overflowElementScrollWidth == scrollLeft ? true : false);
+    };
+    useEffect(() => {
+        onScroll();
+        overflowElement.current?.addEventListener('scroll', onScroll);
+        return () => overflowElement.current?.removeEventListener('scroll', onScroll);
+    }, []);
+    return (React__default.createElement(Wrapper$v, { "$accentBg": accentBg },
+        React__default.createElement(ListWrapper, { "$spacing": spacing },
+            React__default.createElement(List$9, { ref: overflowElement, "$columns": columns, "$columnsSm": columnsSm, "$columnsMd": columnsMd }, items.map((item, i) => (React__default.createElement(Item$b, { key: itemKeyBase ? `${itemKeyBase}-${i}` : `overflow-grid-item-${i}` }, item))))),
+        !hidePrevNav && (React__default.createElement(PrevBtn, null,
+            React__default.createElement(NavButton, { onClick: onPrev, title: "Previous" },
+                React__default.createElement(IconChevronLeft, null)))),
+        !hideNextNav && (React__default.createElement(NextBtn, null,
+            React__default.createElement(NavButton, { onClick: onNext, title: "Next" },
+                React__default.createElement(IconChevronRight, null))))));
+};
 
 const RelatedSearchContext = createContext({
     moreLikeThisUrl: false,
@@ -5946,8 +6179,7 @@ const Related = ({ id, hashRoute, pathRoute, authorizedReseller, displayBranchNa
                 React__default.createElement(SectionHeader, { onClick: () => { }, actionTitle: "Visa alla" },
                     React__default.createElement(H2, { noMargin: true }, "Senast inkomna")))),
             React__default.createElement(Repeat, null,
-                React__default.createElement(OverflowGrid, null,
-                    React__default.createElement(OverflowGridList, null, response?.documentList.documents.map((document) => {
+                React__default.createElement(OverflowGrid, { accentBg: true, columns: 1.05, columnsSm: 2.1, columnsMd: 3, spacing: 2, items: response?.documentList.documents.map((document) => {
                         const prefix = pathRoute ? `/${pathRoute}` : '/';
                         const r = regexPathGuid();
                         const pathRouteUrl = window.location.pathname === '/'
@@ -5955,28 +6187,27 @@ const Related = ({ id, hashRoute, pathRoute, authorizedReseller, displayBranchNa
                             : r.test(`${pathRoute}${id}`)
                                 ? window.location.pathname.replace(r, document._id)
                                 : `${window.location.pathname}${prefix}${document._id}`;
-                        return (React__default.createElement(OverflowGridItem, { key: document._id },
-                            React__default.createElement(ProductCard, { id: document._id, onClick: onItemClicked, title: document.title, href: pathRoute ? pathRouteUrl : hashRoute ? `#${document._id}` : undefined, image: document.featuredImage?.files?.[0]?.url, description: document.shortDescription, branchName: displayBranchName ? document.branches?.[0]?.name : undefined, uspList: [
-                                    {
-                                        title: document.modelYear,
-                                    },
-                                    {
-                                        title: `${numberSeparator(document.mileage)} mil`,
-                                    },
-                                    {
-                                        title: document.gearboxType,
-                                    },
-                                    {
-                                        title: document.fuelType,
-                                    },
-                                ], price: `${numberSeparator(document.price)} kr`, oldPrice: document.oldPrice !== undefined && document.price < document.oldPrice
-                                    ? `${numberSeparator(document.oldPrice)} kr`
-                                    : undefined, leasingPrice: document.leasingPrice !== undefined
-                                    ? `${numberSeparator(document.leasingPrice)} kr/mån`
-                                    : undefined, businessLeasingPrice: document.businessLeasingPrice !== undefined
-                                    ? `${numberSeparator(document.businessLeasingPrice)} kr/mån`
-                                    : undefined, pathRoute: pathRoute })));
-                    })))))));
+                        return (React__default.createElement(ProductCard, { key: document._id, id: document._id, onClick: onItemClicked, title: document.title, href: pathRoute ? pathRouteUrl : hashRoute ? `#${document._id}` : undefined, image: document.featuredImage?.files?.[0]?.url, description: document.shortDescription, branchName: displayBranchName ? document.branches?.[0]?.name : undefined, uspList: [
+                                {
+                                    title: document.modelYear,
+                                },
+                                {
+                                    title: `${numberSeparator(document.mileage)} mil`,
+                                },
+                                {
+                                    title: document.gearboxType,
+                                },
+                                {
+                                    title: document.fuelType,
+                                },
+                            ], price: `${numberSeparator(document.price)} kr`, oldPrice: document.oldPrice !== undefined && document.price < document.oldPrice
+                                ? `${numberSeparator(document.oldPrice)} kr`
+                                : undefined, leasingPrice: document.leasingPrice !== undefined
+                                ? `${numberSeparator(document.leasingPrice)} kr/mån`
+                                : undefined, businessLeasingPrice: document.businessLeasingPrice !== undefined
+                                ? `${numberSeparator(document.businessLeasingPrice)} kr/mån`
+                                : undefined, pathRoute: pathRoute }));
+                    }) })))));
 };
 
 const PackageOptions = ({ packageOptions }) => {
@@ -6019,7 +6250,7 @@ const getBg = (severity) => {
     }
     return bg;
 };
-const Wrapper$v = styled.div.attrs(() => ({
+const Wrapper$w = styled.div.attrs(() => ({
     className: 'wayke__theme wayke__font--bold',
 })) `
   display: inline-block;
@@ -6031,7 +6262,7 @@ const Wrapper$v = styled.div.attrs(() => ({
   line-height: 1.2;
 `;
 
-const Badge = ({ label, severity }) => React__default.createElement(Wrapper$v, { severity: severity }, label);
+const Badge = ({ label, severity }) => React__default.createElement(Wrapper$w, { severity: severity }, label);
 
 const KeyOrder = [
     'monday',
@@ -6139,7 +6370,7 @@ const SettingsContext = createContext({});
 
 const useSettings = () => useContext(SettingsContext);
 
-const Wrapper$w = styled.a `
+const Wrapper$x = styled.a `
   display: block;
 `;
 const Image$3 = styled.img `
@@ -6178,7 +6409,7 @@ const StaticMap = ({ position }) => {
     }
     const { latitude, longitude } = position;
     if (visible && googleMapsApiKey) {
-        return (React__default.createElement(Wrapper$w, { href: `http://maps.google.com/maps?q=${latitude},${longitude}`, title: "Visa p\u00E5 Google Maps", target: "_blank", rel: "nofollow noopener noreferrer" },
+        return (React__default.createElement(Wrapper$x, { href: `http://maps.google.com/maps?q=${latitude},${longitude}`, title: "Visa p\u00E5 Google Maps", target: "_blank", rel: "nofollow noopener noreferrer" },
             React__default.createElement(Image$3, { src: `https://maps.googleapis.com/maps/api/staticmap?center=${latitude},${longitude}&zoom=10&size=640x280&maptype=roadmap&markers=${googleMapsMarker ? `icon:${encodeURIComponent(googleMapsMarker)}` : ''}%7C${latitude},${longitude}&key=${googleMapsApiKey}`, alt: "Karta" })));
     }
     return (React__default.createElement(Placeholder, { href: `http://maps.google.com/maps?q=${latitude},${longitude}`, target: "_blank", rel: "noopener noreferrer nofollow", onClick: onShowMap },
@@ -6245,6 +6476,24 @@ const SEARCH_ITEM_BRANCH_QUERY = gql `
         phonenumber
         avatar
       }
+      accessories {
+        articleNumber
+        description
+        excerpt
+        id
+        images
+        logotype
+        manufacturer
+        model
+        name
+        price
+        assemblyPrice
+        productPage {
+          title
+          url
+        }
+        salePrice
+      }
       branch {
         connections {
           id
@@ -7015,7 +7264,7 @@ const MetadataItem = ({ name, hint, value, unit }) => {
             React__default.createElement(Content$2, { dangerouslySetInnerHTML: { __html: hint } })))));
 };
 
-const Wrapper$x = styled.div `
+const Wrapper$y = styled.div `
   overflow: hidden;
   margin-top: ${size(-1)};
   margin-left: ${size(-1)};
@@ -7026,7 +7275,7 @@ const Wrapper$x = styled.div `
     margin-right: ${size(-2)};
   }
 `;
-const List$9 = styled.ul `
+const List$a = styled.ul `
   list-style: none;
   padding: 0;
   margin: 0;
@@ -7040,7 +7289,7 @@ const List$9 = styled.ul `
     padding-right: ${size(1)};
   }
 `;
-const Item$b = styled.li `
+const Item$c = styled.li `
   display: inline-block;
   vertical-align: bottom;
   font-size: 1rem;
@@ -7081,8 +7330,8 @@ const Action$8 = styled(ButtonReset).attrs(() => ({
     `}
 `;
 
-const Tabs = ({ tabs, active, onClick }) => (createElement(Wrapper$x, null,
-    createElement(List$9, null, tabs.map((tab) => (createElement(Item$b, { key: tab.name },
+const Tabs = ({ tabs, active, onClick }) => (createElement(Wrapper$y, null,
+    createElement(List$a, null, tabs.map((tab) => (createElement(Item$c, { key: tab.name },
         createElement(Action$8, { title: tab.displayName, onClick: onClick ? () => onClick(tab.name) : undefined, active: tab.name === active ? 'true' : undefined }, tab.displayName)))))));
 
 const MetadataSubCategory = ({ name, properties }) => (React__default.createElement(Repeat, null,
@@ -7139,7 +7388,7 @@ const PdfListItem = styled.li.attrs(() => ({
     flex: 0 0 100%;
   }
 `;
-const List$a = styled.ul `
+const List$b = styled.ul `
   list-style: none;
   padding: 0;
   display: flex;
@@ -7167,7 +7416,7 @@ const PdfSubtitle = styled.div `
   color: ${(props) => props.theme.color.textDarkLighten};
 `;
 const PdfColumn = styled.div `
-  flex 0 0 auto;
+  flex: 0 0 auto;
   &:first-child {
     flex: 1 1 auto;
   }
@@ -7202,7 +7451,7 @@ const PdfDownloadItem = ({ document }) => {
             React__default.createElement(PdfColumn, null,
                 React__default.createElement(PdfLink, { href: document.url, rel: "noopener noreferrer nofollow", target: "_blank" }, "\u00D6ppna")))));
 };
-const DocumentList = ({ documents }) => (React__default.createElement(List$a, null, documents.map((document, i) => (React__default.createElement(PdfDownloadItem, { key: `${document.url}-${i}`, document: document })))));
+const DocumentList = ({ documents }) => (React__default.createElement(List$b, null, documents.map((document, i) => (React__default.createElement(PdfDownloadItem, { key: `${document.url}-${i}`, document: document })))));
 
 const Translation = {
     'tyre-label': 'Energideklaration för däck',
@@ -7243,6 +7492,238 @@ const Documents = ({ documents }) => {
             React__default.createElement(DocumentList, { documents: group.documents }))))));
 };
 
+const Wrapper$z = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${size(2)};
+  height: 100%;
+`;
+const imageBaseStyling = css `
+  flex-shrink: 0;
+  aspect-ratio: 16 / 9;
+  border-radius: 3px;
+`;
+const Image$4 = styled.img `
+  ${imageBaseStyling};
+  display: block;
+  width: 100%;
+  object-fit: cover;
+`;
+const ImageaPlaceholder = styled.div `
+  ${imageBaseStyling};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${(props) => props.theme.color.textDarkLighten};
+  font-size: 2rem;
+  background-color: ${(props) => props.theme.color.accent};
+`;
+const Body$5 = styled.div `
+  flex: 1 1 auto;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  gap: ${size(1)};
+`;
+const Heading$7 = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${size(2)};
+`;
+const Title$2 = styled.div.attrs(() => ({
+    className: 'wayke__theme wayke__font--bold',
+})) `
+  font-size: 1.125rem;
+`;
+const Branding = styled.img `
+  display: block;
+`;
+const Price$2 = styled.div.attrs(() => ({
+    className: 'wayke__theme wayke__font--bold',
+})) ``;
+const Preamble = styled.div `
+  --preamble-max-height: ${size(6)};
+  --preamble-gradient-height: calc(var(--preamble-max-height) / 2);
+
+  position: relative;
+  max-height: var(--preamble-max-height);
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  white-space: pre-wrap;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: var(--preamble-max-height);
+    left: 0;
+    width: 100%;
+    height: var(--preamble-gradient-height);
+    transform: translateY(-100%); // Only visible if Preamble reaches max height
+    color: ${(props) => props.theme.color.bg};
+    mask-image: ${(props) => props.theme.mask.gradient.toTop};
+    pointer-events: none;
+  }
+`;
+const ReadMoreBtn = styled(ButtonReset).attrs(() => ({
+    className: 'wayke__theme wayke__font--bold wayke__color--primary-text',
+})) `
+  margin-top: auto;
+  display: block;
+  color: ${(props) => props.theme.color.link};
+  font-size: 0.875rem;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+const AccessoryCard = ({ title, image, branding, price, preamble, readMoreCta, }) => (React__default.createElement(Wrapper$z, null,
+    image ? (React__default.createElement(Image$4, { src: image.src, srcSet: image.srcSet, alt: image.alt })) : (React__default.createElement(ImageaPlaceholder, null,
+        React__default.createElement(IconImage, null))),
+    React__default.createElement(Body$5, null,
+        React__default.createElement(Heading$7, null,
+            React__default.createElement(Title$2, null, title),
+            branding && React__default.createElement(Branding, { src: branding.src, srcSet: branding.srcSet, alt: branding.alt })),
+        price && React__default.createElement(Price$2, null, price),
+        preamble && React__default.createElement(Preamble, null, preamble),
+        readMoreCta && React__default.createElement(ReadMoreBtn, { onClick: readMoreCta }, "L\u00E4s mer"))));
+
+const Image$5 = styled.img `
+  display: block;
+  width: 100%;
+`;
+
+const Link$1 = styled.a.attrs(() => ({
+    className: 'wayke__theme wayke__color--primary-text',
+})) `
+  text-decoration: none;
+  cursor: pointer;
+  text-decoration: underline;
+
+  :not(:hover) {
+    color: ${(props) => props.theme.color.textDark};
+  }
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  ${({ $hoverGhost }) => $hoverGhost &&
+    css `
+      &:before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+    `}
+`;
+
+const Wrapper$A = styled.ul `
+  --price-box-gutter: ${size(2)};
+
+  list-style: none;
+  padding: var(--price-box-gutter);
+  margin: 0;
+  border: 1px solid ${(props) => props.theme.color.border};
+`;
+const Row = styled.li `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--price-box-gutter);
+
+  & + & {
+    margin-top: calc(var(--price-box-gutter) / 4);
+  }
+
+  ${({ $oldPrice }) => $oldPrice &&
+    css `
+      --price-text-decoration: line-through;
+
+      color: ${(props) => props.theme.color.textDarkLighten};
+      font-size: 0.875rem;
+    `}
+`;
+const Label$a = styled.div ``;
+const Price$3 = styled.div.attrs(() => ({
+    className: 'wayke__theme wayke__font--bold',
+})) `
+  text-decoration: var(--price-text-decoration);
+`;
+
+const PriceBox = ({ prices }) => (React__default.createElement(Wrapper$A, null, prices?.map((item, i) => (React__default.createElement(Row, { key: `${item.label}-${i}`, "$oldPrice": item.oldPrice },
+    React__default.createElement(Label$a, null, item.label),
+    React__default.createElement(Price$3, null, item.price))))));
+
+const AccesoryModal = ({ accessory, onClose }) => {
+    const priceList = [
+        {
+            label: 'Kontantpris',
+            price: `${numberSeparator(accessory.price)} kr`,
+            oldPrice: false,
+        },
+    ];
+    if (accessory.salePrice) {
+        priceList.push({
+            label: 'Tidigare pris',
+            price: `${numberSeparator(accessory.salePrice)} kr`,
+            oldPrice: true,
+        });
+    }
+    if (accessory.assemblyPrice) {
+        priceList.push({
+            label: 'Monteringskostnad',
+            price: `${numberSeparator(accessory.assemblyPrice)} kr`,
+            oldPrice: false,
+        });
+    }
+    return (React__default.createElement(Modal, { title: accessory.name, onClose: onClose },
+        accessory.images?.[0] && (React__default.createElement(Repeat, null,
+            React__default.createElement(Image$5, { src: `${accessory.images[0]}?w=632`, alt: `${accessory.name}` }))),
+        accessory.logotype && (React__default.createElement(Repeat, null,
+            React__default.createElement(LogoBox, { logo: `${accessory.logotype}?w=160`, logo2x: `${accessory.logotype}?w=320`, alt: accessory.manufacturer || 'Logotyp', wide: true }))),
+        React__default.createElement(Repeat, null,
+            React__default.createElement(PriceBox, { prices: priceList })),
+        React__default.createElement(Repeat, null,
+            React__default.createElement(Content$2, { dangerouslySetInnerHTML: { __html: marked(accessory.description) } })),
+        accessory.articleNumber && (React__default.createElement(Repeat, null,
+            React__default.createElement(UtilityTextBold, { as: "div" }, "Art. nr."),
+            React__default.createElement("div", null, accessory.articleNumber))),
+        accessory.productPage && accessory.productPage.url && (React__default.createElement(Repeat, null,
+            React__default.createElement(Link$1, { href: accessory.productPage.url, title: `Mer information om ${accessory.name}`, target: "_blank", rel: "noopener noreferrer nofollow" },
+                accessory.productPage.title || 'Läs mer',
+                " (\u00F6ppnas i ny flik)")))));
+};
+
+const AccessoriesSection = ({ accessories }) => {
+    const [modal, setModal] = useState();
+    const onOpenModal = (accessory) => setModal(accessory);
+    const onCloseModal = () => setModal(undefined);
+    if (!accessories?.length)
+        return null;
+    return (React__default.createElement(React__default.Fragment, null,
+        modal && React__default.createElement(AccesoryModal, { accessory: modal, onClose: onCloseModal }),
+        React__default.createElement(ProductPageMainSection, null,
+            React__default.createElement(Repeat, null,
+                React__default.createElement(H2, { noMargin: true }, "Tillbeh\u00F6r")),
+            React__default.createElement(Repeat, null,
+                React__default.createElement(Content$2, null,
+                    React__default.createElement("p", null, "Tillbeh\u00F6r som passar till detta fordon."))),
+            React__default.createElement(Repeat, null,
+                React__default.createElement(OverflowGrid, { columns: 1.05, columnsSm: 2.1, columnsMd: 2, spacing: 2, items: accessories.map((accessory) => (React__default.createElement(AccessoryCard, { key: accessory.id, title: accessory.name, image: accessory.images?.[0]
+                            ? {
+                                src: `${accessory.images?.[0]}?w=539&h=303`,
+                                alt: accessory.name,
+                            }
+                            : undefined, price: `${numberSeparator(accessory.price)} kr`, preamble: accessory.excerpt, readMoreCta: () => onOpenModal(accessory) }))) })))));
+};
+
 const WaykeSearchItem = ({ id, hashRoute, pathRoute, disableResetScrollOnInit, placeholderImage, modifyDocumentTitleItem, displayBranchName, onClickSearchItem, }) => {
     const { ecomSettings } = useSettings();
     const ecomContext = useRef();
@@ -7296,7 +7777,7 @@ const WaykeSearchItem = ({ id, hashRoute, pathRoute, disableResetScrollOnInit, p
     const { vehicle } = result;
     const contact = centralStorageVehicle?.contact;
     const branch = centralStorageVehicle?.branch;
-    const { title, shortDescription, media, description, price, discount, financialOptions, manufacturer, ecommerce, packageOptions, publishedAt, documents, availableFrom, flags, } = vehicle;
+    const { title, accessories, shortDescription, media, description, price, discount, financialOptions, manufacturer, ecommerce, packageOptions, publishedAt, documents, availableFrom, flags, } = vehicle;
     const insuranceOptions = centralStorageVehicle?.insuranceOptions
         ? centralStorageVehicle.insuranceOptions
         : vehicle.insuranceOptions;
@@ -7379,6 +7860,7 @@ const WaykeSearchItem = ({ id, hashRoute, pathRoute, disableResetScrollOnInit, p
                                 React__default.createElement(Branch, { branch: branch, displayBranchName: displayBranchName, loading: loadingCentralStorageVehicle }),
                                 ecommerce && ecommerce.enabled && (React__default.createElement(Repeat, null,
                                     React__default.createElement(ButtonPrimary, { disabled: !!ecommerce.reserved, title: "K\u00F6p bilen online", onClick: () => ecomContext.current?.start() }, "K\u00F6p bilen online")))),
+                            React__default.createElement(AccessoriesSection, { accessories: accessories }),
                             React__default.createElement(PackageOptions, { packageOptions: packageOptions }),
                             React__default.createElement(ManufacturerPackageOption, { packageOption: manufacturer?.packageOption }))))),
             React__default.createElement(Related, { id: id, hashRoute: hashRoute, pathRoute: pathRoute, authorizedReseller: !!branch?.flags?.authorizedReseller, displayBranchName: displayBranchName, onClickSearchItem: onClickSearchItem })),