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

package/dist-src/components/AccessoryCard/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Wrapper, Image, ImageaPlaceholder, Body, Heading, Title, Branding, Price, Preamble, ReadMoreBtn, } from './wrapper';
+import { IconImage } from '../Icon/index';
+const AccessoryCard = ({ title, image, branding, price, preamble, readMoreCta, }) => (React.createElement(Wrapper, null,
+    image ? (React.createElement(Image, { src: image.src, srcSet: image.srcSet, alt: image.alt })) : (React.createElement(ImageaPlaceholder, null,
+        React.createElement(IconImage, null))),
+    React.createElement(Body, null,
+        React.createElement(Heading, null,
+            React.createElement(Title, null, title),
+            branding && React.createElement(Branding, { src: branding.src, srcSet: branding.srcSet, alt: branding.alt })),
+        price && React.createElement(Price, null, price),
+        preamble && React.createElement(Preamble, null, preamble),
+        readMoreCta && React.createElement(ReadMoreBtn, { onClick: readMoreCta }, "L\u00E4s mer"))));
+export default AccessoryCard;

package/dist-src/components/AccessoryCard/wrapper.js

@@ -0,0 +1,90 @@
+import styled, { css } from 'styled-components';
+import { size } from '../../layout/helpers';
+import { ButtonReset } from '../Button/index';
+export const Wrapper = 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;
+`;
+export const Image = styled.img `
+  ${imageBaseStyling};
+  display: block;
+  width: 100%;
+  object-fit: cover;
+`;
+export 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};
+`;
+export const Body = styled.div `
+  flex: 1 1 auto;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  gap: ${size(1)};
+`;
+export const Heading = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${size(2)};
+`;
+export const Title = styled.div.attrs(() => ({
+    className: 'wayke__theme wayke__font--bold',
+})) `
+  font-size: 1.125rem;
+`;
+export const Branding = styled.img `
+  display: block;
+`;
+export const Price = styled.div.attrs(() => ({
+    className: 'wayke__theme wayke__font--bold',
+})) ``;
+export 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;
+  }
+`;
+export 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;
+  }
+`;

package/dist-src/components/DocumentList/wrapper.js

@@ -38,7 +38,7 @@ export const PdfSubtitle = styled.div `
   color: ${(props) => props.theme.color.textDarkLighten};
 `;
 export const PdfColumn = styled.div `
-  flex 0 0 auto;
+  flex: 0 0 auto;
   &:first-child {
     flex: 1 1 auto;
   }

package/dist-src/components/Gallery/index.js

@@ -4,6 +4,7 @@ import scrollIntoView from 'scroll-into-view-if-needed';
 import { Wrapper, SliderWrapper, Item, Image, ArrowLeft, ArrowRight, Main, Alt, QuickNav, QuickNavItem, QuickNavBtn, QuickNavImg, EnableNavigationButton, } from './wrapper';
 import { IconChevronLeft, IconChevronRight } from '../Icon/index';
 import { ButtonSecondary, ButtonContent } from '../Button/index';
+import { NavButton } from '../NavButton/index';
 import Lightbox from '../Lightbox/index';
 import EmbededVideo from '../Video/EmbededVideo';
 import QuickNavEmbeded from '../Video/QuickNavEmbeded';
@@ -97,10 +98,12 @@ const Gallery = ({ media, placeholderImage }) => {
                         React.createElement(ButtonSecondary, { onClick: onEnableNavigation, title: "St\u00E4ng" },
                             React.createElement(ButtonContent, null, "St\u00E4ng"))))),
                 !navigationDisabled && mediaLength > 1 && (React.createElement(React.Fragment, null,
-                    React.createElement(ArrowLeft, { onClick: prevImage, title: "F\u00F6reg\u00E5ende bild" },
-                        React.createElement(IconChevronLeft, { block: true })),
-                    React.createElement(ArrowRight, { onClick: nextImage, title: "N\u00E4sta bild" },
-                        React.createElement(IconChevronRight, { block: true }))))),
+                    React.createElement(ArrowLeft, null,
+                        React.createElement(NavButton, { onClick: prevImage, title: "F\u00F6reg\u00E5ende bild" },
+                            React.createElement(IconChevronLeft, { block: true }))),
+                    React.createElement(ArrowRight, null,
+                        React.createElement(NavButton, { onClick: nextImage, title: "N\u00E4sta bild" },
+                            React.createElement(IconChevronRight, { block: true })))))),
             React.createElement(Alt, null,
                 React.createElement(QuickNav, { ref: quickNavRef }, !!media?.length ? (media.map((m, i) => {
                     const src = m.files[0].formats.filter(notEmpty).find((x) => x.format === '225x150')?.url ||

package/dist-src/components/Gallery/wrapper.js

@@ -99,6 +99,76 @@ export 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} {
@@ -111,7 +181,6 @@ export 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;
     }
@@ -149,47 +218,10 @@ export 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;

package/dist-src/components/Icon/index.js

@@ -34,3 +34,5 @@ export const IconExclamationCircle = ({ block }) => (React.createElement(Icon, {
     React.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" })));
 export const IconExclamationTriangle = ({ block }) => (React.createElement(Icon, { viewBox: "0 0 32 32", block: block },
     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" })));
+export const IconImage = ({ block }) => (React.createElement(Icon, { 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" })));

package/dist-src/components/Image/index.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export const Image = styled.img `
+  display: block;
+  width: 100%;
+`;

package/dist-src/components/Link/index.js

@@ -0,0 +1,28 @@
+import styled, { css } from 'styled-components';
+export const Link = 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%;
+      }
+    `}
+`;

package/dist-src/components/NavButton/index.js

@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+import { size } from '../../layout/helpers';
+import { ButtonReset } from '../Button/index';
+export 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);
+  }
+`;

package/dist-src/components/OverflowGrid/index.js

@@ -1,66 +1,56 @@
-import styled from 'styled-components';
-import { size } from '../../layout/helpers';
-import { Wrapper as Container } from '../Container/wrapper';
-export const OverflowGrid = styled.div `
-  ${(props) => props.theme.breakpoint.LtMd} {
-    ${Container} & {
-      margin-left: ${size(-3)};
-      margin-right: ${size(-2)};
-    }
-  }
-
-  ${(props) => props.theme.breakpoint.LtSm} {
-    ${Container} & {
-      margin-left: ${size(-2)};
-      margin-right: ${size(-1)};
-    }
-  }
-`;
-export const OverflowGridList = styled.ul `
-  display: flex;
-  align-items: flex-start;
-  list-style: none;
-  padding: 0;
-  margin: ${size(-1)};
-
-  ${(props) => props.theme.breakpoint.LtMd} {
-    ${Container} & {
-      overflow: auto;
-      -webkit-overflow-scrolling: touch;
-      padding: 0 ${size(3)};
-
-      :after {
-        content: '';
-        flex: 0 0 auto;
-        height: 1px;
-        width: ${size(2)};
-      }
-    }
-  }
-
-  ${(props) => props.theme.breakpoint.LtSm} {
-    ${Container} & {
-      padding: 0 ${size(2)};
-
-      :after {
-        width: ${size(1)};
-      }
-    }
-  }
-`;
-export const OverflowGridItem = styled.li `
-  flex: 1 0 auto;
-  width: calc(100% - ${size(2)});
-  max-width: calc(100% - ${size(2)});
-  padding: ${size(1)};
-
-  ${(props) => props.theme.breakpoint.Sm} {
-    width: calc(50% - ${size(3)});
-    max-width: calc(50% - ${size(3)});
-  }
-
-  ${(props) => props.theme.breakpoint.Md} {
-    width: 33.333%;
-    max-width: 33.333%;
-  }
-`;
+import React, { useRef, useCallback, useState, useEffect } from 'react';
+import { Wrapper, ListWrapper, List, Item, PrevBtn, NextBtn } from './wrapper';
+import { IconChevronLeft, IconChevronRight } from '../Icon/index';
+import { NavButton } from '../NavButton/index';
+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.createElement(Wrapper, { "$accentBg": accentBg },
+        React.createElement(ListWrapper, { "$spacing": spacing },
+            React.createElement(List, { ref: overflowElement, "$columns": columns, "$columnsSm": columnsSm, "$columnsMd": columnsMd }, items.map((item, i) => (React.createElement(Item, { key: itemKeyBase ? `${itemKeyBase}-${i}` : `overflow-grid-item-${i}` }, item))))),
+        !hidePrevNav && (React.createElement(PrevBtn, null,
+            React.createElement(NavButton, { onClick: onPrev, title: "Previous" },
+                React.createElement(IconChevronLeft, null)))),
+        !hideNextNav && (React.createElement(NextBtn, null,
+            React.createElement(NavButton, { onClick: onNext, title: "Next" },
+                React.createElement(IconChevronRight, null))))));
+};
+export default OverflowGrid;

package/dist-src/components/OverflowGrid/wrapper.js

@@ -0,0 +1,144 @@
+import styled, { css } from 'styled-components';
+import { size } from '../../layout/helpers';
+export const Wrapper = 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};
+    `}
+`;
+export const Item = styled.li `
+  flex: 1 0 auto;
+  width: 100%;
+  max-width: 100%;
+  scroll-snap-align: start;
+
+  ${(props) => props.theme.breakpoint.LtSm} {
+    &:is(:only-child, #important) {
+      width: 100%;
+      max-width: 100%;
+    }
+  }
+`;
+export const List = styled.ul `
+  display: flex;
+  align-items: stretch;
+  list-style: none;
+  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;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  ${({ $columns }) => $columns &&
+    css `
+      ${Item} {
+        width: ${100 / $columns}%;
+        max-width: ${100 / $columns}%;
+      }
+    `}
+
+  ${({ $columnsSm }) => $columnsSm &&
+    css `
+      ${(props) => props.theme.breakpoint.Sm} {
+        ${Item} {
+          width: ${100 / $columnsSm}%;
+          max-width: ${100 / $columnsSm}%;
+        }
+      }
+    `}
+
+  ${({ $columnsMd }) => $columnsMd &&
+    css `
+      ${(props) => props.theme.breakpoint.Md} {
+        ${Item} {
+          width: ${100 / $columnsMd}%;
+          max-width: ${100 / $columnsMd}%;
+        }
+      }
+    `}
+`;
+export const ListWrapper = styled.div `
+  position: relative;
+  overflow: hidden;
+  margin: 0 calc(var(--container-gutter) * -1);
+
+  ${(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};
+            `}
+    }
+  }
+
+  ${({ $spacing }) => $spacing &&
+    css `
+      ${List} {
+        margin: 0 -${size($spacing / 2)};
+      }
+
+      ${Item} {
+        padding: 0 ${size($spacing / 2)};
+      }
+    `}
+`;
+const NavBtn = styled.div `
+  position: absolute;
+  top: 50%;
+  z-index: 2;
+
+  ${(props) => props.theme.breakpoint.LtSm} {
+    display: none;
+  }
+`;
+export const PrevBtn = styled(NavBtn) `
+  left: 0;
+  transform: translate(-50%, -50%);
+`;
+export const NextBtn = styled(NavBtn) `
+  right: 0;
+  transform: translate(50%, -50%);
+`;

package/dist-src/components/PriceBox/index.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Wrapper, Row, Label, Price } from './wrapper';
+const PriceBox = ({ prices }) => (React.createElement(Wrapper, null, prices?.map((item, i) => (React.createElement(Row, { key: `${item.label}-${i}`, "$oldPrice": item.oldPrice },
+    React.createElement(Label, null, item.label),
+    React.createElement(Price, null, item.price))))));
+export default PriceBox;

package/dist-src/components/PriceBox/wrapper.js

@@ -0,0 +1,34 @@
+import styled, { css } from 'styled-components';
+import { size } from '../../layout/helpers';
+export const Wrapper = 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};
+`;
+export 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;
+    `}
+`;
+export const Label = styled.div ``;
+export const Price = styled.div.attrs(() => ({
+    className: 'wayke__theme wayke__font--bold',
+})) `
+  text-decoration: var(--price-text-decoration);
+`;