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

package/dist-node/index.js

@@ -74,6 +74,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',
@@ -782,6 +790,16 @@ const IconExclamationTriangle = ({
 }, React.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
+}) => React.createElement(Icon$1, {
+  viewBox: "0 0 16 16",
+  block: block
+}, React.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,
@@ -3485,47 +3503,10 @@ const ImageFull = styled__default.img`
   object-fit: cover;
 `;
 // Arrow Nav
-const Arrow = styled__default(ButtonReset)`
+const Arrow = styled__default.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;
@@ -3629,6 +3610,46 @@ const EnableNavigationButton = styled__default.div`
   z-index: 1;
 `;
 
+const NavButton = styled__default(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__default.div`
   position: fixed;
   top: 0;
@@ -4838,17 +4859,17 @@ const Gallery = ({
   }))), navigationDisabled && mediaLength > 1 && React__default.createElement(EnableNavigationButton, null, 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, {
+  }, React__default.createElement(ButtonContent, null, "St\u00E4ng")))), !navigationDisabled && mediaLength > 1 && React__default.createElement(React__default.Fragment, null, 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, {
+  }))), 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, {
+  }))))), React__default.createElement(Alt, null, React__default.createElement(QuickNav, {
     ref: quickNavRef
   }, !!(media !== null && media !== void 0 && media.length) ? media.map((m, i) => {
     var _m$files$0$formats$fi2;
@@ -4997,6 +5018,24 @@ const SEARCH_ITEM_QUERY = client.gql`
         phonenumber
         avatar
       }
+      accessories {
+        articleNumber
+        description
+        excerpt
+        id
+        images
+        logotype
+        manufacturer
+        model
+        name
+        price
+        assemblyPrice
+        productPage {
+          title
+          url
+        }
+        salePrice
+      }
       manufacturer {
         description
         logotype
@@ -6853,69 +6892,231 @@ const SectionHeader = ({
   onClick: onClick
 }, React__default.createElement(ButtonContent, null, actionTitle))));
 
-const OverflowGrid = styled__default.div`
-  ${props => props.theme.breakpoint.LtMd} {
-    ${Wrapper} & {
-      margin-left: ${size(-3)};
-      margin-right: ${size(-2)};
-    }
+const Wrapper$v = styled__default.div`
+  --container-gutter: ${size(2)};
+  --bg: ${props => props.theme.color.bg};
+
+  ${props => props.theme.breakpoint.Sm} {
+    --container-gutter: ${size(3)};
   }
 
+  position: relative;
+
+  ${({
+  $accentBg
+}) => $accentBg && styled.css`
+      --bg: ${props => props.theme.color.accent};
+    `}
+`;
+const Item$b = styled__default.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__default.ul`
+const List$9 = styled__default.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 && styled.css`
+      ${Item$b} {
+        width: ${100 / $columns}%;
+        max-width: ${100 / $columns}%;
       }
-    }
-  }
+    `}
 
-  ${props => props.theme.breakpoint.LtSm} {
-    ${Wrapper} & {
-      padding: 0 ${size(2)};
+  ${({
+  $columnsSm
+}) => $columnsSm && styled.css`
+      ${props => props.theme.breakpoint.Sm} {
+        ${Item$b} {
+          width: ${100 / $columnsSm}%;
+          max-width: ${100 / $columnsSm}%;
+        }
+      }
+    `}
 
-      :after {
-        width: ${size(1)};
+  ${({
+  $columnsMd
+}) => $columnsMd && styled.css`
+      ${props => props.theme.breakpoint.Md} {
+        ${Item$b} {
+          width: ${100 / $columnsMd}%;
+          max-width: ${100 / $columnsMd}%;
+        }
       }
-    }
-  }
+    `}
 `;
-const OverflowGridItem = styled__default.li`
-  flex: 1 0 auto;
-  width: calc(100% - ${size(2)});
-  max-width: calc(100% - ${size(2)});
-  padding: ${size(1)};
+const ListWrapper = styled__default.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 ? styled.css`
+              mask-image: linear-gradient(to right, #000 ${size($spacing)}, transparent);
+            ` : styled.css`
+              mask-image: ${props => props.theme.mask.gradient.toRight};
+            `}
+    }
+
+    &::after {
+      right: 0;
+
+      ${({
+  $spacing
+}) => $spacing ? styled.css`
+              mask-image: linear-gradient(to left, #000 ${size($spacing)}, transparent);
+            ` : styled.css`
+              mask-image: ${props => props.theme.mask.gradient.toLeft};
+            `}
+    }
   }
 
-  ${props => props.theme.breakpoint.Md} {
-    width: 33.333%;
-    max-width: 33.333%;
+  ${({
+  $spacing
+}) => $spacing && styled.css`
+      ${List$9} {
+        margin: 0 -${size($spacing / 2)};
+      }
+
+      ${Item$b} {
+        padding: 0 ${size($spacing / 2)};
+      }
+    `}
+`;
+const NavBtn = styled__default.div`
+  position: absolute;
+  top: 50%;
+  z-index: 2;
+
+  ${props => props.theme.breakpoint.LtSm} {
+    display: none;
   }
 `;
+const PrevBtn = styled__default(NavBtn)`
+  left: 0;
+  transform: translate(-50%, -50%);
+`;
+const NextBtn = styled__default(NavBtn)`
+  right: 0;
+  transform: translate(50%, -50%);
+`;
+
+const OverflowGrid = ({
+  items,
+  itemKeyBase,
+  spacing,
+  columns,
+  columnsSm,
+  columnsMd,
+  accentBg
+}) => {
+  const overflowElement = React.useRef(null);
+  const onPrev = React.useCallback(() => {
+    var _overflowElement$curr, _overflowElement$curr2;
+    const itemWidth = ((_overflowElement$curr = overflowElement.current) === null || _overflowElement$curr === void 0 ? void 0 : _overflowElement$curr.children[0].clientWidth) || 0;
+    const scrollLeft = ((_overflowElement$curr2 = overflowElement.current) === null || _overflowElement$curr2 === void 0 ? void 0 : _overflowElement$curr2.scrollLeft) || 0;
+    if (scrollLeft > 0) {
+      var _overflowElement$curr3;
+      (_overflowElement$curr3 = overflowElement.current) === null || _overflowElement$curr3 === void 0 ? void 0 : _overflowElement$curr3.scroll({
+        left: scrollLeft - itemWidth,
+        behavior: 'smooth'
+      });
+    }
+  }, []);
+  const onNext = React.useCallback(() => {
+    var _overflowElement$curr4, _overflowElement$curr5, _overflowElement$curr6, _overflowElement$curr7;
+    const itemWidth = ((_overflowElement$curr4 = overflowElement.current) === null || _overflowElement$curr4 === void 0 ? void 0 : _overflowElement$curr4.children[0].clientWidth) || 0;
+    const scrollWidth = ((_overflowElement$curr5 = overflowElement.current) === null || _overflowElement$curr5 === void 0 ? void 0 : _overflowElement$curr5.scrollWidth) || 0;
+    const scrollLeft = ((_overflowElement$curr6 = overflowElement.current) === null || _overflowElement$curr6 === void 0 ? void 0 : _overflowElement$curr6.scrollLeft) || 0;
+    const overflowElementWidth = ((_overflowElement$curr7 = overflowElement.current) === null || _overflowElement$curr7 === void 0 ? void 0 : _overflowElement$curr7.offsetWidth) || 0;
+    const overflowElementScrollWidth = scrollWidth - overflowElementWidth;
+    if (overflowElementScrollWidth !== scrollLeft) {
+      var _overflowElement$curr8;
+      (_overflowElement$curr8 = overflowElement.current) === null || _overflowElement$curr8 === void 0 ? void 0 : _overflowElement$curr8.scroll({
+        left: scrollLeft + itemWidth,
+        behavior: 'smooth'
+      });
+    }
+  }, []);
+  // Hide navigation buttons depending on scroll position
+  const [hidePrevNav, setHidePrevNav] = React.useState(true);
+  const [hideNextNav, setHideNextNav] = React.useState(true);
+  const onScroll = () => {
+    var _overflowElement$curr9, _overflowElement$curr10, _overflowElement$curr11;
+    const scrollLeft = ((_overflowElement$curr9 = overflowElement.current) === null || _overflowElement$curr9 === void 0 ? void 0 : _overflowElement$curr9.scrollLeft) || 0;
+    const scrollWidth = ((_overflowElement$curr10 = overflowElement.current) === null || _overflowElement$curr10 === void 0 ? void 0 : _overflowElement$curr10.scrollWidth) || 0;
+    const overflowElementWidth = ((_overflowElement$curr11 = overflowElement.current) === null || _overflowElement$curr11 === void 0 ? void 0 : _overflowElement$curr11.offsetWidth) || 0;
+    const overflowElementScrollWidth = scrollWidth - overflowElementWidth;
+    setHidePrevNav(scrollLeft == 0 ? true : false);
+    setHideNextNav(overflowElementScrollWidth == scrollLeft ? true : false);
+  };
+  React.useEffect(() => {
+    var _overflowElement$curr12;
+    onScroll();
+    (_overflowElement$curr12 = overflowElement.current) === null || _overflowElement$curr12 === void 0 ? void 0 : _overflowElement$curr12.addEventListener('scroll', onScroll);
+    return () => {
+      var _overflowElement$curr13;
+      return (_overflowElement$curr13 = overflowElement.current) === null || _overflowElement$curr13 === void 0 ? void 0 : _overflowElement$curr13.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 = React.createContext({
   moreLikeThisUrl: false,
@@ -6989,37 +7190,43 @@ const Related = ({
     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 === null || response === void 0 ? void 0 : response.documentList.documents.map(document => {
-    var _document$featuredIma, _document$featuredIma2, _document$featuredIma3, _document$branches, _document$branches$;
-    const prefix = pathRoute ? `/${pathRoute}` : '/';
-    const r = regexPathGuid();
-    const pathRouteUrl = window.location.pathname === '/' ? `${prefix}${document._id}` : 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$featuredIma = document.featuredImage) === null || _document$featuredIma === void 0 ? void 0 : (_document$featuredIma2 = _document$featuredIma.files) === null || _document$featuredIma2 === void 0 ? void 0 : (_document$featuredIma3 = _document$featuredIma2[0]) === null || _document$featuredIma3 === void 0 ? void 0 : _document$featuredIma3.url,
-      description: document.shortDescription,
-      branchName: displayBranchName ? (_document$branches = document.branches) === null || _document$branches === void 0 ? void 0 : (_document$branches$ = _document$branches[0]) === null || _document$branches$ === void 0 ? void 0 : _document$branches$.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
-    }));
-  }))))));
+  }, "Senast inkomna"))), React__default.createElement(Repeat, null, React__default.createElement(OverflowGrid, {
+    accentBg: true,
+    columns: 1.05,
+    columnsSm: 2.1,
+    columnsMd: 3,
+    spacing: 2,
+    items: response === null || response === void 0 ? void 0 : response.documentList.documents.map(document => {
+      var _document$featuredIma, _document$featuredIma2, _document$featuredIma3, _document$branches, _document$branches$;
+      const prefix = pathRoute ? `/${pathRoute}` : '/';
+      const r = regexPathGuid();
+      const pathRouteUrl = window.location.pathname === '/' ? `${prefix}${document._id}` : r.test(`${pathRoute}${id}`) ? window.location.pathname.replace(r, document._id) : `${window.location.pathname}${prefix}${document._id}`;
+      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$featuredIma = document.featuredImage) === null || _document$featuredIma === void 0 ? void 0 : (_document$featuredIma2 = _document$featuredIma.files) === null || _document$featuredIma2 === void 0 ? void 0 : (_document$featuredIma3 = _document$featuredIma2[0]) === null || _document$featuredIma3 === void 0 ? void 0 : _document$featuredIma3.url,
+        description: document.shortDescription,
+        branchName: displayBranchName ? (_document$branches = document.branches) === null || _document$branches === void 0 ? void 0 : (_document$branches$ = _document$branches[0]) === null || _document$branches$ === void 0 ? void 0 : _document$branches$.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 = ({
@@ -7073,7 +7280,7 @@ const getBg = severity => {
   }
   return bg;
 };
-const Wrapper$v = styled__default.div.attrs(() => ({
+const Wrapper$w = styled__default.div.attrs(() => ({
   className: 'wayke__theme wayke__font--bold'
 }))`
   display: inline-block;
@@ -7088,7 +7295,7 @@ const Wrapper$v = styled__default.div.attrs(() => ({
 const Badge = ({
   label,
   severity
-}) => React__default.createElement(Wrapper$v, {
+}) => React__default.createElement(Wrapper$w, {
   severity: severity
 }, label);
 
@@ -7188,7 +7395,7 @@ const SettingsContext = React.createContext({});
 
 const useSettings = () => React.useContext(SettingsContext);
 
-const Wrapper$w = styled__default.a`
+const Wrapper$x = styled__default.a`
   display: block;
 `;
 const Image$3 = styled__default.img`
@@ -7235,7 +7442,7 @@ const StaticMap = ({
     longitude
   } = position;
   if (visible && googleMapsApiKey) {
-    return React__default.createElement(Wrapper$w, {
+    return React__default.createElement(Wrapper$x, {
       href: `http://maps.google.com/maps?q=${latitude},${longitude}`,
       title: "Visa p\u00E5 Google Maps",
       target: "_blank",
@@ -7307,6 +7514,24 @@ const SEARCH_ITEM_BRANCH_QUERY = client.gql`
         phonenumber
         avatar
       }
+      accessories {
+        articleNumber
+        description
+        excerpt
+        id
+        images
+        logotype
+        manufacturer
+        model
+        name
+        price
+        assemblyPrice
+        productPage {
+          title
+          url
+        }
+        salePrice
+      }
       branch {
         connections {
           id
@@ -8025,7 +8250,7 @@ const MetadataItem = ({
   })));
 };
 
-const Wrapper$x = styled__default.div`
+const Wrapper$y = styled__default.div`
   overflow: hidden;
   margin-top: ${size(-1)};
   margin-left: ${size(-1)};
@@ -8036,7 +8261,7 @@ const Wrapper$x = styled__default.div`
     margin-right: ${size(-2)};
   }
 `;
-const List$9 = styled__default.ul`
+const List$a = styled__default.ul`
   list-style: none;
   padding: 0;
   margin: 0;
@@ -8050,7 +8275,7 @@ const List$9 = styled__default.ul`
     padding-right: ${size(1)};
   }
 `;
-const Item$b = styled__default.li`
+const Item$c = styled__default.li`
   display: inline-block;
   vertical-align: bottom;
   font-size: 1rem;
@@ -8094,7 +8319,7 @@ const Tabs = ({
   tabs,
   active,
   onClick
-}) => React.createElement(Wrapper$x, null, React.createElement(List$9, null, tabs.map(tab => React.createElement(Item$b, {
+}) => React.createElement(Wrapper$y, null, React.createElement(List$a, null, tabs.map(tab => React.createElement(Item$c, {
   key: tab.name
 }, React.createElement(Action$8, {
   title: tab.displayName,
@@ -8188,7 +8413,7 @@ const PdfListItem = styled__default.li.attrs(() => ({
     flex: 0 0 100%;
   }
 `;
-const List$a = styled__default.ul`
+const List$b = styled__default.ul`
   list-style: none;
   padding: 0;
   display: flex;
@@ -8216,7 +8441,7 @@ const PdfSubtitle = styled__default.div`
   color: ${props => props.theme.color.textDarkLighten};
 `;
 const PdfColumn = styled__default.div`
-  flex 0 0 auto;
+  flex: 0 0 auto;
   &:first-child {
     flex: 1 1 auto;
   }
@@ -8253,7 +8478,7 @@ const PdfDownloadItem = ({
 };
 const DocumentList = ({
   documents
-}) => React__default.createElement(List$a, null, documents.map((document, i) => React__default.createElement(PdfDownloadItem, {
+}) => React__default.createElement(List$b, null, documents.map((document, i) => React__default.createElement(PdfDownloadItem, {
   key: `${document.url}-${i}`,
   document: document
 })));
@@ -8297,6 +8522,273 @@ const Documents = ({
   }))));
 };
 
+const Wrapper$z = styled__default.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${size(2)};
+  height: 100%;
+`;
+const imageBaseStyling = styled.css`
+  flex-shrink: 0;
+  aspect-ratio: 16 / 9;
+  border-radius: 3px;
+`;
+const Image$4 = styled__default.img`
+  ${imageBaseStyling};
+  display: block;
+  width: 100%;
+  object-fit: cover;
+`;
+const ImageaPlaceholder = styled__default.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__default.div`
+  flex: 1 1 auto;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  gap: ${size(1)};
+`;
+const Heading$7 = styled__default.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${size(2)};
+`;
+const Title$2 = styled__default.div.attrs(() => ({
+  className: 'wayke__theme wayke__font--bold'
+}))`
+  font-size: 1.125rem;
+`;
+const Branding = styled__default.img`
+  display: block;
+`;
+const Price$2 = styled__default.div.attrs(() => ({
+  className: 'wayke__theme wayke__font--bold'
+}))``;
+const Preamble = styled__default.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__default(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__default.img`
+  display: block;
+  width: 100%;
+`;
+
+const Link$1 = styled__default.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 && styled.css`
+      &:before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+    `}
+`;
+
+const Wrapper$A = styled__default.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__default.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 && styled.css`
+      --price-text-decoration: line-through;
+
+      color: ${props => props.theme.color.textDarkLighten};
+      font-size: 0.875rem;
+    `}
+`;
+const Label$a = styled__default.div``;
+const Price$3 = styled__default.div.attrs(() => ({
+  className: 'wayke__theme wayke__font--bold'
+}))`
+  text-decoration: var(--price-text-decoration);
+`;
+
+const PriceBox = ({
+  prices
+}) => React__default.createElement(Wrapper$A, null, prices === null || prices === void 0 ? void 0 : 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
+}) => {
+  var _accessory$images;
+  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 = accessory.images) === null || _accessory$images === void 0 ? void 0 : _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.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] = React.useState();
+  const onOpenModal = accessory => setModal(accessory);
+  const onCloseModal = () => setModal(undefined);
+  if (!(accessories !== null && accessories !== void 0 && 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 => {
+      var _accessory$images, _accessory$images2;
+      return React__default.createElement(AccessoryCard, {
+        key: accessory.id,
+        title: accessory.name,
+        image: (_accessory$images = accessory.images) !== null && _accessory$images !== void 0 && _accessory$images[0] ? {
+          src: `${(_accessory$images2 = accessory.images) === null || _accessory$images2 === void 0 ? void 0 : _accessory$images2[0]}?w=539&h=303`,
+          alt: accessory.name
+        } : undefined,
+        price: `${numberSeparator(accessory.price)} kr`,
+        preamble: accessory.excerpt,
+        readMoreCta: () => onOpenModal(accessory)
+      });
+    })
+  }))));
+};
+
 const WaykeSearchItem = ({
   id,
   hashRoute,
@@ -8382,6 +8874,7 @@ const WaykeSearchItem = ({
   const branch = centralStorageVehicle === null || centralStorageVehicle === void 0 ? void 0 : centralStorageVehicle.branch;
   const {
     title,
+    accessories,
     shortDescription,
     media,
     description,
@@ -8506,7 +8999,9 @@ const WaykeSearchItem = ({
       var _ecomContext$current2;
       return (_ecomContext$current2 = ecomContext.current) === null || _ecomContext$current2 === void 0 ? void 0 : _ecomContext$current2.start();
     }
-  }, "K\u00F6p bilen online"))), React__default.createElement(PackageOptions, {
+  }, "K\u00F6p bilen online"))), React__default.createElement(AccessoriesSection, {
+    accessories: accessories
+  }), React__default.createElement(PackageOptions, {
     packageOptions: packageOptions
   }), React__default.createElement(ManufacturerPackageOption, {
     packageOption: manufacturer === null || manufacturer === void 0 ? void 0 : manufacturer.packageOption