@wayke-se/components-react 2.11.0 → 2.15.0

package/dist-node/index.js

@@ -17,8 +17,8 @@ var Slider$1 = _interopDefault(require('react-slick'));
 var scrollIntoView = _interopDefault(require('scroll-into-view-if-needed'));
 var client = require('@apollo/client');
 var EcomBase = _interopDefault(require('@wayke-se/ecom-react'));
-var marked = _interopDefault(require('marked'));
-var custom = require('libphonenumber-js/custom');
+var marked = require('marked');
+var core = require('libphonenumber-js/core');
 
 const _colors = {
   black: '#000',
@@ -82,99 +82,72 @@ const size = (multiplier = 1) => {
   return `${multiplier * baseUnit}px`;
 };
 
-const Wrapper = styled__default.div`
-  width: 100%;
-  max-width: ${props => props.theme.distances.containerMaxWidth};
-  margin: 0 auto;
-  padding: 0 ${size(3)};
-
-  ${props => props.theme.breakpoint.LtSm} {
-    padding: 0 ${size(2)};
-  }
-`;
+const Wrapper = styled__default.div.withConfig({
+  displayName: "wrapper__Wrapper"
+})(["width:100%;max-width:", ";margin:0 auto;padding:0 ", ";", "{padding:0 ", ";}"], props => props.theme.distances.containerMaxWidth, size(3), props => props.theme.breakpoint.LtSm, size(2));
 
 const Container = ({
   children
 }) => React__default.createElement(Wrapper, null, children);
 
-const Page = styled__default.main`
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  min-height: -webkit-fill-available;
-  padding-top: ${size(4)};
-`;
-const PageSection = styled__default.section`
-  margin-bottom: ${size(4)};
-
-  ${({
+const Page = styled__default.div.withConfig({
+  displayName: "Page"
+})([""]);
+const PageSection = styled__default.section.withConfig({
+  displayName: "Page__PageSection"
+})(["margin-bottom:", ";", " ", " ", " ", ""], size(4), ({
   accent
-}) => accent && styled.css(["padding:", " 0;background-color:", ";margin-bottom:0;"], size(4), props => props.theme.color.accent)}
-
-  ${({
+}) => accent && styled.css(["padding:", " 0;background-color:", ";margin-bottom:0;"], size(4), props => props.theme.color.accent), ({
   large
-}) => large && styled.css(["margin-bottom:", ";"], size(8))}
-
-  ${({
+}) => large && styled.css(["margin-bottom:", ";"], size(8)), ({
   accent,
   large
-}) => accent && large && styled.css(["padding:", " 0;margin-bottom:0;"], size(8))}
-
-  ${({
+}) => accent && large && styled.css(["padding:", " 0;margin-bottom:0;"], size(8)), ({
   fillSpace
-}) => fillSpace && styled.css(["flex:1 1 auto;"])}
-`;
-
-const Wrapper$1 = styled__default.div``;
-const Header = styled__default.header`
-  display: flex;
-  margin-bottom: ${size(4)};
-`;
-const HeaderCount = styled__default.div`
-  flex: 1 1 auto;
-`;
-const HeaderSort = styled__default.div`
-  flex-shrink: 0;
-`;
-const Body = styled__default.div``;
-const Footer = styled__default.footer`
-  margin-top: ${size(8)};
-  text-align: center;
-`;
-const FooterProgress = styled__default.div`
-  max-width: 175px;
-  margin: 0 auto;
-`;
-const FooterAction = styled__default.div`
-  margin-top: ${size(3)};
-`;
-const ResultCount = styled__default.div`
-  color: ${props => props.theme.color.textDarkLighten};
-  font-size: 0.875rem;
-`;
-
-const Wrapper$2 = styled__default.div`
-  text-align: center;
-`;
-const Description = styled__default.div`
-  margin-bottom: ${size(1.5)};
-  font-size: 0.875rem;
-`;
-const Bar = styled__default.div`
-  position: relative;
-  width: 100%;
-  height: 2px;
-  background-color: ${props => props.theme.color.accentDark};
-`;
+}) => fillSpace && styled.css(["flex:1 1 auto;"]));
+
+const Wrapper$1 = styled__default.div.withConfig({
+  displayName: "wrapper__Wrapper"
+})([""]);
+const Header = styled__default.header.withConfig({
+  displayName: "wrapper__Header"
+})(["display:flex;margin-bottom:", ";"], size(4));
+const HeaderCount = styled__default.div.withConfig({
+  displayName: "wrapper__HeaderCount"
+})(["flex:1 1 auto;"]);
+const HeaderSort = styled__default.div.withConfig({
+  displayName: "wrapper__HeaderSort"
+})(["flex-shrink:0;"]);
+const Body = styled__default.div.withConfig({
+  displayName: "wrapper__Body"
+})([""]);
+const Footer = styled__default.footer.withConfig({
+  displayName: "wrapper__Footer"
+})(["margin-top:", ";text-align:center;"], size(8));
+const FooterProgress = styled__default.div.withConfig({
+  displayName: "wrapper__FooterProgress"
+})(["max-width:175px;margin:0 auto;"]);
+const FooterAction = styled__default.div.withConfig({
+  displayName: "wrapper__FooterAction"
+})(["margin-top:", ";"], size(3));
+const ResultCount = styled__default.div.withConfig({
+  displayName: "wrapper__ResultCount"
+})(["color:", ";font-size:0.875rem;"], props => props.theme.color.textDarkLighten);
+
+const Wrapper$2 = styled__default.div.withConfig({
+  displayName: "wrapper__Wrapper"
+})(["text-align:center;"]);
+const Description = styled__default.div.withConfig({
+  displayName: "wrapper__Description"
+})(["margin-bottom:", ";font-size:0.875rem;"], size(1.5));
+const Bar = styled__default.div.withConfig({
+  displayName: "wrapper__Bar"
+})(["position:relative;width:100%;height:2px;background-color:", ";"], props => props.theme.color.accentDark);
 const BarActive = styled__default.div.attrs(() => ({
   role: 'progressbar'
-}))`
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  background-color: ${props => props.theme.color.textDark};
-`;
+})).withConfig({
+  displayName: "wrapper__BarActive"
+})(["position:absolute;top:0;left:0;height:100%;background-color:", ";"], props => props.theme.color.textDark);
 
 const ProgressBar = ({
   unit,
@@ -192,246 +165,97 @@ const ProgressBar = ({
   })));
 };
 
-const UtilityTextRight = styled__default.div`
-  text-align: right;
-`;
-const UtilityFontSizeSmall = styled__default.span`
-  font-size: 0.875rem;
-`;
+const UtilityTextRight = styled__default.div.withConfig({
+  displayName: "Utility__UtilityTextRight"
+})(["text-align:right;"]);
+const UtilityFontSizeSmall = styled__default.span.withConfig({
+  displayName: "Utility__UtilityFontSizeSmall"
+})(["font-size:0.875rem;"]);
 const UtilityTextPrimary = styled__default.span.attrs(() => ({
   className: 'wayke__theme wayke__color--primary-text'
-}))``;
+})).withConfig({
+  displayName: "Utility__UtilityTextPrimary"
+})([""]);
 const UtilityTextBold = styled__default.span.attrs(() => ({
   className: 'wayke__theme wayke__font--bold'
-}))``;
+})).withConfig({
+  displayName: "Utility__UtilityTextBold"
+})([""]);
 
 const ButtonReset = styled__default.button.attrs(() => ({
   type: 'button'
-}))`
-  display: inline-block;
-  vertical-align: middle;
-  padding: 0;
-  margin: 0;
-  background-color: transparent;
-  border: 0;
-  border-radius: 0;
-  font-family: sans-serif;
-  font-weight: 400;
-  font-size: 1em;
-  color: currentColor;
-  line-height: 1.2;
-  text-align: center;
-  text-decoration: none;
-  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
-  cursor: pointer;
-
-  :focus {
-    outline: none;
-  }
-
-  ::-moz-focus-inner {
-    border: 0;
-  }
-`;
-const ButtonBase = styled__default(ButtonReset)`
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: ${size(1.75)} ${size(6)};
-  border-radius: 3px;
-  font-size: 1rem;
-  line-height: 1.2;
-  text-decoration: none;
-  transform-origin: 50% 50%;
-  transition: 200ms ease, transform 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
-
-  :before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: ${props => props.theme.color.hoverOverlay};
-    border-radius: 3px;
-    opacity: 0;
-    transition: opacity 150ms ease;
-  }
-
-  :hover {
-    :before {
-      opacity: 1;
-    }
-  }
-
-  :active {
-    transform: scale(0.97);
-  }
-
-  &[disabled] {
-    background-color: ${props => props.theme.color.disabledBg};
-    border-color: ${props => props.theme.color.disabledBg};
-    color: ${props => props.theme.color.disabledText};
-  }
-
-  ${({
+})).withConfig({
+  displayName: "Button__ButtonReset"
+})(["display:inline-block;vertical-align:middle;padding:0;margin:0;background-color:transparent;border:0;border-radius:0;font-family:sans-serif;font-weight:400;font-size:1em;color:currentColor;line-height:1.2;text-align:center;text-decoration:none;-webkit-tap-highlight-color:rgba(255,255,255,0.1);cursor:pointer;:focus{outline:none;}::-moz-focus-inner{border:0;}"]);
+const ButtonBase = styled__default(ButtonReset).withConfig({
+  displayName: "Button__ButtonBase"
+})(["position:relative;display:inline-flex;align-items:center;justify-content:center;padding:", " ", ";border-radius:3px;font-size:1rem;line-height:1.2;text-decoration:none;transform-origin:50% 50%;transition:200ms ease,transform 300ms cubic-bezier(0.47,1.64,0.41,0.8);:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:", ";border-radius:3px;opacity:0;transition:opacity 150ms ease;}:hover{:before{opacity:1;}}:active{transform:scale(0.97);}&[disabled]{background-color:", ";border-color:", ";color:", ";}", " ", " ", "{padding:", " ", ";font-size:0.875rem;}"], size(1.75), size(6), props => props.theme.color.hoverOverlay, props => props.theme.color.disabledBg, props => props.theme.color.disabledBg, props => props.theme.color.disabledText, ({
   fullWidth
-}) => fullWidth && styled.css(["display:flex;width:100%;"])}
-
-  ${({
+}) => fullWidth && styled.css(["display:flex;width:100%;"]), ({
   inputHeight
-}) => inputHeight && styled.css(["height:", ";"], props => props.theme.distances.inputHeight)}
-
-  ${props => props.theme.breakpoint.LtSm} {
-    padding: ${size(1.75)} ${size(2.5)};
-    font-size: 0.875rem;
-  }
-`;
+}) => inputHeight && styled.css(["height:", ";"], props => props.theme.distances.inputHeight), props => props.theme.breakpoint.LtSm, size(1.75), size(2.5));
 const ButtonPrimary = styled__default(ButtonBase).attrs(() => ({
   className: 'wayke__theme wayke__color--primary-bg wayke__font--bold'
-}))``;
+})).withConfig({
+  displayName: "Button__ButtonPrimary"
+})([""]);
 const ButtonSecondary = styled__default(ButtonBase).attrs(() => ({
   className: 'wayke__theme wayke__color--secondary-bg wayke__font--bold'
-}))`
-  background-color: ${props => props.theme.color.accentDark};
-  color: ${props => props.theme.color.textDark};
-`;
-const ButtonContent = styled__default.div`
-  position: relative;
-  z-index: 1;
-
-  & + & {
-    margin-left: ${size(0.5)};
-  }
-`;
+})).withConfig({
+  displayName: "Button__ButtonSecondary"
+})(["background-color:", ";color:", ";"], props => props.theme.color.accentDark, props => props.theme.color.textDark);
+const ButtonContent = styled__default.div.withConfig({
+  displayName: "Button__ButtonContent"
+})(["position:relative;z-index:1;& + &{margin-left:", ";}"], size(0.5));
 const ButtonClear = styled__default(ButtonReset).attrs(() => ({
   className: 'wayke__theme wayke__color--primary-text wayke__font--bold'
-}))`
-  position: relative;
-  font-size: 0.875rem;
-  padding: ${size(1.5)};
-  margin: ${size(-1.5)};
-  text-align: left;
-  transform-origin: 50% 50%;
-  transition: transform 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
-
-  ${UtilityTextRight} & {
-    text-align: right;
-  }
-
-  :before {
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background-color: ${props => props.theme.color.accentDark};
-    border-radius: 3px;
-    opacity: 0;
-    transition: opacity 200ms ease;
-  }
-
-  :hover {
-    :before {
-      opacity: 1;
-    }
-  }
-
-  :active {
-    transform: scale(0.95);
-  }
-`;
+})).withConfig({
+  displayName: "Button__ButtonClear"
+})(["position:relative;font-size:0.875rem;padding:", ";margin:", ";text-align:left;transform-origin:50% 50%;transition:transform 300ms cubic-bezier(0.47,1.64,0.41,0.8);", " &{text-align:right;}:before{content:'';position:absolute;top:0;bottom:0;left:0;right:0;background-color:", ";border-radius:3px;opacity:0;transition:opacity 200ms ease;}:hover{:before{opacity:1;}}:active{transform:scale(0.95);}"], size(1.5), size(-1.5), UtilityTextRight, props => props.theme.color.accentDark);
 const ButtonInline = styled__default(ButtonReset).attrs(() => ({
   className: 'wayke__theme wayke__color--primary-text wayke__font--regular'
-}))`
-  display: inline-flex;
-  vertical-align: baseline;
-  text-align: left;
-  text-decoration: underline;
-
-  :not(:hover) {
-    color: ${props => props.theme.color.textDark};
-  }
-
-  ${({
+})).withConfig({
+  displayName: "Button__ButtonInline"
+})(["display:inline-flex;vertical-align:baseline;text-align:left;text-decoration:underline;:not(:hover){color:", ";}", ""], props => props.theme.color.textDark, ({
   inline
-}) => inline && styled.css(["display:inline;"])}
-`;
+}) => inline && styled.css(["display:inline;"]));
 const ButtonInlineBold = styled__default(ButtonReset).attrs(() => ({
   className: 'wayke__theme wayke__color--primary-text wayke__font--bold'
-}))`
-  display: inline-flex;
-  vertical-align: baseline;
-  text-align: left;
-
-  :hover {
-    text-decoration: underline;
-  }
-`;
+})).withConfig({
+  displayName: "Button__ButtonInlineBold"
+})(["display:inline-flex;vertical-align:baseline;text-align:left;:hover{text-decoration:underline;}"]);
 const ButtonInlineLight = styled__default(ButtonReset).attrs(() => ({
   className: 'wayke__theme wayke__color--primary-text wayke__font--regular'
-}))`
-  display: inline-flex;
-  vertical-align: baseline;
-  text-align: left;
-  text-decoration: none;
-
-  :not(:hover) {
-    color: ${props => props.theme.color.textDarkLighten};
-  }
-`;
+})).withConfig({
+  displayName: "Button__ButtonInlineLight"
+})(["display:inline-flex;vertical-align:baseline;text-align:left;text-decoration:none;:not(:hover){color:", ";}"], props => props.theme.color.textDarkLighten);
 const ButtonInlinePrimary = styled__default(ButtonReset).attrs(() => ({
   className: 'wayke__theme wayke__color--primary-text wayke__font--regular'
-}))`
-  display: inline-flex;
-  vertical-align: baseline;
-  text-align: left;
-
-  :hover {
-    text-decoration: underline;
-  }
-`;
+})).withConfig({
+  displayName: "Button__ButtonInlinePrimary"
+})(["display:inline-flex;vertical-align:baseline;text-align:left;:hover{text-decoration:underline;}"]);
 
 const noTransform = styled.keyframes(["to{transform:none;}"]);
 const fadeIn = styled.keyframes(["from{opacity:0;}to{opacity:1;}"]);
 const rotate = styled.keyframes(["to{transform:rotate(360deg);}"]);
 
-const Spinner = styled__default.div`
-  display: block;
-  margin: 0 auto;
-  width: ${size(4)};
-  height: ${size(4)};
-  border-radius: 50%;
-  border: 2px solid currentColor;
-  border-top-color: transparent;
-  animation: ${rotate} 600ms linear infinite;
-`;
+const Spinner = styled__default.div.withConfig({
+  displayName: "wrapper__Spinner"
+})(["display:block;margin:0 auto;width:", ";height:", ";border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:", " 600ms linear infinite;"], size(4), size(4), rotate);
 const Wrapper$3 = styled__default.div.attrs(() => ({
   className: 'wayke__theme wayke__color--primary-text',
   role: 'status'
-}))`
-  ${({
+})).withConfig({
+  displayName: "wrapper__Wrapper"
+})(["", " ", ""], ({
   inline
-}) => inline && styled.css(["display:inline-block;vertical-align:middle;color:currentColor !important;", "{width:1em;height:1em;}"], Spinner)}
-
-  ${({
+}) => inline && styled.css(["display:inline-block;vertical-align:middle;color:currentColor !important;", "{width:1em;height:1em;}"], Spinner), ({
   center
-}) => center && styled.css(["position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);"])}
-`;
+}) => center && styled.css(["position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);"]));
 
-const SrOnly = styled__default.div`
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-`;
+const SrOnly = styled__default.div.withConfig({
+  displayName: "SrOnly"
+})(["position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;"]);
 
 const Loader = ({
   inline,
@@ -608,65 +432,28 @@ const SearchContext = React.createContext({
 const useSearch = () => React.useContext(SearchContext);
 
 const iconSize = '0.875rem';
-const Wrapper$4 = styled__default.div`
-  position: relative;
-`;
+const Wrapper$4 = styled__default.div.withConfig({
+  displayName: "wrapper__Wrapper"
+})(["position:relative;"]);
 const Select = styled__default.select.attrs(() => ({
   className: 'wayke__theme wayke__font--regular'
-}))`
-  position: relative;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-  text-indent: 0.01px;
-  border: 0;
-  padding: 0;
-  padding-right: calc(${iconSize} + ${size(1)});
-  background-color: transparent;
-  color: ${props => props.theme.color.textDark};
-  border-radius: 0;
-  font-size: 16px;
-  cursor: pointer;
-  z-index: 1;
-
-  :focus {
-    outline: none;
-    text-decoration: underline;
-  }
-
-  ::-ms-expand {
-    display: none;
-  }
-
-  ::-moz-focus-inner {
-    border: 0;
-  }
-`;
-const Option = styled__default.option`
-  color: ${props => props.theme.color.textDark};
-`;
-const Icon = styled__default.div`
-  position: absolute;
-  top: 50%;
-  right: 0;
-  transform: translateY(-50%);
-  font-size: ${iconSize};
-`;
+})).withConfig({
+  displayName: "wrapper__Select"
+})(["position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-tap-highlight-color:rgba(255,255,255,0);text-indent:0.01px;border:0;padding:0;padding-right:calc(", " + ", ");background-color:transparent;color:", ";border-radius:0;font-size:16px;cursor:pointer;z-index:1;:focus{outline:none;text-decoration:underline;}::-ms-expand{display:none;}::-moz-focus-inner{border:0;}"], iconSize, size(1), props => props.theme.color.textDark);
+const Option = styled__default.option.withConfig({
+  displayName: "wrapper__Option"
+})(["color:", ";"], props => props.theme.color.textDark);
+const Icon = styled__default.div.withConfig({
+  displayName: "wrapper__Icon"
+})(["position:absolute;top:50%;right:0;transform:translateY(-50%);font-size:", ";"], iconSize);
 
 const Icon$1 = styled__default.svg.attrs(() => ({
   xmlns: 'http://www.w3.org/2000/svg'
-}))`
-  display: inline-block;
-  vertical-align: middle;
-  width: 1em;
-  height: 1em;
-  fill: currentColor;
-
-  ${({
+})).withConfig({
+  displayName: "Icon"
+})(["display:inline-block;vertical-align:middle;width:1em;height:1em;fill:currentColor;", ""], ({
   block
-}) => block && styled.css(["display:block;"])}
-`;
+}) => block && styled.css(["display:block;"]));
 const IconInfo = ({
   block
 }) => React.createElement(Icon$1, {
@@ -841,29 +628,18 @@ const Result = ({
   }, React__default.createElement(ButtonContent, null, "Visa fler")))));
 };
 
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
 
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    });
+
+    if (enumerableOnly) {
+      symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+    }
+
     keys.push.apply(keys, symbols);
   }
 
@@ -890,98 +666,57 @@ function _objectSpread2(target) {
   return target;
 }
 
-const List = styled__default.ul`
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  list-style: none;
-  padding: 0;
-  margin: ${size(-0.5)};
-`;
-const Item = styled__default.li`
-  padding: ${size(0.5)};
-`;
-const Action = styled__default(ButtonReset)`
-  position: relative;
-  display: flex;
-  align-items: center;
-  padding: ${size(1.5)} ${size(3)};
-  background-color: ${props => props.theme.color.accentDark};
-  border-radius: 3px;
-  font-size: 0.875rem;
-  line-height: 1;
-  transform-origin: 50% 50%;
-  transition: transform 150ms ease;
-
-  :before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: ${props => props.theme.color.hoverOverlay};
-    border-radius: 3px;
-    opacity: 0;
-    transition: opacity 150ms ease;
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
   }
 
-  :hover {
-    :before {
-      opacity: 1;
-    }
-  }
+  return obj;
+}
 
-  :active {
-    transform: scale(0.95);
-  }
-`;
-const Label = styled__default.div`
-  z-index: 1;
-`;
-const Indicator = styled__default.div`
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 ${size(0.375)};
-  margin-left: ${size(0.5)};
-  background-color: currentColor;
-  min-width: 1em;
-  height: 1em;
-  border-radius: 999px;
-  z-index: 1;
-`;
-const IndicatorValue = styled__default.div`
-  font-family: sans-serif; // Default font to guarantee visibility
-  font-size: 0.75rem;
-  font-weight: bold;
-  color: white;
-  mix-blend-mode: difference;
-`;
+const List = styled__default.ul.withConfig({
+  displayName: "wrapper__List"
+})(["display:flex;align-items:center;flex-wrap:wrap;list-style:none;padding:0;margin:", ";"], size(-0.5));
+const Item = styled__default.li.withConfig({
+  displayName: "wrapper__Item"
+})(["padding:", ";"], size(0.5));
+const Action = styled__default(ButtonReset).withConfig({
+  displayName: "wrapper__Action"
+})(["position:relative;display:flex;align-items:center;padding:", " ", ";background-color:", ";border-radius:3px;font-size:0.875rem;line-height:1;transform-origin:50% 50%;transition:transform 150ms ease;:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:", ";border-radius:3px;opacity:0;transition:opacity 150ms ease;}:hover{:before{opacity:1;}}:active{transform:scale(0.95);}"], size(1.5), size(3), props => props.theme.color.accentDark, props => props.theme.color.hoverOverlay);
+const Label = styled__default.div.withConfig({
+  displayName: "wrapper__Label"
+})(["z-index:1;"]);
+const Indicator = styled__default.div.withConfig({
+  displayName: "wrapper__Indicator"
+})(["flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0 ", ";margin-left:", ";background-color:currentColor;min-width:1em;height:1em;border-radius:999px;z-index:1;"], size(0.375), size(0.5));
+const IndicatorValue = styled__default.div.withConfig({
+  displayName: "wrapper__IndicatorValue"
+})(["font-family:sans-serif;font-size:0.75rem;font-weight:bold;color:white;mix-blend-mode:difference;"]);
 
 const HeadingBase = styled__default.div.attrs(() => ({
   className: 'wayke__theme wayke__font--bold'
-}))`
-  margin-top: 0;
-  margin-bottom: ${size(2)};
-  font-weight: normal;
-  line-height: 1.2;
-
-  ${({
+})).withConfig({
+  displayName: "Heading__HeadingBase"
+})(["margin-top:0;margin-bottom:", ";font-weight:normal;line-height:1.2;", ""], size(2), ({
   noMargin
-}) => noMargin && styled.css(["margin-bottom:0;"])}
-`;
+}) => noMargin && styled.css(["margin-bottom:0;"]));
 const H1 = styled__default(HeadingBase).attrs(props => ({
   as: props.as || 'h1'
-}))`
-  font-size: 1.875rem;
-`;
+})).withConfig({
+  displayName: "Heading__H1"
+})(["font-size:1.875rem;"]);
 const H2 = styled__default(HeadingBase).attrs(props => ({
   as: props.as || 'h2'
-}))`
-  font-size: 1.5rem;
-`;
+})).withConfig({
+  displayName: "Heading__H2"
+})(["font-size:1.5rem;"]);
 /*
 export const H3 = styled(HeadingBase).attrs<{ as: string }>((props) => ({
   as: props.as || 'h3',
@@ -992,14 +727,14 @@ export const H3 = styled(HeadingBase).attrs<{ as: string }>((props) => ({
 
 const H4 = styled__default(HeadingBase).attrs(props => ({
   as: props.as || 'h4'
-}))`
-  font-size: 1rem;
-`;
+})).withConfig({
+  displayName: "Heading__H4"
+})(["font-size:1rem;"]);
 const H5 = styled__default(HeadingBase).attrs(props => ({
   as: props.as || 'h5'
-}))`
-  font-size: 0.875rem;
-`;
+})).withConfig({
+  displayName: "Heading__H5"
+})(["font-size:0.875rem;"]);
 /*
 export const H6 = styled(HeadingBase).attrs<{ as: string }>((props) => ({
   as: props.as || 'h6',
@@ -1010,148 +745,52 @@ export const H6 = styled(HeadingBase).attrs<{ as: string }>((props) => ({
 
 const VisualHeading = styled__default.div.attrs(() => ({
   className: 'wayke__theme wayke__font--bold'
-}))`
-  font-size: 1em;
-`;
+})).withConfig({
+  displayName: "Heading__VisualHeading"
+})(["font-size:1em;"]);
 
 const Wrapper$5 = styled__default.div.attrs(() => ({
   role: 'dialog'
-}))`
-  position: relative;
-  z-index: 80;
-`;
+})).withConfig({
+  displayName: "wrapper__Wrapper"
+})(["position:relative;z-index:80;"]);
 const UiBlock = styled__default.div.attrs(() => ({
   'aria-hidden': 'true',
   role: 'button'
-}))`
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: rgba(0, 0, 0, 0.35);
-  animation: ${fadeIn} 200ms ease;
-`;
+})).withConfig({
+  displayName: "wrapper__UiBlock"
+})(["position:fixed;top:0;bottom:0;left:0;right:0;background-color:rgba(0,0,0,0.35);animation:", " 200ms ease;"], fadeIn);
 const PanelWrapper = styled__default.article.attrs(() => ({
   className: 'wayke__theme wayke__font--regular'
-}))`
-  display: flex;
-  flex-direction: column;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  width: 100%;
-  background-color: ${props => props.theme.color.accent};
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
-  z-index: 1;
-  animation: ${noTransform} 200ms ease forwards;
-
-  ${props => props.theme.breakpoint.Sm} {
-    max-width: 450px;
-    transform: translateX(100%);
-  }
-
-  ${props => props.theme.breakpoint.LtSm} {
-    top: auto;
-    max-height: 100%;
-    transform: translateY(100%);
-  }
-`;
-const Header$1 = styled__default.header`
-  position: relative;
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  min-height: 45px;
-  padding: ${size(3)};
-  padding-bottom: 0;
-
-  :after {
-    content: '';
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    height: ${size(3)};
-    background-image: linear-gradient(
-      ${props => props.theme.color.accent},
-      ${props => props.theme.color.accentTransparent}
-    );
-    z-index: 1;
-  }
-`;
-const Heading = styled__default.div`
-  flex: 1 1 auto;
-
-  ${H1} {
-    font-size: 1.5rem;
-  }
-`;
-const Close = styled__default.div`
-  flex-shrink: 0;
-  margin: ${size(-2)};
-  padding-left: ${size(3)};
-`;
-const CloseBtn = styled__default(ButtonReset)`
-  position: relative;
-  display: block;
-  padding: ${size(2)};
-  transform-origin: 50% 50%;
-  transition: transform 200ms ease;
-  z-index: 2;
-
-  :before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    background-color: ${props => props.theme.color.accent};
-    opacity: 0;
-    transition: opacity 200ms ease;
-    z-index: -1;
-  }
-
-  :active {
-    transform: scale(0.9);
-  }
-
-  :hover {
-    :before {
-      opacity: 1;
-    }
-  }
-`;
-const Body$1 = styled__default.div`
-  flex: 1 1 auto;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-  padding: ${size(3)};
-`;
-const Footer$1 = styled__default.footer`
-  position: relative;
-  flex-shrink: 0;
-  padding: ${size(3)};
-  border-top: 1px solid ${props => props.theme.color.border};
-`;
+})).withConfig({
+  displayName: "wrapper__PanelWrapper"
+})(["display:flex;flex-direction:column;position:fixed;top:0;bottom:0;right:0;width:100%;background-color:", ";box-shadow:0 4px 8px rgba(0,0,0,0.05);z-index:1;animation:", " 200ms ease forwards;", "{max-width:450px;transform:translateX(100%);}", "{top:auto;max-height:100%;transform:translateY(100%);}"], props => props.theme.color.accent, noTransform, props => props.theme.breakpoint.Sm, props => props.theme.breakpoint.LtSm);
+const Header$1 = styled__default.header.withConfig({
+  displayName: "wrapper__Header"
+})(["position:relative;display:flex;flex-shrink:0;align-items:center;min-height:45px;padding:", ";padding-bottom:0;:after{content:'';position:absolute;top:100%;left:0;right:0;height:", ";background-image:linear-gradient( ", ",", " );z-index:1;}"], size(3), size(3), props => props.theme.color.accent, props => props.theme.color.accentTransparent);
+const Heading = styled__default.div.withConfig({
+  displayName: "wrapper__Heading"
+})(["flex:1 1 auto;", "{font-size:1.5rem;}"], H1);
+const Close = styled__default.div.withConfig({
+  displayName: "wrapper__Close"
+})(["flex-shrink:0;margin:", ";padding-left:", ";"], size(-2), size(3));
+const CloseBtn = styled__default(ButtonReset).withConfig({
+  displayName: "wrapper__CloseBtn"
+})(["position:relative;display:block;padding:", ";transform-origin:50% 50%;transition:transform 200ms ease;z-index:2;:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background-color:", ";opacity:0;transition:opacity 200ms ease;z-index:-1;}:active{transform:scale(0.9);}:hover{:before{opacity:1;}}"], size(2), props => props.theme.color.accent);
+const Body$1 = styled__default.div.withConfig({
+  displayName: "wrapper__Body"
+})(["flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;padding:", ";"], size(3));
+const Footer$1 = styled__default.footer.withConfig({
+  displayName: "wrapper__Footer"
+})(["position:relative;flex-shrink:0;padding:", ";border-top:1px solid ", ";"], size(3), props => props.theme.color.border);
 const FooterAction$1 = styled__default.div.attrs(() => ({
   role: 'group'
-}))`
-  display: flex;
-  align-items: center;
-  margin: ${size(-0.5)};
-`;
-const FooterActionItem = styled__default.div`
-  flex: 1 1 50%;
-  padding: ${size(0.5)};
-
-  ${ButtonReset} {
-    padding: ${size(1.75)} ${size(2)};
-  }
-`;
+})).withConfig({
+  displayName: "wrapper__FooterAction"
+})(["display:flex;align-items:center;margin:", ";"], size(-0.5));
+const FooterActionItem = styled__default.div.withConfig({
+  displayName: "wrapper__FooterActionItem"
+})(["flex:1 1 50%;padding:", ";", "{padding:", " ", ";}"], size(0.5), ButtonReset, size(1.75), size(2));
 
 const DefaultPortal = 'DEFAULT_PORTAL';
 
@@ -1218,86 +857,37 @@ const Panel = ({
   })))), React.createElement(Body$1, null, children), footer && React.createElement(Footer$1, null, footer))));
 };
 
-const List$1 = styled__default.ul`
-  list-style: none;
-  padding: 0;
-  margin: ${size(-1)} 0;
-  font-size: 1rem;
-`;
-const Header$2 = styled__default(ButtonReset)`
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding: ${size(3)} 0;
-  text-align: left;
-  font: inherit;
-`;
-const Label$1 = styled__default.div`
-  display: flex;
-  align-items: center;
-  flex: 1 1 auto;
-`;
-const Heading$1 = styled__default.div`
-  line-height: 1;
-`;
+const List$1 = styled__default.ul.withConfig({
+  displayName: "wrapper__List"
+})(["list-style:none;padding:0;margin:", " 0;font-size:1rem;"], size(-1));
+const Header$2 = styled__default(ButtonReset).withConfig({
+  displayName: "wrapper__Header"
+})(["display:flex;align-items:center;width:100%;padding:", " 0;text-align:left;font:inherit;"], size(3));
+const Label$1 = styled__default.div.withConfig({
+  displayName: "wrapper__Label"
+})(["display:flex;align-items:center;flex:1 1 auto;"]);
+const Heading$1 = styled__default.div.withConfig({
+  displayName: "wrapper__Heading"
+})(["line-height:1;"]);
 const Indicator$1 = styled__default.div.attrs(() => ({
   className: 'wayke__theme wayke__color--primary-bg'
-}))`
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 ${size(0.375)};
-  margin-left: ${size(0.5)};
-  min-width: 1em;
-  height: 1em;
-  border-radius: 999px;
-  z-index: 1;
-`;
-const IndicatorValue$1 = styled__default.div`
-  font-family: sans-serif; // Default font to guarantee visibility
-  font-size: 0.75rem;
-  font-weight: bold;
-`;
-const Icon$2 = styled__default.div`
-  position: relative;
-  flex-shrink: 0;
-  padding-left: ${size(1)};
-  transition: color 150ms ease;
-
-  :before {
-    content: '';
-    position: absolute;
-    top: ${size(-1)};
-    bottom: ${size(-1)};
-    left: 0;
-    right: ${size(-1)};
-    border-radius: 50%;
-    background-color: ${props => props.theme.color.accent};
-    z-index: -1;
-    opacity: 0;
-    transition: opacity 200ms ease;
-  }
-
-  ${Header$2}:hover & {
-    :before {
-      opacity: 1;
-    }
-  }
-`;
-const Body$2 = styled__default.div`
-  display: none;
-  padding-bottom: ${size(3)};
-`;
-const Item$1 = styled__default.li`
-  & + & {
-    border-top: 1px solid ${props => props.theme.color.border};
-  }
-
-  ${({
+})).withConfig({
+  displayName: "wrapper__Indicator"
+})(["flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0 ", ";margin-left:", ";min-width:1em;height:1em;border-radius:999px;z-index:1;"], size(0.375), size(0.5));
+const IndicatorValue$1 = styled__default.div.withConfig({
+  displayName: "wrapper__IndicatorValue"
+})(["font-family:sans-serif;font-size:0.75rem;font-weight:bold;"]);
+const Icon$2 = styled__default.div.withConfig({
+  displayName: "wrapper__Icon"
+})(["position:relative;flex-shrink:0;padding-left:", ";transition:color 150ms ease;:before{content:'';position:absolute;top:", ";bottom:", ";left:0;right:", ";border-radius:50%;background-color:", ";z-index:-1;opacity:0;transition:opacity 200ms ease;}", ":hover &{:before{opacity:1;}}"], size(1), size(-1), size(-1), size(-1), props => props.theme.color.accent, Header$2);
+const Body$2 = styled__default.div.withConfig({
+  displayName: "wrapper__Body"
+})(["display:none;padding-bottom:", ";"], size(3));
+const Item$1 = styled__default.li.withConfig({
+  displayName: "wrapper__Item"
+})(["& + &{border-top:1px solid ", ";}", ""], props => props.theme.color.border, ({
   isOpen
-}) => isOpen && styled.css(["", "{display:block;}", "{svg{transform:rotate(180deg);}}"], Body$2, Icon$2)}
-`;
+}) => isOpen && styled.css(["", "{display:block;}", "{svg{transform:rotate(180deg);}}"], Body$2, Icon$2));
 
 const AccordionItem = ({
   heading,
@@ -1323,78 +913,35 @@ const Accordion = ({
   children
 }) => React__default.createElement(List$1, null, children);
 
-const Repeat = styled__default.div`
-  & + & {
-    margin-top: ${size(3)};
-  }
-`;
-const RepeatTiny = styled__default.div`
-  & + & {
-    margin-top: ${size(1)};
-  }
-`;
-const RepeatSmall = styled__default.div`
-  & + & {
-    margin-top: ${size(2)};
-  }
-`;
+const Repeat = styled__default.div.withConfig({
+  displayName: "Repeat"
+})(["& + &{margin-top:", ";}"], size(3));
+const RepeatTiny = styled__default.div.withConfig({
+  displayName: "Repeat__RepeatTiny"
+})(["& + &{margin-top:", ";}"], size(1));
+const RepeatSmall = styled__default.div.withConfig({
+  displayName: "Repeat__RepeatSmall"
+})(["& + &{margin-top:", ";}"], size(2));
 
 const List$2 = styled__default.ul.attrs(() => ({
   className: 'wayke__theme wayke__font--regular'
-}))`
-  list-style: none;
-  padding: 0;
-  margin: ${size(-1)} 0;
-  font-size: 0.875rem;
-  overflow: hidden;
-`;
-const Item$2 = styled__default.li`
-  ${List$2} {
-    padding-left: ${size(5)};
-    margin: 0;
-  }
-`;
-const Action$1 = styled__default(ButtonReset)`
-  position: relative;
-  display: block;
-  width: 100%;
-  text-align: left;
-  font: inherit;
-  padding: ${size(1)} 0;
-
-  :before {
-    content: '';
-    position: absolute;
-    left: 0;
-    width: ${size(2)};
-    height: ${size(2)};
-    border-radius: 3px;
-    background-color: ${props => props.theme.color.accentDark};
-    margin-top: 2px; // Magic number
-  }
-`;
+})).withConfig({
+  displayName: "wrapper__List"
+})(["list-style:none;padding:0;margin:", " 0;font-size:0.875rem;overflow:hidden;"], size(-1));
+const Item$2 = styled__default.li.withConfig({
+  displayName: "wrapper__Item"
+})(["", "{padding-left:", ";margin:0;}"], List$2, size(5));
+const Action$1 = styled__default(ButtonReset).withConfig({
+  displayName: "wrapper__Action"
+})(["position:relative;display:block;width:100%;text-align:left;font:inherit;padding:", " 0;:before{content:'';position:absolute;left:0;width:", ";height:", ";border-radius:3px;background-color:", ";margin-top:2px;}"], size(1), size(2), size(2), props => props.theme.color.accentDark);
 const ActionIcon = styled__default.div.attrs(() => ({
   className: 'wayke__theme wayke__color--primary-text'
-}))`
-  position: absolute;
-  top: ${size(1)};
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: ${size(2)};
-  height: ${size(2)};
-  margin-top: 2px; // Magic number
-  font-size: ${size(1.5)};
-`;
-const ActionLabel = styled__default.div`
-  padding-left: ${size(3)};
-  transition: transform 150ms ease;
-
-  ${Action$1}:hover & {
-    transform: translateX(${size(0.5)});
-  }
-`;
+})).withConfig({
+  displayName: "wrapper__ActionIcon"
+})(["position:absolute;top:", ";left:0;display:flex;align-items:center;justify-content:center;width:", ";height:", ";margin-top:2px;font-size:", ";"], size(1), size(2), size(2), size(1.5));
+const ActionLabel = styled__default.div.withConfig({
+  displayName: "wrapper__ActionLabel"
+})(["padding-left:", ";transition:transform 150ms ease;", ":hover &{transform:translateX(", ");}"], size(3), Action$1, size(0.5));
 
 const ChecklistItem = ({
   label,
@@ -1428,11 +975,9 @@ const Checklist = ({
   })));
 };
 
-const Wrapper$6 = styled__default.div`
-  max-height: 400px;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-`;
+const Wrapper$6 = styled__default.div.withConfig({
+  displayName: "wrapper__Wrapper"
+})(["max-height:400px;overflow:auto;-webkit-overflow-scrolling:touch;"]);
 
 const OverflowBox = ({
   children
@@ -1467,68 +1012,25 @@ const ChecklistFacet = ({
   }));
 };
 
-const List$3 = styled__default.ul`
-  display: flex;
-  flex-wrap: wrap;
-  list-style: none;
-  padding: 0;
-  margin: ${size(-1.5)};
-`;
-const Item$3 = styled__default.li`
-  flex: 1 1 auto;
-  width: 33.333%;
-  max-width: 33.333%;
-  padding: ${size(1.5)};
-`;
-const Action$2 = styled__default(ButtonReset)`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  font: inherit;
-
-  &[disabled] {
-    opacity: 0.4;
-    cursor: default;
-  }
-`;
-const Color = styled__default.div`
-  position: relative;
-  width: ${size(3.75)};
-  height: ${size(3.75)};
-  border-radius: 50%;
-  color: ${props => props.theme.color.border};
-
-  :before {
-    content: '';
-    position: absolute;
-    top: -5px;
-    bottom: -5px;
-    left: -5px;
-    right: -5px;
-    border: 2px solid;
-    border-radius: 50%;
-    display: none;
-  }
-
-  ${Action$2}:not([disabled]):hover & {
-    :before {
-      display: block;
-    }
-  }
-
-  ${({
+const List$3 = styled__default.ul.withConfig({
+  displayName: "wrapper__List"
+})(["display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:", ";"], size(-1.5));
+const Item$3 = styled__default.li.withConfig({
+  displayName: "wrapper__Item"
+})(["flex:1 1 auto;width:33.333%;max-width:33.333%;padding:", ";"], size(1.5));
+const Action$2 = styled__default(ButtonReset).withConfig({
+  displayName: "wrapper__Action"
+})(["display:flex;flex-direction:column;align-items:center;width:100%;font:inherit;&[disabled]{opacity:0.4;cursor:default;}"]);
+const Color = styled__default.div.withConfig({
+  displayName: "wrapper__Color"
+})(["position:relative;width:", ";height:", ";border-radius:50%;color:", ";:before{content:'';position:absolute;top:-5px;bottom:-5px;left:-5px;right:-5px;border:2px solid;border-radius:50%;display:none;}", ":not([disabled]):hover &{:before{display:block;}}", " ", ""], size(3.75), size(3.75), props => props.theme.color.border, Action$2, ({
   active
-}) => active && styled.css([":before{display:block;}"])}
-
-  ${({
+}) => active && styled.css([":before{display:block;}"]), ({
   boxShadow
-}) => boxShadow && styled.css(["box-shadow:0 0 4px rgba(0,0,0,0.2);"])}
-`;
-const Label$2 = styled__default.div`
-  margin-top: ${size(1.25)};
-  font-size: 0.875rem;
-`;
+}) => boxShadow && styled.css(["box-shadow:0 0 4px rgba(0,0,0,0.2);"]));
+const Label$2 = styled__default.div.withConfig({
+  displayName: "wrapper__Label"
+})(["margin-top:", ";font-size:0.875rem;"], size(1.25));
 
 const ColorSelectItem = ({
   label,
@@ -1647,90 +1149,29 @@ const ColorSelectFacet = ({
   });
 };
 
-const RangeSpan = styled__default.div`
-  display: flex;
-  align-items: center;
-  margin-top: ${size(1)};
-  user-select: none;
-`;
-const RangeSpanItem = styled__default.div`
-  font-size: 0.875rem;
-  color: ${props => props.theme.color.textDarkLighten};
-
-  :first-child {
-    flex: 1 1 auto;
-  }
-
-  :last-child {
-    flex-shrink: 0;
-  }
-`;
-const Slider = styled__default.div`
-  padding: 10px 12px;
-`;
-const Bar$1 = styled__default.div`
-  position: relative;
-  height: 4px;
-
-  :before {
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: -12px;
-    right: -12px;
-    background-color: ${props => props.theme.color.accentDark};
-  }
-`;
+const RangeSpan = styled__default.div.withConfig({
+  displayName: "wrapper__RangeSpan"
+})(["display:flex;align-items:center;margin-top:", ";user-select:none;"], size(1));
+const RangeSpanItem = styled__default.div.withConfig({
+  displayName: "wrapper__RangeSpanItem"
+})(["font-size:0.875rem;color:", ";:first-child{flex:1 1 auto;}:last-child{flex-shrink:0;}"], props => props.theme.color.textDarkLighten);
+const Slider = styled__default.div.withConfig({
+  displayName: "wrapper__Slider"
+})(["padding:10px 12px;"]);
+const Bar$1 = styled__default.div.withConfig({
+  displayName: "wrapper__Bar"
+})(["position:relative;height:4px;:before{content:'';position:absolute;top:0;bottom:0;left:-12px;right:-12px;background-color:", ";}"], props => props.theme.color.accentDark);
 const Track = styled__default.div.attrs(() => ({
   className: 'wayke__theme wayke__color--primary-bg'
-}))`
-  position: absolute;
-  top: 0;
-  height: 4px;
-  margin-left: -12px;
-  margin-right: -12px;
-`;
+})).withConfig({
+  displayName: "wrapper__Track"
+})(["position:absolute;top:0;height:4px;margin-left:-12px;margin-right:-12px;"]);
 const Handle = styled__default.div.attrs(() => ({
   role: 'slider',
   className: 'wayke__theme wayke__color--primary-bg'
-}))`
-  position: absolute;
-  top: 50%;
-  transform-origin: 50% 50%;
-  display: block;
-  width: 24px;
-  height: 24px;
-  margin-top: -12px;
-  margin-left: -12px;
-  border-radius: 50%;
-  cursor: move;
-  cursor: ew-resize;
-  cursor: -webkit-grab;
-  cursor: grab;
-  transition: transform 150ms 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.2);
-    opacity: 0;
-    transition: opacity 150ms ease;
-  }
-
-  :active {
-    transform: scale(1.3);
-
-    :before {
-      opacity: 1;
-    }
-  }
-`;
+})).withConfig({
+  displayName: "wrapper__Handle"
+})(["position:absolute;top:50%;transform-origin:50% 50%;display:block;width:24px;height:24px;margin-top:-12px;margin-left:-12px;border-radius:50%;cursor:move;cursor:ew-resize;cursor:-webkit-grab;cursor:grab;transition:transform 150ms 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.2);opacity:0;transition:opacity 150ms ease;}:active{transform:scale(1.3);:before{opacity:1;}}"]);
 
 const Handle$1 = ({
   domain: [min, max],
@@ -1740,7 +1181,7 @@ const Handle$1 = ({
     percent
   },
   getHandleProps
-}) => React__default.createElement(Handle, Object.assign({
+}) => React__default.createElement(Handle, _objectSpread2({
   role: "slider",
   "aria-valuemin": min,
   "aria-valuemax": max,
@@ -1754,7 +1195,7 @@ const Track$1 = ({
   source,
   target,
   getTrackProps
-}) => React__default.createElement(Track, Object.assign({
+}) => React__default.createElement(Track, _objectSpread2({
   style: {
     left: `${source.percent}%`,
     width: `${target.percent - source.percent}%`
@@ -1833,7 +1274,7 @@ const RangeSlider = ({
     }
   }, React__default.createElement(reactCompoundSlider.Rail, null, ({
     getRailProps
-  }) => React__default.createElement(Bar$1, Object.assign({}, getRailProps()))), React__default.createElement(reactCompoundSlider.Handles, null, ({
+  }) => React__default.createElement(Bar$1, _objectSpread2({}, getRailProps()))), React__default.createElement(reactCompoundSlider.Handles, null, ({
     handles,
     getHandleProps
   }) => React__default.createElement("div", {
@@ -2123,225 +1564,91 @@ const Filter = ({
   })));
 };
 
-const Wrapper$7 = styled__default.div``;
-const List$4 = styled__default.ul`
-  display: flex;
-  flex-wrap: wrap;
-  list-style: none;
-  padding: 0;
-  margin: ${size(-2)} ${size(-1)};
-`;
-const Item$4 = styled__default.li`
-  flex: 1 1 auto;
-  width: 100%;
-  max-width: 100%;
-  padding: ${size(2)} ${size(1)};
-
-  ${props => props.theme.breakpoint.Sm} {
-    width: 50%;
-    max-width: 50%;
-  }
-
-  ${props => props.theme.breakpoint.Md} {
-    width: 33.333%;
-    max-width: 33.333%;
-  }
-`;
-
-const Wrapper$8 = styled__default.article`
-  position: relative;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  transform-origin: 50% 50%;
-  transition: transform 150ms ease;
-
-  :active {
-    transform: scale(0.98);
-  }
-`;
-const Image = styled__default.div`
-  flex-shrink: 0;
-  position: relative;
-  height: 0;
-  padding-bottom: 66.666%;
-  background-color: ${props => props.theme.color.accentDark};
-  border-radius: 3px;
-
-  :before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    border-radius: 3px;
-    opacity: 0;
-    transition: opacity 200ms ease;
-  }
-
-  ${Wrapper$8}:hover & {
-    :before {
-      opacity: 1;
-    }
-  }
-`;
-const Picture = styled__default.picture``;
-const Source = styled__default.source``;
-const Img = styled__default.img`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  top: auto;
-  left: auto;
-  border-radius: 3px;
-`;
-const Content = styled__default.div`
-  flex: 1 1 auto;
-  display: flex;
-  flex-direction: column;
-  margin-top: ${size(2)};
-`;
-const ContentBody = styled__default.div``;
-const ContentFooter = styled__default.div`
-  margin-top: auto;
-  padding-top: ${size(1)};
-`;
-const Heading$2 = styled__default.h1.attrs(() => ({
-  className: 'wayke__theme wayke__font--bold'
-}))`
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  font-weight: 400;
-  margin: 0;
-  font-size: 1rem;
-`;
-const Link = styled__default.a`
-  display: block;
-  color: inherit;
-  text-decoration: none;
-  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-
-  :before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  :focus {
-    text-decoration: underline;
-  }
-`;
-const Description$1 = styled__default.div`
-  font-size: 0.875rem;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  margin-top: ${size(0.25)};
-`;
-const Usp = styled__default.div`
-  margin-top: ${size(1)};
-`;
-const Price = styled__default.div`
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  width: 100%;
-`;
-const CurrentPrice = styled__default.div.attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-text wayke__font--bold'
-}))`
-  font-size: 1rem;
-  margin-right: ${size(1)};
-`;
-const PriceCell = styled__default.div`
-  flex: 1 1 auto;
-  padding-right: ${size(1)};
-`;
-const OldPrice = styled__default.div`
-  text-decoration: line-through;
-  color: ${props => props.theme.color.textDarkLighten};
-  font-size: 0.875rem;
-`;
-const Label$3 = styled__default.label`
-  color: ${props => props.theme.color.disabledText};
-  font-size: 0.875rem;
-`;
-
-const Item$5 = styled__default.li`
-  padding: ${size(0.5)};
-`;
-const Box = styled__default.div`
-  display: flex;
-  align-items: center;
-  background-color: ${props => props.theme.color.accentDark};
-  padding: ${size(1)} ${size(1.5)};
-  border-radius: 3px;
-  font-size: 0.875rem;
-  overflow-wrap: break-word;
-  hyphens: auto;
-`;
-const ItemSection = styled__default.div`
-  & + & {
-    margin-left: ${size(1)};
-  }
-`;
-const Action$3 = styled__default(ButtonReset).attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-text'
-}))`
-  position: relative;
-  display: block;
-  transform-origin: 50% 50%;
-  transition: transform 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
-
-  :before {
-    content: '';
-    position: absolute;
-    top: ${size(-0.5)};
-    bottom: ${size(-0.5)};
-    left: ${size(-0.5)};
-    right: ${size(-0.5)};
-    background-color: ${props => props.theme.color.accent};
-    border-radius: 50%;
-    opacity: 0;
-    transition: opacity 200ms ease;
-  }
-
-  > * {
-    position: relative;
-    z-index: 1;
-  }
-
-  :hover {
-    :before {
-      opacity: 1;
-    }
-  }
-
-  :active {
-    transform: scale(0.95);
-  }
-`;
-const List$5 = styled__default.ul`
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  list-style: none;
-  padding: 0;
-  margin: ${size(-0.5)};
-
-  ${({
-  isSmall
-}) => isSmall && styled.css(["margin:", ";", "{padding:", ";}", "{padding:", " ", ";font-size:0.75rem;}", "{& + &{margin-left:", ";}}"], size(-0.25), Item$5, size(0.25), Box, size(0.5), size(1), ItemSection, size(0.5))}
-`;
+const Wrapper$7 = styled__default.div.withConfig({
+  displayName: "wrapper__Wrapper"
+})([""]);
+const List$4 = styled__default.ul.withConfig({
+  displayName: "wrapper__List"
+})(["display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:", " ", ";"], size(-2), size(-1));
+const Item$4 = styled__default.li.withConfig({
+  displayName: "wrapper__Item"
+})(["flex:1 1 auto;width:100%;max-width:100%;padding:", " ", ";", "{width:50%;max-width:50%;}", "{width:33.333%;max-width:33.333%;}"], size(2), size(1), props => props.theme.breakpoint.Sm, props => props.theme.breakpoint.Md);
+
+const Wrapper$8 = styled__default.article.withConfig({
+  displayName: "wrapper__Wrapper"
+})(["position:relative;height:100%;display:flex;flex-direction:column;transform-origin:50% 50%;transition:transform 150ms ease;:active{transform:scale(0.98);}"]);
+const Image = styled__default.div.withConfig({
+  displayName: "wrapper__Image"
+})(["flex-shrink:0;position:relative;height:0;padding-bottom:66.666%;background-color:", ";border-radius:3px;:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;box-shadow:0 4px 8px rgba(0,0,0,0.1);border-radius:3px;opacity:0;transition:opacity 200ms ease;}", ":hover &{:before{opacity:1;}}"], props => props.theme.color.accentDark, Wrapper$8);
+const Picture = styled__default.picture.withConfig({
+  displayName: "wrapper__Picture"
+})([""]);
+const Source = styled__default.source.withConfig({
+  displayName: "wrapper__Source"
+})([""]);
+const Img = styled__default.img.withConfig({
+  displayName: "wrapper__Img"
+})(["position:absolute;width:100%;height:100%;object-fit:cover;top:auto;left:auto;border-radius:3px;"]);
+const Content = styled__default.div.withConfig({
+  displayName: "wrapper__Content"
+})(["flex:1 1 auto;display:flex;flex-direction:column;margin-top:", ";"], size(2));
+const ContentBody = styled__default.div.withConfig({
+  displayName: "wrapper__ContentBody"
+})([""]);
+const ContentFooter = styled__default.div.withConfig({
+  displayName: "wrapper__ContentFooter"
+})(["margin-top:auto;padding-top:", ";"], size(1));
+const Heading$2 = styled__default.h1.attrs(() => ({
+  className: 'wayke__theme wayke__font--bold'
+})).withConfig({
+  displayName: "wrapper__Heading"
+})(["display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:400;margin:0;font-size:1rem;"]);
+const Link = styled__default.a.withConfig({
+  displayName: "wrapper__Link"
+})(["display:block;color:inherit;text-decoration:none;-webkit-tap-highlight-color:rgba(255,255,255,0);:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;}:focus{text-decoration:underline;}"]);
+const Description$1 = styled__default.div.withConfig({
+  displayName: "wrapper__Description"
+})(["font-size:0.875rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:", ";"], size(0.25));
+const Usp = styled__default.div.withConfig({
+  displayName: "wrapper__Usp"
+})(["margin-top:", ";"], size(1));
+const Price = styled__default.div.withConfig({
+  displayName: "wrapper__Price"
+})(["display:flex;align-items:center;flex-wrap:wrap;width:100%;"]);
+const CurrentPrice = styled__default.div.attrs(() => ({
+  className: 'wayke__theme wayke__color--primary-text wayke__font--bold'
+})).withConfig({
+  displayName: "wrapper__CurrentPrice"
+})(["font-size:1rem;margin-right:", ";"], size(1));
+const PriceCell = styled__default.div.withConfig({
+  displayName: "wrapper__PriceCell"
+})(["flex:1 1 auto;padding-right:", ";"], size(1));
+const OldPrice = styled__default.div.withConfig({
+  displayName: "wrapper__OldPrice"
+})(["text-decoration:line-through;color:", ";font-size:0.875rem;"], props => props.theme.color.textDarkLighten);
+const Label$3 = styled__default.label.withConfig({
+  displayName: "wrapper__Label"
+})(["color:", ";font-size:0.875rem;"], props => props.theme.color.disabledText);
+
+const Item$5 = styled__default.li.withConfig({
+  displayName: "wrapper__Item"
+})(["padding:", ";"], size(0.5));
+const Box = styled__default.div.withConfig({
+  displayName: "wrapper__Box"
+})(["display:flex;align-items:center;background-color:", ";padding:", " ", ";border-radius:3px;font-size:0.875rem;overflow-wrap:break-word;hyphens:auto;"], props => props.theme.color.accentDark, size(1), size(1.5));
+const ItemSection = styled__default.div.withConfig({
+  displayName: "wrapper__ItemSection"
+})(["& + &{margin-left:", ";}"], size(1));
+const Action$3 = styled__default(ButtonReset).attrs(() => ({
+  className: 'wayke__theme wayke__color--primary-text'
+})).withConfig({
+  displayName: "wrapper__Action"
+})(["position:relative;display:block;transform-origin:50% 50%;transition:transform 300ms cubic-bezier(0.47,1.64,0.41,0.8);:before{content:'';position:absolute;top:", ";bottom:", ";left:", ";right:", ";background-color:", ";border-radius:50%;opacity:0;transition:opacity 200ms ease;}> *{position:relative;z-index:1;}:hover{:before{opacity:1;}}:active{transform:scale(0.95);}"], size(-0.5), size(-0.5), size(-0.5), size(-0.5), props => props.theme.color.accent);
+const List$5 = styled__default.ul.withConfig({
+  displayName: "wrapper__List"
+})(["display:flex;align-items:center;flex-wrap:wrap;list-style:none;padding:0;margin:", ";", ""], size(-0.5), ({
+  isSmall
+}) => isSmall && styled.css(["margin:", ";", "{padding:", ";}", "{padding:", " ", ";font-size:0.75rem;}", "{& + &{margin-left:", ";}}"], size(-0.25), Item$5, size(0.25), Box, size(0.5), size(1), ItemSection, size(0.5)));
 
 const UspItem = ({
   title,
@@ -2488,70 +1795,17 @@ const Grid = ({
   })));
 };
 
-const Wrapper$9 = styled__default.div`
-  display: flex;
-  align-items: center;
-`;
+const Wrapper$9 = styled__default.div.withConfig({
+  displayName: "wrapper__Wrapper"
+})(["display:flex;align-items:center;"]);
 const Query = styled__default.div.attrs(() => ({
   className: 'wayke__theme wayke__font--bold'
-}))`
-  font-size: 2.25rem;
-  min-width: 0;
-  overflow-wrap: break-word;
-  hyphens: auto;
-
-  :before,
-  :after {
-    content: '"';
-  }
-`;
-const Clear = styled__default(ButtonReset)`
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: ${size(2)};
-  height: ${size(2)};
-  border-radius: 50%;
-  background-color: ${props => props.theme.color.accentDark};
-  margin-left: ${size(1)};
-  font-size: ${size(1)};
-  transform-origin: 50% 50%;
-  transition: transform 150ms ease;
-
-  :before {
-    content: '';
-    position: absolute;
-    top: ${size(-1)};
-    bottom: ${size(-1)};
-    left: ${size(-1)};
-    right: ${size(-1)};
-    border-radius: 50%;
-  }
-
-  :after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: ${props => props.theme.color.hoverOverlay};
-    border-radius: 50%;
-    opacity: 0;
-    transition: opacity 150ms ease;
-  }
-
-  :hover {
-    :after {
-      opacity: 1;
-    }
-  }
-
-  :active {
-    transform: scale(0.95);
-  }
-`;
+})).withConfig({
+  displayName: "wrapper__Query"
+})(["font-size:2.25rem;min-width:0;overflow-wrap:break-word;hyphens:auto;:before,:after{content:'\"'; }"]);
+const Clear = styled__default(ButtonReset).withConfig({
+  displayName: "wrapper__Clear"
+})(["position:relative;display:flex;align-items:center;justify-content:center;width:", ";height:", ";border-radius:50%;background-color:", ";margin-left:", ";font-size:", ";transform-origin:50% 50%;transition:transform 150ms ease;:before{content:'';position:absolute;top:", ";bottom:", ";left:", ";right:", ";border-radius:50%;}:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:", ";border-radius:50%;opacity:0;transition:opacity 150ms ease;}:hover{:after{opacity:1;}}:active{transform:scale(0.95);}"], size(2), size(2), props => props.theme.color.accentDark, size(1), size(1), size(-1), size(-1), size(-1), size(-1), props => props.theme.color.hoverOverlay);
 
 const SearchTerm = ({
   children,
@@ -2566,91 +1820,29 @@ const SearchTerm = ({
 
 const Wrapper$a = styled__default.div.attrs(() => ({
   role: 'search'
-}))`
-  display: flex;
-  align-items: stretch;
-  border-radius: 3px;
-`;
-const Label$4 = styled__default.label`
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-`;
-const Search = styled__default.div`
-  flex: 1 1 auto;
-  position: relative;
-  display: flex;
-  align-items: stretch;
-  background-color: ${props => props.theme.color.accentDark};
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-`;
-const Action$4 = styled__default.div`
-  flex-shrink: 0;
-`;
+})).withConfig({
+  displayName: "wrapper__Wrapper"
+})(["display:flex;align-items:stretch;border-radius:3px;"]);
+const Label$4 = styled__default.label.withConfig({
+  displayName: "wrapper__Label"
+})(["position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;"]);
+const Search = styled__default.div.withConfig({
+  displayName: "wrapper__Search"
+})(["flex:1 1 auto;position:relative;display:flex;align-items:stretch;background-color:", ";border-top-left-radius:3px;border-bottom-left-radius:3px;"], props => props.theme.color.accentDark);
+const Action$4 = styled__default.div.withConfig({
+  displayName: "wrapper__Action"
+})(["flex-shrink:0;"]);
 const ActionBtn = styled__default(ButtonReset).attrs(() => ({
   className: 'wayke__theme wayke__color--primary-bg'
-}))`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: ${props => props.theme.distances.inputHeight};
-  height: ${props => props.theme.distances.inputHeight};
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-  font-size: 1rem;
-`;
+})).withConfig({
+  displayName: "wrapper__ActionBtn"
+})(["display:flex;align-items:center;justify-content:center;width:", ";height:", ";border-top-right-radius:3px;border-bottom-right-radius:3px;font-size:1rem;"], props => props.theme.distances.inputHeight, props => props.theme.distances.inputHeight);
 const Input = styled__default.input.attrs(() => ({
   type: 'search',
   className: 'wayke__theme wayke__font--regular'
-}))`
-  flex: 1 1 auto;
-  display: block;
-  width: 100%;
-  height: ${props => props.theme.distances.inputHeight};
-  padding: 0 ${size(2)};
-  background-color: transparent;
-  font-size: 16px;
-  border: none;
-  border-radius: 0;
-  box-shadow: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-
-  :focus {
-    outline: none;
-  }
-
-  &::-webkit-input-placeholder {
-    font-family: inherit;
-    color: ${props => props.theme.color.textDarkLighten};
-    font-size: 1em;
-  }
-
-  &:-moz-placeholder {
-    font-family: inherit;
-    color: ${props => props.theme.color.textDarkLighten};
-    font-size: 1em;
-  }
-
-  &::-moz-placeholder {
-    font-family: inherit;
-    color: ${props => props.theme.color.textDarkLighten};
-    font-size: 1em;
-  }
-
-  &:-ms-input-placeholder {
-    font-family: inherit;
-    color: ${props => props.theme.color.textDarkLighten};
-    font-size: 1em;
-  }
-`;
+})).withConfig({
+  displayName: "wrapper__Input"
+})(["flex:1 1 auto;display:block;width:100%;height:", ";padding:0 ", ";background-color:transparent;font-size:16px;border:none;border-radius:0;box-shadow:none;-moz-appearance:none;-webkit-appearance:none;:focus{outline:none;}&::-webkit-input-placeholder{font-family:inherit;color:", ";font-size:1em;}&:-moz-placeholder{font-family:inherit;color:", ";font-size:1em;}&::-moz-placeholder{font-family:inherit;color:", ";font-size:1em;}&:-ms-input-placeholder{font-family:inherit;color:", ";font-size:1em;}"], props => props.theme.distances.inputHeight, size(2), props => props.theme.color.textDarkLighten, props => props.theme.color.textDarkLighten, props => props.theme.color.textDarkLighten, props => props.theme.color.textDarkLighten);
 
 const InputSearch = React__default.forwardRef(({
   placeholder,
@@ -2772,41 +1964,21 @@ const getSnackbarBg = severity => {
 
 const Wrapper$b = styled__default.div.attrs(() => ({
   role: 'alert'
-}))`
-  display: flex;
-  align-items: center;
-  padding: ${size(1.5)} ${size(2)};
-  background-color: ${props => getSnackbarBg(props.severity)};
-  color: ${props => props.theme.color.textDark};
-  border-radius: 3px;
-`;
-const Icon$3 = styled__default.div`
-  flex-shrink: 0;
-  padding-right: ${size(2)};
-  font-size: ${size(3)};
-
-  > svg {
-    display: block;
-  }
-`;
-const Content$1 = styled__default.div`
-  flex: 1 1 auto;
-  font-size: 1rem;
-`;
-const Heading$3 = styled__default.div`
-  font-weight: 700;
-`;
-const Message = styled__default.div`
-  > * {
-    &:first-child {
-      margin-top: 0;
-    }
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-`;
+})).withConfig({
+  displayName: "wrapper__Wrapper"
+})(["display:flex;align-items:center;padding:", " ", ";background-color:", ";color:", ";border-radius:3px;"], size(1.5), size(2), props => getSnackbarBg(props.severity), props => props.theme.color.textDark);
+const Icon$3 = styled__default.div.withConfig({
+  displayName: "wrapper__Icon"
+})(["flex-shrink:0;padding-right:", ";font-size:", ";> svg{display:block;}"], size(2), size(3));
+const Content$1 = styled__default.div.withConfig({
+  displayName: "wrapper__Content"
+})(["flex:1 1 auto;font-size:1rem;"]);
+const Heading$3 = styled__default.div.withConfig({
+  displayName: "wrapper__Heading"
+})(["font-weight:700;"]);
+const Message = styled__default.div.withConfig({
+  displayName: "wrapper__Message"
+})(["> *{&:first-child{margin-top:0;}&:last-child{margin-bottom:0;}}"]);
 
 const Snackbar = ({
   severity,
@@ -3002,51 +2174,38 @@ const WaykeSearch = ({
   }));
 };
 
-const List$6 = styled__default.ul`
-  list-style: none;
-  padding: 0;
-  margin: 0;
-`;
-const Item$6 = styled__default.li`
-  display: flex;
-  align-items: flex-end;
-  line-height: 1;
-
-  & + & {
-    margin-top: ${size(0.5)};
-  }
-`;
-const Label$5 = styled__default.div`
-  flex: 1 1 auto;
-`;
-const Value = styled__default.div`
-  flex-shrink: 0;
-`;
+const List$6 = styled__default.ul.withConfig({
+  displayName: "wrapper__List"
+})(["list-style:none;padding:0;margin:0;"]);
+const Item$6 = styled__default.li.withConfig({
+  displayName: "wrapper__Item"
+})(["display:flex;align-items:flex-end;line-height:1;& + &{margin-top:", ";}"], size(0.5));
+const Label$5 = styled__default.div.withConfig({
+  displayName: "wrapper__Label"
+})(["flex:1 1 auto;"]);
+const Value = styled__default.div.withConfig({
+  displayName: "wrapper__Value"
+})(["flex-shrink:0;"]);
 
 const Price$1 = styled__default.div.attrs(() => ({
   className: 'wayke__theme wayke__color--primary-text wayke__font--bold'
-}))`
-  font-size: 1.375rem;
-`;
-const OldPrice$1 = styled__default.div`
-  color: ${props => props.theme.color.textDarkLighten};
-  text-decoration: line-through;
-`;
+})).withConfig({
+  displayName: "Price"
+})(["font-size:1.375rem;"]);
+const OldPrice$1 = styled__default.div.withConfig({
+  displayName: "Price__OldPrice"
+})(["color:", ";text-decoration:line-through;"], props => props.theme.color.textDarkLighten);
 
 const PriceTable = ({
   price,
   oldPrice
 }) => React__default.createElement(List$6, null, React__default.createElement(Item$6, null, React__default.createElement(Label$5, null, React__default.createElement(VisualHeading, null, "Pris")), React__default.createElement(Value, null, React__default.createElement(Price$1, null, numberSeparator(price), " kr"))), oldPrice !== undefined && React__default.createElement(Item$6, null, React__default.createElement(Label$5, null), React__default.createElement(Value, null, React__default.createElement(OldPrice$1, null, numberSeparator(oldPrice), " kr"))));
 
-const Logo = styled__default.img`
-  display: block;
-  max-width: ${size(9.5)};
-  max-height: ${size(6)};
-
-  ${({
+const Logo = styled__default.img.withConfig({
+  displayName: "wrapper__Logo"
+})(["display:block;max-width:", ";max-height:", ";", ""], size(9.5), size(6), ({
   wide
-}) => wide && styled.css(["max-width:", ";"], size(20))}
-`;
+}) => wide && styled.css(["max-width:", ";"], size(20)));
 
 const LogoBox = ({
   logo,
@@ -3068,49 +2227,11 @@ const LogoBox = ({
   });
 };
 
-const Wrapper$c = styled__default.div`
-  font-size: 1rem;
-  line-height: 1.5;
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin-top: ${size(4)};
-    margin-bottom: ${size(1)};
-
-    :first-child {
-      margin-top: 0;
-    }
-
-    :last-child {
-      margin-bottom: 0;
-    }
-
-    & + p,
-    & + table {
-      margin-top: ${size(1)};
-    }
-  }
-
-  p {
-    margin: ${size(2)} 0;
-
-    :first-child {
-      margin-top: 0;
-    }
-
-    :last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  ${({
+const Wrapper$c = styled__default.div.withConfig({
+  displayName: "wrapper__Wrapper"
+})(["font-size:1rem;line-height:1.5;h1,h2,h3,h4,h5,h6{margin-top:", ";margin-bottom:", ";:first-child{margin-top:0;}:last-child{margin-bottom:0;}& + p,& + table{margin-top:", ";}}p{margin:", " 0;:first-child{margin-top:0;}:last-child{margin-bottom:0;}}", ""], size(4), size(1), size(1), size(2), ({
   small
-}) => small && styled.css(["font-size:0.875rem;"])}
-`;
+}) => small && styled.css(["font-size:0.875rem;"]));
 
 const Content$2 = ({
   children,
@@ -3121,62 +2242,35 @@ const Content$2 = ({
   dangerouslySetInnerHTML: dangerouslySetInnerHTML
 }, children);
 
-const Wrapper$d = styled__default.blockquote`
-  display: flex;
-  flex-direction: column;
-  max-width: 600px;
-  margin: 0 auto;
-
-  ${props => props.theme.breakpoint.Sm} {
-    align-items: center;
-  }
-`;
-const Quote = styled__default.div`
-  > * {
-    :first-child {
-      margin-top: 0;
-    }
-
-    :last-child {
-      margin-bottom: 0;
-    }
-  }
-`;
-const Author = styled__default.footer`
-  display: inline-flex;
-  align-items: center;
-  margin-top: ${size(3)};
-
-  ${props => props.theme.breakpoint.Md} {
-    margin-top: ${size(4)};
-  }
-`;
-const AvatarWrapper = styled__default.div`
-  flex-shrink: 0;
-  padding-right: ${size(1.5)};
-`;
-const Info = styled__default.div`
-  flex: 1 1 auto;
-  font-size: 0.875rem;
-`;
+const Wrapper$d = styled__default.blockquote.withConfig({
+  displayName: "wrapper__Wrapper"
+})(["display:flex;flex-direction:column;max-width:600px;margin:0 auto;", "{align-items:center;}"], props => props.theme.breakpoint.Sm);
+const Quote = styled__default.div.withConfig({
+  displayName: "wrapper__Quote"
+})(["> *{:first-child{margin-top:0;}:last-child{margin-bottom:0;}}"]);
+const Author = styled__default.footer.withConfig({
+  displayName: "wrapper__Author"
+})(["display:inline-flex;align-items:center;margin-top:", ";", "{margin-top:", ";}"], size(3), props => props.theme.breakpoint.Md, size(4));
+const AvatarWrapper = styled__default.div.withConfig({
+  displayName: "wrapper__AvatarWrapper"
+})(["flex-shrink:0;padding-right:", ";"], size(1.5));
+const Info = styled__default.div.withConfig({
+  displayName: "wrapper__Info"
+})(["flex:1 1 auto;font-size:0.875rem;"]);
 const Name = styled__default.div.attrs(() => ({
   className: 'wayke__theme wayke__font--bold'
-}))``;
-const Date$1 = styled__default.div``;
+})).withConfig({
+  displayName: "wrapper__Name"
+})([""]);
+const Date$1 = styled__default.div.withConfig({
+  displayName: "wrapper__Date"
+})([""]);
 
 const Wrapper$e = styled__default.div.attrs(() => ({
   role: 'image'
-}))`
-  display: block;
-  width: ${size(5)};
-  height: ${size(5)};
-  border-radius: 50%;
-  background-image: ${props => `url(${props.image})`};
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-color: ${props => props.theme.color.accent};
-`;
+})).withConfig({
+  displayName: "wrapper__Wrapper"
+})(["display:block;width:", ";height:", ";border-radius:50%;background-image:", ";background-size:cover;background-position:center;background-repeat:no-repeat;background-color:", ";"], size(5), size(5), props => `url(${props.image})`, props => props.theme.color.accent);
 
 const Avatar = ({
   image,
@@ -3196,31 +2290,17 @@ const Blockquote = ({
   alt: `${author} avatar`
 })), React__default.createElement(Info, null, React__default.createElement(Name, null, author), date && React__default.createElement(Date$1, null, date))));
 
-const Wrapper$f = styled__default.div``;
-const Extend = styled__default.div`
-  position: relative;
-  max-height: 175px;
-  overflow: hidden;
-
-  :after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: ${size(6)};
-    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
-  }
-
-  ${({
+const Wrapper$f = styled__default.div.withConfig({
+  displayName: "wrapper__Wrapper"
+})([""]);
+const Extend = styled__default.div.withConfig({
+  displayName: "wrapper__Extend"
+})(["position:relative;max-height:175px;overflow:hidden;:after{content:'';position:absolute;bottom:0;left:0;right:0;height:", ";background-image:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,1));}", ""], size(6), ({
   extended
-}) => extended && styled.css(["max-height:none;:after{content:none;}"])}
-`;
-const Action$5 = styled__default.div`
-  display: flex;
-  justify-content: flex-end;
-  margin-top: ${size(2)};
-`;
+}) => extended && styled.css(["max-height:none;:after{content:none;}"]));
+const Action$5 = styled__default.div.withConfig({
+  displayName: "wrapper__Action"
+})(["display:flex;justify-content:flex-end;margin-top:", ";"], size(2));
 
 const ExtendContent = ({
   children,
@@ -3256,373 +2336,80 @@ const ExtendContent = ({
 
 const quickNavWidth = 83; // 75px + 8px
 
-const Wrapper$g = styled__default.div`
-  ${props => props.theme.breakpoint.LtMd} {
-    ${Wrapper} & {
-      margin-left: ${size(-3)};
-      margin-right: ${size(-3)};
-    }
-  }
-
-  ${props => props.theme.breakpoint.LtSm} {
-    ${Wrapper} & {
-      margin-left: ${size(-2)};
-      margin-right: ${size(-2)};
-    }
-  }
-
-  ${props => props.theme.breakpoint.Md} {
-    position: relative;
-    padding-right: ${quickNavWidth}px;
-  }
-`;
-const Main = styled__default.div`
-  position: relative;
-  height: 0;
-  padding-bottom: 66.66666667%;
-
-  ${props => props.theme.breakpoint.Md} {
-    //background-color: ${props => props.theme.color.accent};
-  }
-
-  .slick-slider,
-  .slick-list,
-  .slick-track,
-  .slick-slide,
-  .slick-slide > * {
-    height: 100%;
-  }
-
-  .slick-slide > * {
-    font-size: 0;
-
-    > * {
-      font-size: 1rem;
-    }
-  }
-`;
-const Alt = styled__default.div`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  width: ${quickNavWidth}px;
-  padding-left: ${size(1)};
-
-  ${props => props.theme.breakpoint.LtMd} {
-    display: none;
-  }
-
-  :after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: ${size(2.5)};
-    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
-    pointer-events: none;
-  }
-`;
-const Item$7 = styled__default.div`
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-
-  :focus {
-    outline: none;
-  }
-
-  ${props => props.theme.breakpoint.LtMd} {
-    //background-color: ${props => props.theme.color.textDark};
-    transition: border-radius 150ms ease;
-  }
-`;
-const SliderWrapper = styled__default.div`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-
-  .slick-slider {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-  }
-
-  ${props => props.theme.breakpoint.LtMd} {
-    overflow: hidden;
-
-    .slick-list {
-      overflow: visible;
-      width: 95%;
-    }
-
-    .slick-slide {
-      border-right: ${size(1)} solid ${props => props.theme.color.bg};
-      //transform: scale(0.95);
-      transform-origin: 0 50%;
-      transition: transform 150ms ease;
-    }
-
-    .slick-slide.slick-active {
-      transform: none;
-
-      ${Item$7} {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-    }
-  }
-`;
-const Image$1 = styled__default.img`
-  display: block;
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-  max-width: 100%;
-  max-height: 100%;
-  object-fit: cover;
-  cursor: pointer;
-`;
-const ImageFull = styled__default.img`
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-`; // Arrow Nav
-
-const Arrow = styled__default(ButtonReset)`
-  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;
-  }
-`;
-const ArrowLeft = styled__default(Arrow)`
-  left: ${size(2)};
-`;
-const ArrowRight = styled__default(Arrow)`
-  right: ${size(2)};
-`; // Quick Nav
-
-const QuickNav = styled__default.ul`
-  position: relative;
-  max-height: 100%;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-`;
+const Wrapper$g = styled__default.div.withConfig({
+  displayName: "wrapper__Wrapper"
+})(["", "{", " &{margin-left:", ";margin-right:", ";}}", "{", " &{margin-left:", ";margin-right:", ";}}", "{position:relative;padding-right:", "px;}"], props => props.theme.breakpoint.LtMd, Wrapper, size(-3), size(-3), props => props.theme.breakpoint.LtSm, Wrapper, size(-2), size(-2), props => props.theme.breakpoint.Md, quickNavWidth);
+const Main = styled__default.div.withConfig({
+  displayName: "wrapper__Main"
+})(["position:relative;height:0;padding-bottom:66.66666667%;", "{}.slick-slider,.slick-list,.slick-track,.slick-slide,.slick-slide > *{height:100%;}.slick-slide > *{font-size:0;> *{font-size:1rem;}}"], props => props.theme.breakpoint.Md);
+const Alt = styled__default.div.withConfig({
+  displayName: "wrapper__Alt"
+})(["position:absolute;top:0;bottom:0;right:0;width:", "px;padding-left:", ";", "{display:none;}:after{content:'';position:absolute;bottom:0;left:0;right:0;height:", ";background-image:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,1));pointer-events:none;}"], quickNavWidth, size(1), props => props.theme.breakpoint.LtMd, size(2.5));
+const Item$7 = styled__default.div.withConfig({
+  displayName: "wrapper__Item"
+})(["position:relative;width:100%;height:100%;overflow:hidden;:focus{outline:none;}", "{transition:border-radius 150ms ease;}"], props => props.theme.breakpoint.LtMd);
+const SliderWrapper = styled__default.div.withConfig({
+  displayName: "wrapper__SliderWrapper"
+})(["position:absolute;top:0;bottom:0;left:0;right:0;.slick-slider{position:absolute;top:0;bottom:0;left:0;right:0;}", "{overflow:hidden;.slick-list{overflow:visible;width:95%;}.slick-slide{border-right:", " solid ", ";transform-origin:0 50%;transition:transform 150ms ease;}.slick-slide.slick-active{transform:none;", "{border-top-left-radius:0;border-bottom-left-radius:0;}}}"], props => props.theme.breakpoint.LtMd, size(1), props => props.theme.color.bg, Item$7);
+const Image$1 = styled__default.img.withConfig({
+  displayName: "wrapper__Image"
+})(["display:block;position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;max-width:100%;max-height:100%;object-fit:cover;cursor:pointer;"]);
+const ImageFull = styled__default.img.withConfig({
+  displayName: "wrapper__ImageFull"
+})(["display:block;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;"]); // Arrow Nav
+
+const Arrow = styled__default(ButtonReset).withConfig({
+  displayName: "wrapper__Arrow"
+})(["position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:", ";height:", ";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:", ";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);}", "{display:none;}"], size(4), size(4), props => props.theme.color.textDark, props => props.theme.breakpoint.LtSm);
+const ArrowLeft = styled__default(Arrow).withConfig({
+  displayName: "wrapper__ArrowLeft"
+})(["left:", ";"], size(2));
+const ArrowRight = styled__default(Arrow).withConfig({
+  displayName: "wrapper__ArrowRight"
+})(["right:", ";"], size(2)); // Quick Nav
+
+const QuickNav = styled__default.ul.withConfig({
+  displayName: "wrapper__QuickNav"
+})(["position:relative;max-height:100%;list-style:none;padding:0;margin:0;overflow:auto;-webkit-overflow-scrolling:touch;"]);
 const QuickNavItem = styled__default.li.attrs(() => ({
   className: 'wayke__theme wayke__color--primary-text'
-}))`
-  position: relative;
-
-  & + & {
-    margin-top: ${size(1)};
-  }
-
-  ${({
+})).withConfig({
+  displayName: "wrapper__QuickNavItem"
+})(["position:relative;& + &{margin-top:", ";}", ""], size(1), ({
   active
-}) => active && styled.css([":before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border:3px solid currentColor;z-index:2;}"])}
-`;
-const QuickNavBtn = styled__default(ButtonReset)`
-  position: relative;
-  display: block;
-  width: 100%;
-  height: 0;
-  padding-bottom: 66.66666667%; // 3:2
-  transform-origin: 50% 50%;
-  transition: transform 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
-
-  :before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.15);
-    opacity: 0;
-    z-index: 1;
-    transition: opacity 150ms ease;
-  }
-
-  :hover {
-    :before {
-      opacity: 1;
-    }
-  }
-
-  :active {
-    transform: scale(0.95);
-  }
-`;
-const QuickNavImg = styled__default.img`
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-`; // Media Button
-
-const MediaButtonWrapper = styled__default.div`
-  position: absolute;
-  bottom: ${size(2)};
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 1;
-`; // Sphere Close Button
-
-const EnableNavigationButton = styled__default.div`
-  position: absolute;
-  bottom: ${size(2)};
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 1;
-`;
-
-const Wrapper$h = styled__default.div`
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: ${size(3)};
-  z-index: 90;
-  overflow: auto;
-
-  ${props => props.theme.breakpoint.LtSm} {
-    padding: ${size(2)};
-  }
-`;
+}) => active && styled.css([":before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border:3px solid currentColor;z-index:2;}"]));
+const QuickNavBtn = styled__default(ButtonReset).withConfig({
+  displayName: "wrapper__QuickNavBtn"
+})(["position:relative;display:block;width:100%;height:0;padding-bottom:66.66666667%;transform-origin:50% 50%;transition:transform 300ms cubic-bezier(0.47,1.64,0.41,0.8);:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.15);opacity:0;z-index:1;transition:opacity 150ms ease;}:hover{:before{opacity:1;}}:active{transform:scale(0.95);}"]);
+const QuickNavImg = styled__default.img.withConfig({
+  displayName: "wrapper__QuickNavImg"
+})(["display:block;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;"]); // Media Button
+
+const MediaButtonWrapper = styled__default.div.withConfig({
+  displayName: "wrapper__MediaButtonWrapper"
+})(["position:absolute;bottom:", ";left:50%;transform:translateX(-50%);z-index:1;"], size(2)); // Sphere Close Button
+
+const EnableNavigationButton = styled__default.div.withConfig({
+  displayName: "wrapper__EnableNavigationButton"
+})(["position:absolute;bottom:", ";left:50%;transform:translateX(-50%);z-index:1;"], size(2));
+
+const Wrapper$h = styled__default.div.withConfig({
+  displayName: "wrapper__Wrapper"
+})(["position:fixed;top:0;bottom:0;left:0;right:0;padding:", ";z-index:90;overflow:auto;", "{padding:", ";}"], size(3), props => props.theme.breakpoint.LtSm, size(2));
 const UiBlock$1 = styled__default.div.attrs(() => ({
   role: 'button'
-}))`
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: rgba(0, 0, 0, 0.3);
-  z-index: -1;
-`;
-const Item$8 = styled__default.div`
-  position: relative;
-
-  & + & {
-    margin-top: ${size(1)};
-  }
-`;
-const Img$1 = styled__default.img`
-  position: relative;
-  display: block;
-  max-width: 100%;
-  max-height: calc(100vh - ${size(6)});
-  margin: 0 auto;
-  z-index: 1;
-
-  ${props => props.theme.breakpoint.LtSm} {
-    max-height: calc(100vh - ${size(4)});
-  }
-`;
-const CloseBtn$1 = styled__default(ButtonReset)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: fixed;
-  top: ${size(2)};
-  right: ${size(2)};
-  width: ${size(5)};
-  height: ${size(5)};
-  border-radius: 50%;
-  background-color: ${props => props.theme.color.bg};
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  transform-origin: 50% 50%;
-  transition: 200ms ease, transform 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
-  z-index: 1;
-
-  :before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: ${props => props.theme.color.hoverOverlay};
-    border-radius: 50%;
-    opacity: 0;
-    transition: opacity 150ms ease;
-  }
-
-  :hover {
-    :before {
-      opacity: 1;
-    }
-  }
-
-  :active {
-    transform: scale(0.97);
-  }
-
-  ${props => props.theme.breakpoint.LtSm} {
-    top: ${size(1)};
-    right: ${size(1)};
-  }
-`;
+})).withConfig({
+  displayName: "wrapper__UiBlock"
+})(["position:fixed;top:0;bottom:0;left:0;right:0;background-color:rgba(0,0,0,0.3);z-index:-1;"]);
+const Item$8 = styled__default.div.withConfig({
+  displayName: "wrapper__Item"
+})(["position:relative;& + &{margin-top:", ";}"], size(1));
+const Img$1 = styled__default.img.withConfig({
+  displayName: "wrapper__Img"
+})(["position:relative;display:block;max-width:100%;max-height:calc(100vh - ", ");margin:0 auto;z-index:1;", "{max-height:calc(100vh - ", ");}"], size(6), props => props.theme.breakpoint.LtSm, size(4));
+const CloseBtn$1 = styled__default(ButtonReset).withConfig({
+  displayName: "wrapper__CloseBtn"
+})(["display:flex;align-items:center;justify-content:center;position:fixed;top:", ";right:", ";width:", ";height:", ";border-radius:50%;background-color:", ";box-shadow:0 2px 4px rgba(0,0,0,0.1);transform-origin:50% 50%;transition:200ms ease,transform 300ms cubic-bezier(0.47,1.64,0.41,0.8);z-index:1;:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:", ";border-radius:50%;opacity:0;transition:opacity 150ms ease;}:hover{:before{opacity:1;}}:active{transform:scale(0.97);}", "{top:", ";right:", ";}"], size(2), size(2), size(5), size(5), props => props.theme.color.bg, props => props.theme.color.hoverOverlay, props => props.theme.breakpoint.LtSm, size(1), size(1));
 
 const getVimeoId = url => {
   const regExp = /\/(\d+)/;
@@ -3659,24 +2446,17 @@ const onImageError = (e, thumbnail) => {
   }
 };
 
-const Wrapper$i = styled__default.div`
-  position: relative;
-  width: 100%;
-  height: ${props => props.isPreview ? '100%' : 0};
-  padding-bottom: ${props => props.ratio ? props.ratio : '56.25%'};
-`;
+const Wrapper$i = styled__default.div.withConfig({
+  displayName: "wrapper__Wrapper"
+})(["position:relative;width:100%;height:", ";padding-bottom:", ";"], props => props.isPreview ? '100%' : 0, props => props.ratio ? props.ratio : '56.25%');
 const Iframe = styled__default.iframe.attrs(() => ({
   width: '100%',
   height: '100%',
   allowFullScreen: true,
   frameBorder: '0'
-}))`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-`;
+})).withConfig({
+  displayName: "wrapper__Iframe"
+})(["position:absolute;top:0;left:0;width:100%;height:100%;"]);
 
 const YouTubePlayer = ({
   url,
@@ -3692,14 +2472,11 @@ const VimeoPlayer = ({
   src: `https://player.vimeo.com/video/${getVimeoId(url)}?${autoplay ? '&autoplay=1' : ''}&loop=0&autopause=0`
 }));
 
-const Video = styled__default.video`
-  position: absolute;
-  top: 0;
-  left: 0;
-  object-fit: ${({
+const Video = styled__default.video.withConfig({
+  displayName: "Video"
+})(["position:absolute;top:0;left:0;object-fit:", ";"], ({
   modal
-}) => modal ? 'contain' : 'cover'};
-`;
+}) => modal ? 'contain' : 'cover');
 
 const CustomPlayer = ({
   url,
@@ -3748,257 +2525,14 @@ const VideoPlayer = ({
     ratio: "56.25%",
     controls: controls,
     url: url
-  });
-};
-
-const compassSize = size(4);
-const controlBtnSize = size(4);
-const Wrapper$j = styled__default.div`
-  width: 100%;
-  height: 0 !important;
-  padding-bottom: 66.666% !important; // 3:2
-
-  .pnlm-container {
-    background-image: none;
-    background-color: ${props => props.theme.color.accentDark};
-  }
-
-  // Compass
-
-  .pnlm-compass {
-    width: ${compassSize};
-    height: ${compassSize};
-    border-radius: 50%;
-    bottom: ${size(2)};
-    left: ${size(2)};
-    right: auto;
-    margin-top: 0;
-    border: 5px solid transparent;
-    border-top-color: ${props => props.theme.color.textLight};
-    background-color: rgba(255, 255, 255, 0.4);
-    background-image: none;
-    backdrop-filter: blur(5px);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    box-sizing: border-box;
-
-    &:hover {
-      background-color: red;
-    }
-  }
-
-  // Controls (zoom & fullscreen button)
-
-  .pnlm-grab,
-  .pnlm-grabbing {
-    .pnlm-controls-container {
-      display: block;
-    }
-  }
-
-  .pnlm-controls-container {
-    display: none;
-    top: ${size(2)};
-    left: ${size(2)};
-  }
-
-  .pnlm-controls {
-    margin-top: 0;
-
-    & + .pnlm-controls {
-      margin-top: ${size(1)};
-    }
-  }
-
-  // Fullscreen button
-
-  .pnlm-fullscreen-toggle-button {
-    display: none;
-    position: relative;
-    width: ${controlBtnSize};
-    height: ${controlBtnSize};
-    background-image: none;
-    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};
-    border: 0;
-    border-radius: 50%;
-
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.6);
-    }
-
-    &:before {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      font-size: 0.875rem;
-    }
-  }
-
-  .pnlm-fullscreen-toggle-button-inactive {
-    &:before {
-      content: '⤢';
-    }
-
-    &.pnlm-fullscreen-toggle-button-active {
-      &:before {
-        content: '⤢';
-      }
-    }
-  }
-
-  // Gyroscope (Orientation)
-
-  .pnlm-orientation-button {
-    background-image: none;
-    width: ${controlBtnSize};
-    height: ${controlBtnSize};
-    background-color: ${props => props.theme.color.accentDark};
-    color: ${props => props.theme.color.textDark};
-    border: 0;
-    border-radius: 999px;
-
-    &:hover {
-      background-color: red;
-    }
-
-    &:before {
-      content: 'A';
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      font-size: 0.875rem;
-    }
-
-    &.pnlm-orientation-button-active {
-      background-color: green;
-
-      &:hover {
-        background-color: pink;
-      }
-    }
-  }
-
-  // Zoom controls
-
-  .pnlm-zoom-controls {
-    display: none;
-    height: auto;
-    width: auto;
-    background-color: transparent;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    border: 0;
-    border-radius: 999px;
-
-    > * {
-      &:first-child {
-        border-top-left-radius: 999px;
-        border-top-right-radius: 999px;
-      }
-
-      &:last-child {
-        border-bottom-left-radius: 999px;
-        border-bottom-right-radius: 999px;
-      }
-    }
-  }
-
-  .pnlm-zoom-in,
-  .pnlm-zoom-out {
-    position: relative;
-    display: block;
-    width: ${controlBtnSize};
-    height: ${controlBtnSize};
-    background-image: none;
-    background-color: rgba(255, 255, 255, 0.4);
-    backdrop-filter: blur(5px);
-    color: ${props => props.theme.color.textDark};
-    border-radius: 0;
-
-    &:before {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
-
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.6);
-    }
-  }
-
-  .pnlm-zoom-in {
-    top: auto;
-
-    &:before {
-      content: '+';
-    }
-  }
-
-  .pnlm-zoom-out {
-    bottom: auto;
-    border-top: 1px solid ${props => props.theme.color.textDark};
-
-    &:before {
-      content: '-';
-    }
-  }
-
-  // Load Button
-
-  .pnlm-load-button {
-    top: auto;
-    bottom: ${size(2)};
-    transform: translateX(-50%);
-    width: auto;
-    height: auto;
-    padding: ${size(1.75)} ${size(2)};
-    border-radius: 3px;
-    margin: 0;
-    background-color: ${props => props.theme.color.accentDark};
-    color: ${props => props.theme.color.textDark};
-    line-height: 1.1;
-    user-select: none;
-
-    &:hover {
-      background-color: ${props => props.theme.color.accentDark};
-    }
-
-    p {
-      margin: 0;
-      font-size: 0.875rem;
-    }
-  }
-
-  // Load box
-
-  .pnlm-load-box {
-    background-color: transparent;
-    height: auto;
-    margin: 0;
-    width: 150px;
-    transform: translate(-50%, -50%);
-
-    > p {
-      display: none;
-    }
-  }
-
-  // Load bar
-
-  .pnlm-lbar {
-    width: 100%;
-    background-color: rgba(255, 255, 255, 0.4);
-    border: 0;
-  }
+  });
+};
 
-  .pnlm-lbar-fill {
-    background-color: ${props => props.theme.color.textLight};
-  }
-`;
+const compassSize = size(4);
+const controlBtnSize = size(4);
+const Wrapper$j = styled__default.div.withConfig({
+  displayName: "wrapper__Wrapper"
+})(["width:100%;height:0 !important;padding-bottom:66.666% !important;.pnlm-container{background-image:none;background-color:", ";}.pnlm-compass{width:", ";height:", ";border-radius:50%;bottom:", ";left:", ";right:auto;margin-top:0;border:5px solid transparent;border-top-color:", ";background-color:rgba(255,255,255,0.4);background-image:none;backdrop-filter:blur(5px);box-shadow:0 2px 4px rgba(0,0,0,0.1);box-sizing:border-box;&:hover{background-color:red;}}.pnlm-grab,.pnlm-grabbing{.pnlm-controls-container{display:block;}}.pnlm-controls-container{display:none;top:", ";left:", ";}.pnlm-controls{margin-top:0;& + .pnlm-controls{margin-top:", ";}}.pnlm-fullscreen-toggle-button{display:none;position:relative;width:", ";height:", ";background-image:none;background-color:rgba(255,255,255,0.4);backdrop-filter:blur(5px);box-shadow:0 2px 4px rgba(0,0,0,0.1);color:", ";border:0;border-radius:50%;&:hover{background-color:rgba(255,255,255,0.6);}&:before{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:0.875rem;}}.pnlm-fullscreen-toggle-button-inactive{&:before{content:'\u2922';}&.pnlm-fullscreen-toggle-button-active{&:before{content:'\u2922';}}}.pnlm-orientation-button{background-image:none;width:", ";height:", ";background-color:", ";color:", ";border:0;border-radius:999px;&:hover{background-color:red;}&:before{content:'A';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:0.875rem;}&.pnlm-orientation-button-active{background-color:green;&:hover{background-color:pink;}}}.pnlm-zoom-controls{display:none;height:auto;width:auto;background-color:transparent;box-shadow:0 2px 4px rgba(0,0,0,0.1);border:0;border-radius:999px;> *{&:first-child{border-top-left-radius:999px;border-top-right-radius:999px;}&:last-child{border-bottom-left-radius:999px;border-bottom-right-radius:999px;}}}.pnlm-zoom-in,.pnlm-zoom-out{position:relative;display:block;width:", ";height:", ";background-image:none;background-color:rgba(255,255,255,0.4);backdrop-filter:blur(5px);color:", ";border-radius:0;&:before{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}&:hover{background-color:rgba(255,255,255,0.6);}}.pnlm-zoom-in{top:auto;&:before{content:'+';}}.pnlm-zoom-out{bottom:auto;border-top:1px solid ", ";&:before{content:'-';}}.pnlm-load-button{top:auto;bottom:", ";transform:translateX(-50%);width:auto;height:auto;padding:", " ", ";border-radius:3px;margin:0;background-color:", ";color:", ";line-height:1.1;user-select:none;&:hover{background-color:", ";}p{margin:0;font-size:0.875rem;}}.pnlm-load-box{background-color:transparent;height:auto;margin:0;width:150px;transform:translate(-50%,-50%);> p{display:none;}}.pnlm-lbar{width:100%;background-color:rgba(255,255,255,0.4);border:0;}.pnlm-lbar-fill{background-color:", ";}"], props => props.theme.color.accentDark, compassSize, compassSize, size(2), size(2), props => props.theme.color.textLight, size(2), size(2), size(1), controlBtnSize, controlBtnSize, props => props.theme.color.textDark, controlBtnSize, controlBtnSize, props => props.theme.color.accentDark, props => props.theme.color.textDark, controlBtnSize, controlBtnSize, props => props.theme.color.textDark, props => props.theme.color.textDark, size(2), size(1.75), size(2), props => props.theme.color.accentDark, props => props.theme.color.textDark, props => props.theme.color.accentDark, props => props.theme.color.textLight);
 
 const ReactPannellum = React.lazy(() => Promise.resolve().then(() => require('react-pannellum')));
 const config = {
@@ -4400,112 +2934,47 @@ const useThumbnail = (url, small) => {
 
 const Wrapper$k = styled__default.div.attrs(() => ({
   role: 'dialog'
-}))`
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-  white-space: normal;
-  text-align: left;
-  z-index: 90;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  ${props => props.theme.breakpoint.Sm} {
-    padding: ${size(2)};
-  }
-`;
+})).withConfig({
+  displayName: "wrapper__Wrapper"
+})(["position:fixed;top:0;bottom:0;left:0;right:0;width:100%;white-space:normal;text-align:left;z-index:90;display:flex;align-items:center;justify-content:center;", "{padding:", ";}"], props => props.theme.breakpoint.Sm, size(2));
 const UiBlock$2 = styled__default.div.attrs(() => ({
   'aria-hidden': 'true',
   role: 'button'
-}))`
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: rgba(0, 0, 0, 0.35);
-  z-index: -1;
-
-  ${props => props.theme.breakpoint.LtMd} {
-    animation: ${fadeIn} 300ms ease forwards;
-  }
-
-  ${props => props.theme.breakpoint.Md} {
-    animation: ${fadeIn} 400ms ease forwards;
-  }
-`;
+})).withConfig({
+  displayName: "wrapper__UiBlock"
+})(["position:fixed;top:0;bottom:0;left:0;right:0;background-color:rgba(0,0,0,0.35);z-index:-1;", "{animation:", " 300ms ease forwards;}", "{animation:", " 400ms ease forwards;}"], props => props.theme.breakpoint.LtMd, fadeIn, props => props.theme.breakpoint.Md, fadeIn);
 const Dialog = styled__default.article.attrs(() => ({
   className: 'wayke__theme wayke__font--regular'
-}))`
-  display: flex;
-  flex-direction: column;
-  background-color: ${props => props.theme.color.bg};
-  z-index: 1;
-  width: 100%;
-  max-width: 680px;
-  max-height: 100%;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
-  overflow: hidden;
-
-  ${props => props.theme.breakpoint.LtSm} {
-    align-self: flex-end;
-    transform: translateY(100%);
-    animation: ${noTransform} 300ms ease forwards;
-  }
-
-  ${props => props.theme.breakpoint.Sm} {
-    transform: translateY(${size(2)});
-    animation: ${fadeIn} 400ms ease, ${noTransform} 400ms ease forwards;
-  }
-`;
-const Content$3 = styled__default.div`
-  flex: 1 1 auto;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-`;
-const Header$3 = styled__default.header`
-  display: flex;
-  align-items: center;
-  min-height: 60px;
-  padding: ${size(3)};
-  padding-bottom: 0;
-`;
-const Heading$4 = styled__default.div`
-  flex: 1 1 auto;
-
-  ${H1} {
-    font-size: 1.5rem;
-  }
-`;
-const Close$1 = styled__default.div`
-  flex-shrink: 0;
-  margin: ${size(-2)};
-  padding-left: ${size(3)};
-`;
-const CloseBtn$2 = styled__default(ButtonReset)`
-  display: block;
-  padding: ${size(2)};
-`;
-const Body$3 = styled__default.div`
-  padding: ${size(3)};
-`;
-const Image$2 = styled__default.img`
-  display: block;
-  width: calc(100% + ${size(6)});
-  margin-left: ${size(-3)};
-  margin-bottom: ${size(3)};
-`;
-const ModalFoldout = styled__default.div`
-  background-color: ${props => props.theme.color.accent};
-  margin: ${size(-3)};
-  margin-top: ${size(3)};
-  padding: ${size(3)};
-`;
-const ModalFoldoutBody = styled__default.div``;
+})).withConfig({
+  displayName: "wrapper__Dialog"
+})(["display:flex;flex-direction:column;background-color:", ";z-index:1;width:100%;max-width:680px;max-height:100%;box-shadow:0 4px 8px rgba(0,0,0,0.05);overflow:hidden;", "{align-self:flex-end;transform:translateY(100%);animation:", " 300ms ease forwards;}", "{transform:translateY(", ");animation:", " 400ms ease,", " 400ms ease forwards;}"], props => props.theme.color.bg, props => props.theme.breakpoint.LtSm, noTransform, props => props.theme.breakpoint.Sm, size(2), fadeIn, noTransform);
+const Content$3 = styled__default.div.withConfig({
+  displayName: "wrapper__Content"
+})(["flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;"]);
+const Header$3 = styled__default.header.withConfig({
+  displayName: "wrapper__Header"
+})(["display:flex;align-items:center;min-height:60px;padding:", ";padding-bottom:0;"], size(3));
+const Heading$4 = styled__default.div.withConfig({
+  displayName: "wrapper__Heading"
+})(["flex:1 1 auto;", "{font-size:1.5rem;}"], H1);
+const Close$1 = styled__default.div.withConfig({
+  displayName: "wrapper__Close"
+})(["flex-shrink:0;margin:", ";padding-left:", ";"], size(-2), size(3));
+const CloseBtn$2 = styled__default(ButtonReset).withConfig({
+  displayName: "wrapper__CloseBtn"
+})(["display:block;padding:", ";"], size(2));
+const Body$3 = styled__default.div.withConfig({
+  displayName: "wrapper__Body"
+})(["padding:", ";"], size(3));
+const Image$2 = styled__default.img.withConfig({
+  displayName: "wrapper__Image"
+})(["display:block;width:calc(100% + ", ");margin-left:", ";margin-bottom:", ";"], size(6), size(-3), size(3));
+const ModalFoldout = styled__default.div.withConfig({
+  displayName: "wrapper__ModalFoldout"
+})(["background-color:", ";margin:", ";margin-top:", ";padding:", ";"], props => props.theme.color.accent, size(-3), size(3), size(3));
+const ModalFoldoutBody = styled__default.div.withConfig({
+  displayName: "wrapper__ModalFoldoutBody"
+})([""]);
 
 const Modal = ({
   id,
@@ -4775,7 +3244,7 @@ const Gallery = ({
     onMouseDown: onMouseDown,
     onMouseMove: onMouseMove,
     onClick: onClick
-  }, React__default.createElement(Slider$1, Object.assign({}, sliderSettings, {
+  }, React__default.createElement(Slider$1, _objectSpread2(_objectSpread2({}, sliderSettings), {}, {
     swipe: !navigationDisabled,
     touchMove: !navigationDisabled,
     swipeToSlide: !navigationDisabled,
@@ -4863,88 +3332,24 @@ const Gallery = ({
   }));
 };
 
-const ProductPage = styled__default.div`
-  display: flex;
-  flex-direction: column;
-
-  ${props => props.theme.breakpoint.Md} {
-    flex-direction: row;
-  }
-`;
-const ProductPageAside = styled__default.div`
-  ${props => props.theme.breakpoint.LtMd} {
-    display: contents;
-  }
-
-  ${props => props.theme.breakpoint.Md} {
-    flex-shrink: 0;
-    width: calc(375px + ${size(2)});
-    padding-right: ${size(2)};
-  }
-`;
-const ProductPageMain = styled__default.div`
-  ${props => props.theme.breakpoint.LtMd} {
-    display: contents;
-  }
-
-  ${props => props.theme.breakpoint.Md} {
-    flex: 1 1 100%;
-    min-width: 0;
-    padding-left: ${size(2)};
-  }
-`;
-const ProductPageAsideSection = styled__default.div`
-  ${props => props.theme.breakpoint.LtMd} {
-    order: ${props => props.mobileOrder};
-
-    & + & {
-      margin-top: ${size(2)};
-    }
-
-    :last-child {
-      margin-bottom: ${size(4)};
-    }
-
-    ${ProductPageMain} & {
-      margin-top: ${size(2)};
-    }
-  }
-
-  ${props => props.theme.breakpoint.Md} {
-    & + & {
-      margin-top: ${size(4)};
-    }
-
-    ${ProductPageMain} & {
-      margin-bottom: ${size(8)};
-    }
-  }
-`;
-const ProductPageMainSection = styled__default.div`
-  ${props => props.theme.breakpoint.LtMd} {
-    order: 99;
-    padding: ${size(4)} 0;
-    border-top: ${size(1)} solid ${props => props.theme.color.accent};
-
-    ${Wrapper} & {
-      margin-left: ${size(-2)};
-      margin-right: ${size(-2)};
-      padding-left: ${size(2)};
-      padding-right: ${size(2)};
-    }
-  }
-
-  ${props => props.theme.breakpoint.Md} {
-    & + & {
-      margin-top: ${size(8)};
-      padding-top: ${size(8)};
-      border-top: 1px solid ${props => props.theme.color.border};
-    }
-  }
-`;
-const ProductPageContentLimit = styled__default.div`
-  max-width: 420px;
-`;
+const ProductPage = styled__default.div.withConfig({
+  displayName: "ProductPage"
+})(["display:flex;flex-direction:column;", "{flex-direction:row;}"], props => props.theme.breakpoint.Md);
+const ProductPageAside = styled__default.div.withConfig({
+  displayName: "ProductPage__ProductPageAside"
+})(["", "{display:contents;}", "{flex-shrink:0;width:calc(375px + ", ");padding-right:", ";}"], props => props.theme.breakpoint.LtMd, props => props.theme.breakpoint.Md, size(2), size(2));
+const ProductPageMain = styled__default.div.withConfig({
+  displayName: "ProductPage__ProductPageMain"
+})(["", "{display:contents;}", "{flex:1 1 100%;min-width:0;padding-left:", ";}"], props => props.theme.breakpoint.LtMd, props => props.theme.breakpoint.Md, size(2));
+const ProductPageAsideSection = styled__default.div.withConfig({
+  displayName: "ProductPage__ProductPageAsideSection"
+})(["", "{order:", ";& + &{margin-top:", ";}:last-child{margin-bottom:", ";}", " &{margin-top:", ";}}", "{& + &{margin-top:", ";}", " &{margin-bottom:", ";}}"], props => props.theme.breakpoint.LtMd, props => props.mobileOrder, size(2), size(4), ProductPageMain, size(2), props => props.theme.breakpoint.Md, size(4), ProductPageMain, size(8));
+const ProductPageMainSection = styled__default.div.withConfig({
+  displayName: "ProductPage__ProductPageMainSection"
+})(["", "{order:99;padding:", " 0;border-top:", " solid ", ";", " &{margin-left:", ";margin-right:", ";padding-left:", ";padding-right:", ";}}", "{& + &{margin-top:", ";padding-top:", ";border-top:1px solid ", ";}}"], props => props.theme.breakpoint.LtMd, size(4), size(1), props => props.theme.color.accent, Wrapper, size(-2), size(-2), size(2), size(2), props => props.theme.breakpoint.Md, size(8), size(8), props => props.theme.color.border);
+const ProductPageContentLimit = styled__default.div.withConfig({
+  displayName: "ProductPage__ProductPageContentLimit"
+})(["max-width:420px;"]);
 
 const FinancialOptionDetail = client.gql`
   fragment FinancialOptionDetail on FinancialOptionDetail {
@@ -4965,6 +3370,7 @@ const SEARCH_ITEM_QUERY = client.gql`
   query SearchItem($id: ID!) {
     vehicle(id: $id) {
       id
+      documents
       contact {
         name
         email
@@ -5177,53 +3583,26 @@ const useSearchItem = id => client.useQuery(SEARCH_ITEM_QUERY, {
   skip: !id
 });
 
-const Wrapper$l = styled__default.div`
-  display: flex;
-  align-items: center;
-  padding: ${size(1)};
-  border: 1px solid ${props => props.theme.color.border};
-  border-radius: 3px;
-
-  & + & {
-    margin-top: ${size(1)};
-  }
-`;
-const Logo$1 = styled__default.div`
-  position: relative;
-  flex-shrink: 0;
-  margin-right: ${size(1)};
-  width: ${size(9.5)};
-  height: ${size(6)};
-`;
-const LogoImg = styled__default.img`
-  display: block;
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: auto;
-  bottom: 0;
-  margin: auto;
-  max-width: 100%;
-  max-height: 100%;
-`;
-const Content$4 = styled__default.div`
-  flex: 1 1 auto;
-  text-align: right;
-  line-height: 1.4;
-`;
+const Wrapper$l = styled__default.div.withConfig({
+  displayName: "wrapper__Wrapper"
+})(["display:flex;align-items:center;padding:", ";border:1px solid ", ";border-radius:3px;& + &{margin-top:", ";}"], size(1), props => props.theme.color.border, size(1));
+const Logo$1 = styled__default.div.withConfig({
+  displayName: "wrapper__Logo"
+})(["position:relative;flex-shrink:0;margin-right:", ";width:", ";height:", ";"], size(1), size(9.5), size(6));
+const LogoImg = styled__default.img.withConfig({
+  displayName: "wrapper__LogoImg"
+})(["display:block;position:absolute;left:0;top:0;right:auto;bottom:0;margin:auto;max-width:100%;max-height:100%;"]);
+const Content$4 = styled__default.div.withConfig({
+  displayName: "wrapper__Content"
+})(["flex:1 1 auto;text-align:right;line-height:1.4;"]);
 const OptionBoxHeading = styled__default.div.attrs(() => ({
   className: 'wayke__theme wayke__font--bold'
-}))`
-  font-size: 1rem;
-`;
-const OptionBoxContent = styled__default.div`
-  margin-top: ${size(0.5)};
-  font-size: 0.875rem;
-
-  p {
-    margin: 0;
-  }
-`;
+})).withConfig({
+  displayName: "wrapper__OptionBoxHeading"
+})(["font-size:1rem;"]);
+const OptionBoxContent = styled__default.div.withConfig({
+  displayName: "wrapper__OptionBoxContent"
+})(["margin-top:", ";font-size:0.875rem;p{margin:0;}"], size(0.5));
 
 const OptionBox = ({
   logo,
@@ -5236,28 +3615,20 @@ const OptionBox = ({
   alt: logoAlt
 })), React.createElement(Content$4, null, children));
 
-const List$7 = styled__default.ul`
-  list-style: none;
-  padding: 0;
-  margin: 0;
-`;
-const Item$9 = styled__default.li`
-  display: flex;
-  align-items: flex-start;
-
-  & + & {
-    margin-top: ${size(1)};
-  }
-`;
-const Label$6 = styled__default.div`
-  flex: 1 1 auto;
-`;
+const List$7 = styled__default.ul.withConfig({
+  displayName: "wrapper__List"
+})(["list-style:none;padding:0;margin:0;"]);
+const Item$9 = styled__default.li.withConfig({
+  displayName: "wrapper__Item"
+})(["display:flex;align-items:flex-start;& + &{margin-top:", ";}"], size(1));
+const Label$6 = styled__default.div.withConfig({
+  displayName: "wrapper__Label"
+})(["flex:1 1 auto;"]);
 const Value$1 = styled__default.div.attrs(() => ({
   className: 'wayke__theme wayke__font--bold'
-}))`
-  flex-shrink: 0;
-  padding-left: ${size(2)};
-`;
+})).withConfig({
+  displayName: "wrapper__Value"
+})(["flex-shrink:0;padding-left:", ";"], size(2));
 
 const DataList = ({
   items
@@ -5348,48 +3719,31 @@ const useLoanCalculation = (id, duration, downPayment, residual) => client.useQu
   skip: duration === undefined || downPayment === undefined
 });
 
-const ContentLogo = styled__default.div`
-  ${props => props.theme.breakpoint.Sm} {
-    display: flex;
-    align-items: flex-start;
-  }
-`;
-const ContentLogoText = styled__default.div`
-  ${props => props.theme.breakpoint.Sm} {
-    flex: 1 1 auto;
-  }
-`;
-const ContentLogoMedia = styled__default.div`
-  ${props => props.theme.breakpoint.LtSm} {
-    margin-top: ${size(2)};
-  }
-
-  ${props => props.theme.breakpoint.Sm} {
-    flex-shrink: 0;
-    padding-left: ${size(4)};
-  }
-`;
-
-const Wrapper$m = styled__default.div`
-  display: flex;
-  align-items: flex-end;
-`;
+const ContentLogo = styled__default.div.withConfig({
+  displayName: "ContentLogo"
+})(["", "{display:flex;align-items:flex-start;}"], props => props.theme.breakpoint.Sm);
+const ContentLogoText = styled__default.div.withConfig({
+  displayName: "ContentLogo__ContentLogoText"
+})(["", "{flex:1 1 auto;}"], props => props.theme.breakpoint.Sm);
+const ContentLogoMedia = styled__default.div.withConfig({
+  displayName: "ContentLogo__ContentLogoMedia"
+})(["", "{margin-top:", ";}", "{flex-shrink:0;padding-left:", ";}"], props => props.theme.breakpoint.LtSm, size(2), props => props.theme.breakpoint.Sm, size(4));
+
+const Wrapper$m = styled__default.div.withConfig({
+  displayName: "wrapper__Wrapper"
+})(["display:flex;align-items:flex-end;"]);
 const Label$7 = styled__default.div.attrs(() => ({
   className: 'wayke__theme wayke__font--bold'
-}))`
-  flex: 1 1 auto;
-`;
+})).withConfig({
+  displayName: "wrapper__Label"
+})(["flex:1 1 auto;"]);
 const Value$2 = styled__default.div.attrs(() => ({
   className: 'wayke__theme wayke__font--bold wayke__color--primary-text'
-}))`
-  flex-shrink: 0;
-  padding-left: ${size(2)};
-  font-size: 1.125rem;
-
-  ${({
+})).withConfig({
+  displayName: "wrapper__Value"
+})(["flex-shrink:0;padding-left:", ";font-size:1.125rem;", ""], size(2), ({
   isHighlighted
-}) => isHighlighted && styled.css(["font-size:1.375rem;color:", " !important;"], props => props.theme.color.textDark)}
-`;
+}) => isHighlighted && styled.css(["font-size:1.375rem;color:", " !important;"], props => props.theme.color.textDark));
 
 const RangeSliderLabel = ({
   label,
@@ -5432,7 +3786,7 @@ const RangeSliderSimple = ({
     }
   }, React__default.createElement(reactCompoundSlider.Rail, null, ({
     getRailProps
-  }) => React__default.createElement(Bar$1, Object.assign({}, getRailProps()))), React__default.createElement(reactCompoundSlider.Handles, null, ({
+  }) => React__default.createElement(Bar$1, _objectSpread2({}, getRailProps()))), React__default.createElement(reactCompoundSlider.Handles, null, ({
     handles,
     getHandleProps
   }) => React__default.createElement("div", {
@@ -5687,30 +4041,26 @@ const FinancialOptions = ({
   financialOption: financialOption
 })))));
 
-const Wrapper$n = styled__default.article`
-  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
-  border-radius: 3px;
-  overflow: hidden;
-`;
-const Main$1 = styled__default.div`
-  padding: ${size(2.5)};
-`;
+const Wrapper$n = styled__default.article.withConfig({
+  displayName: "wrapper__Wrapper"
+})(["box-shadow:2px 2px 8px rgba(0,0,0,0.1);border-radius:3px;overflow:hidden;"]);
+const Main$1 = styled__default.div.withConfig({
+  displayName: "wrapper__Main"
+})(["padding:", ";"], size(2.5));
 const Heading$5 = styled__default(H2).attrs(() => ({
   as: 'h1'
-}))`
-  margin-bottom: 0;
-`;
-const Description$2 = styled__default.div`
-  margin-top: ${size(1)};
-`;
-const Footer$2 = styled__default.div`
-  margin-top: ${size(1)};
-  color: red;
-`;
-const Foldout = styled__default.div`
-  background-color: ${props => props.theme.color.accent};
-  padding: ${size(2.5)};
-`;
+})).withConfig({
+  displayName: "wrapper__Heading"
+})(["margin-bottom:0;"]);
+const Description$2 = styled__default.div.withConfig({
+  displayName: "wrapper__Description"
+})(["margin-top:", ";"], size(1));
+const Footer$2 = styled__default.div.withConfig({
+  displayName: "wrapper__Footer"
+})(["margin-top:", ";color:red;"], size(1));
+const Foldout = styled__default.div.withConfig({
+  displayName: "wrapper__Foldout"
+})(["background-color:", ";padding:", ";"], props => props.theme.color.accent, size(2.5));
 
 const DetailBox = ({
   heading,
@@ -5725,59 +4075,26 @@ const DetailBox = ({
   }, React__default.createElement(ButtonContent, null, extendBtnText)))), extend && React__default.createElement(Foldout, null, children));
 };
 
-const Wrapper$o = styled__default.div``;
-const Header$4 = styled__default.div`
-  display: flex;
-  align-items: center;
-`;
-const Title = styled__default.div``;
-const Info$1 = styled__default.div`
-  margin-left: ${size(1)};
-`;
+const Wrapper$o = styled__default.div.withConfig({
+  displayName: "wrapper__Wrapper"
+})([""]);
+const Header$4 = styled__default.div.withConfig({
+  displayName: "wrapper__Header"
+})(["display:flex;align-items:center;"]);
+const Title = styled__default.div.withConfig({
+  displayName: "wrapper__Title"
+})([""]);
+const Info$1 = styled__default.div.withConfig({
+  displayName: "wrapper__Info"
+})(["margin-left:", ";"], size(1));
 const InfoBtn = styled__default(ButtonReset).attrs(() => ({
   className: 'wayke__theme wayke__color--primary-text'
-}))`
-  position: relative;
-  display: block;
-  font: inherit;
-  font-size: 1em;
-  transform-origin: 50% 50%;
-  transition: transform 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
-
-  :before {
-    content: '';
-    position: absolute;
-    top: ${size(-0.5)};
-    bottom: ${size(-0.5)};
-    left: ${size(-0.5)};
-    right: ${size(-0.5)};
-    background-color: ${props => props.theme.color.accentDark};
-    border-radius: 50%;
-    opacity: 0;
-    transition: opacity 200ms ease;
-  }
-
-  > * {
-    position: relative;
-    z-index: 1;
-  }
-
-  :hover {
-    :before {
-      opacity: 1;
-    }
-  }
-
-  :active {
-    transform: scale(0.95);
-  }
-`;
-const Extend$1 = styled__default.div`
-  padding-top: ${size(1)};
-  margin-top: ${size(1)};
-  border-top: 1px solid ${props => props.theme.color.border};
-  font-size: 0.875em;
-`;
+})).withConfig({
+  displayName: "wrapper__InfoBtn"
+})(["position:relative;display:block;font:inherit;font-size:1em;transform-origin:50% 50%;transition:transform 300ms cubic-bezier(0.47,1.64,0.41,0.8);:before{content:'';position:absolute;top:", ";bottom:", ";left:", ";right:", ";background-color:", ";border-radius:50%;opacity:0;transition:opacity 200ms ease;}> *{position:relative;z-index:1;}:hover{:before{opacity:1;}}:active{transform:scale(0.95);}"], size(-0.5), size(-0.5), size(-0.5), size(-0.5), props => props.theme.color.accentDark);
+const Extend$1 = styled__default.div.withConfig({
+  displayName: "wrapper__Extend"
+})(["padding-top:", ";margin-top:", ";border-top:1px solid ", ";font-size:0.875em;"], size(1), size(1), props => props.theme.color.border);
 
 const ExtendInfo = ({
   title,
@@ -5795,10 +4112,9 @@ const ExtendInfo = ({
 
 const Wrapper$p = styled__default.label.attrs(() => ({
   className: 'wayke__theme wayke__font--bold'
-}))`
-  margin-bottom: ${size(0.5)};
-  font-size: 0.875rem;
-`;
+})).withConfig({
+  displayName: "wrapper__Wrapper"
+})(["margin-bottom:", ";font-size:0.875rem;"], size(0.5));
 
 const InputLabel = ({
   children,
@@ -5807,58 +4123,15 @@ const InputLabel = ({
   htmlFor: htmlFor
 }, children);
 
-const Wrapper$q = styled__default.div`
-  position: relative;
-  display: flex;
-  align-items: stretch;
-  background-color: ${props => props.theme.color.accent};
-  border-radius: 3px;
-`;
+const Wrapper$q = styled__default.div.withConfig({
+  displayName: "wrapper__Wrapper"
+})(["position:relative;display:flex;align-items:stretch;background-color:", ";border-radius:3px;"], props => props.theme.color.accent);
 const Input$1 = styled__default.input.attrs(() => ({
   type: 'text',
   className: 'wayke__theme wayke__font--regular'
-}))`
-  flex: 1 1 auto;
-  display: block;
-  width: 100%;
-  height: ${props => props.theme.distances.inputHeight};
-  padding: 0 ${size(2)};
-  background-color: transparent;
-  font-size: 16px;
-  border: none;
-  border-radius: 0;
-  box-shadow: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-
-  :focus {
-    outline: none;
-  }
-
-  &::-webkit-input-placeholder {
-    font-family: inherit;
-    color: ${props => props.theme.color.textDarkLighten};
-    font-size: 1em;
-  }
-
-  &:-moz-placeholder {
-    font-family: inherit;
-    color: ${props => props.theme.color.textDarkLighten};
-    font-size: 1em;
-  }
-
-  &::-moz-placeholder {
-    font-family: inherit;
-    color: ${props => props.theme.color.textDarkLighten};
-    font-size: 1em;
-  }
-
-  &:-ms-input-placeholder {
-    font-family: inherit;
-    color: ${props => props.theme.color.textDarkLighten};
-    font-size: 1em;
-  }
-`;
+})).withConfig({
+  displayName: "wrapper__Input"
+})(["flex:1 1 auto;display:block;width:100%;height:", ";padding:0 ", ";background-color:transparent;font-size:16px;border:none;border-radius:0;box-shadow:none;-moz-appearance:none;-webkit-appearance:none;:focus{outline:none;}&::-webkit-input-placeholder{font-family:inherit;color:", ";font-size:1em;}&:-moz-placeholder{font-family:inherit;color:", ";font-size:1em;}&::-moz-placeholder{font-family:inherit;color:", ";font-size:1em;}&:-ms-input-placeholder{font-family:inherit;color:", ";font-size:1em;}"], props => props.theme.distances.inputHeight, size(2), props => props.theme.color.textDarkLighten, props => props.theme.color.textDarkLighten, props => props.theme.color.textDarkLighten, props => props.theme.color.textDarkLighten);
 
 const InputText = ({
   placeholder,
@@ -5878,46 +4151,21 @@ const InputText = ({
 
 const Label$8 = styled__default.label.attrs(() => ({
   className: 'wayke__theme wayke__color--primary-text'
-}))`
-  position: relative;
-  display: flex;
-  align-items: flex-start;
-  font-size: 1rem;
-  line-height: 1.2;
-  cursor: pointer;
-
-  :before {
-    content: '';
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    width: ${size(2.5)};
-    height: ${size(2.5)};
-    margin-right: ${size(1)};
-    background-color: ${props => props.theme.color.accent};
-    color: currentColor;
-    border: none;
-    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.07);
-    text-align: center;
-    font-size: 15px;
-    cursor: pointer;
-    border-radius: 3px;
-    margin-top: -2px;
-  }
-`;
-const Wrapper$r = styled__default(props => React.createElement("div", Object.assign({}, props))).attrs(({
+})).withConfig({
+  displayName: "wrapper__Label"
+})(["position:relative;display:flex;align-items:flex-start;font-size:1rem;line-height:1.2;cursor:pointer;:before{content:'';display:flex;align-items:center;justify-content:center;flex-shrink:0;width:", ";height:", ";margin-right:", ";background-color:", ";color:currentColor;border:none;box-shadow:inset 1px 1px 2px rgba(0,0,0,0.07);text-align:center;font-size:15px;cursor:pointer;border-radius:3px;margin-top:-2px;}"], size(2.5), size(2.5), size(1), props => props.theme.color.accent);
+const Wrapper$r = styled__default(props => React.createElement("div", _objectSpread2({}, props))).attrs(({
   type,
   checked
 }) => ({
   role: type || 'checkbox',
   'aria-checked': checked
-}))`
-  ${({
+})).withConfig({
+  displayName: "wrapper__Wrapper"
+})(["", ""], ({
   error
-}) => error && styled.css(["", "{color:", ";:before{background-color:", ";}}"], Label$8, props => props.theme.color.ui.negative, props => props.theme.color.ui.negativeLight)}
-`;
-const Input$2 = styled__default(props => React.createElement("input", Object.assign({}, props, {
+}) => error && styled.css(["", "{color:", ";:before{background-color:", ";}}"], Label$8, props => props.theme.color.ui.negative, props => props.theme.color.ui.negativeLight));
+const Input$2 = styled__default(props => React.createElement("input", _objectSpread2(_objectSpread2({}, props), {}, {
   className: `${props.checked ? 'checked' : undefined} ${props.className}`
 }))).attrs(({
   type,
@@ -5925,86 +4173,29 @@ const Input$2 = styled__default(props => React.createElement("input", Object.ass
 }) => ({
   checked,
   type: type || 'checkbox'
-}))`
-  position: fixed;
-  left: -9999px;
-  opacity: 0;
-
-  &[disabled] {
-    & + ${Label$8} {
-      color: ${props => props.theme.color.disabledText};
-
-      &:before {
-        background-color: ${props => props.theme.color.disabledBg};
-        cursor: not-allowed;
-      }
-    }
-  }
-
-  &:checked,
-  &.checked {
-    & + ${Label$8} {
-      :before {
-        content: '✓';
-      }
-    }
-  }
-`;
-const LabelText = styled__default.div`
-  color: ${props => props.theme.color.textDark};
-`;
+})).withConfig({
+  displayName: "wrapper__Input"
+})(["position:fixed;left:-9999px;opacity:0;&[disabled]{& + ", "{color:", ";&:before{background-color:", ";cursor:not-allowed;}}}&:checked,&.checked{& + ", "{:before{content:'\u2713';}}}"], Label$8, props => props.theme.color.disabledText, props => props.theme.color.disabledBg, Label$8);
+const LabelText = styled__default.div.withConfig({
+  displayName: "wrapper__LabelText"
+})(["color:", ";"], props => props.theme.color.textDark);
 
 const iconSize$1 = '0.875rem';
 const selectPadding = size(2);
-const Wrapper$s = styled__default.div`
-  position: relative;
-  background-color: ${props => props.theme.color.accent};
-  border-radius: 3px;
-`;
+const Wrapper$s = styled__default.div.withConfig({
+  displayName: "wrapper__Wrapper"
+})(["position:relative;background-color:", ";border-radius:3px;"], props => props.theme.color.accent);
 const Select$1 = styled__default.select.attrs(() => ({
   className: 'wayke__theme wayke__font--regular'
-}))`
-  position: relative;
-  display: block;
-  width: 100%;
-  height: ${props => props.theme.distances.inputHeight};
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-  text-indent: 0.01px;
-  border: 0;
-  padding: 0 ${selectPadding};
-  padding-right: calc(${iconSize$1} + ${selectPadding});
-  background-color: transparent;
-  color: ${props => props.theme.color.textDark};
-  border-radius: 0;
-  font-size: 16px;
-  cursor: pointer;
-  z-index: 1;
-
-  :focus {
-    outline: none;
-  }
-
-  ::-ms-expand {
-    display: none;
-  }
-
-  ::-moz-focus-inner {
-    border: 0;
-  }
-`;
-const Option$1 = styled__default.option`
-  color: ${props => props.theme.color.textDark};
-`;
-const Icon$4 = styled__default.div`
-  position: absolute;
-  top: 50%;
-  right: ${selectPadding};
-  transform: translateY(-50%);
-  font-size: ${iconSize$1};
-`;
+})).withConfig({
+  displayName: "wrapper__Select"
+})(["position:relative;display:block;width:100%;height:", ";-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-tap-highlight-color:rgba(255,255,255,0);text-indent:0.01px;border:0;padding:0 ", ";padding-right:calc(", " + ", ");background-color:transparent;color:", ";border-radius:0;font-size:16px;cursor:pointer;z-index:1;:focus{outline:none;}::-ms-expand{display:none;}::-moz-focus-inner{border:0;}"], props => props.theme.distances.inputHeight, selectPadding, iconSize$1, selectPadding, props => props.theme.color.textDark);
+const Option$1 = styled__default.option.withConfig({
+  displayName: "wrapper__Option"
+})(["color:", ";"], props => props.theme.color.textDark);
+const Icon$4 = styled__default.div.withConfig({
+  displayName: "wrapper__Icon"
+})(["position:absolute;top:50%;right:", ";transform:translateY(-50%);font-size:", ";"], selectPadding, iconSize$1);
 
 const InputSelect = ({
   value,
@@ -6024,41 +4215,19 @@ const InputSelect = ({
   block: true
 })));
 
-const InputGroup = styled__default.div`
-  ${props => props.theme.breakpoint.Sm} {
-    display: flex;
-    align-items: flex-start;
-    margin: ${size(-0.5)};
-  }
-`;
-const InputGroupColumn = styled__default.div`
-  ${props => props.theme.breakpoint.LtSm} {
-    & + & {
-      margin-top: ${size(1)};
-    }
-  }
-
-  ${props => props.theme.breakpoint.Sm} {
-    flex: 1 1 50%;
-    padding: ${size(0.5)};
-  }
-`;
-
-const ColumnRow = styled__default.div`
-  display: flex;
-  align-items: flex-start;
-`;
-const ColumnRowItem = styled__default.div`
-  flex: 1 1 auto;
+const InputGroup = styled__default.div.withConfig({
+  displayName: "InputGroup"
+})(["", "{display:flex;align-items:flex-start;margin:", ";}"], props => props.theme.breakpoint.Sm, size(-0.5));
+const InputGroupColumn = styled__default.div.withConfig({
+  displayName: "InputGroup__InputGroupColumn"
+})(["", "{& + &{margin-top:", ";}}", "{flex:1 1 50%;padding:", ";}"], props => props.theme.breakpoint.LtSm, size(1), props => props.theme.breakpoint.Sm, size(0.5));
 
-  :last-child:not(:only-child) {
-    flex: 0 0 auto;
-  }
-
-  & + & {
-    padding-left: ${size(2)};
-  }
-`;
+const ColumnRow = styled__default.div.withConfig({
+  displayName: "ColumnRow"
+})(["display:flex;align-items:flex-start;"]);
+const ColumnRowItem = styled__default.div.withConfig({
+  displayName: "ColumnRow__ColumnRowItem"
+})(["flex:1 1 auto;:last-child:not(:only-child){flex:0 0 auto;}& + &{padding-left:", ";}"], size(2));
 
 const INSURANCE_CALCULATION = client.gql`
   query InsuranceCalculation(
@@ -6313,7 +4482,7 @@ const Ecom = ({
     useBankId: ecomSettings === null || ecomSettings === void 0 ? void 0 : ecomSettings.useBankId,
     displayBankIdAlert: ecomSettings === null || ecomSettings === void 0 ? void 0 : ecomSettings.displayBankIdAlert
   };
-  return React__default.createElement(EcomBase, Object.assign({}, ecomData));
+  return React__default.createElement(EcomBase, _objectSpread2({}, ecomData));
 };
 
 const ManufacturerPackageOption = ({
@@ -6329,7 +4498,7 @@ const ManufacturerPackageOption = ({
     noMargin: true
   }, packageOption.title)), packageOption.description && React__default.createElement(Repeat, null, React__default.createElement(Content$2, {
     dangerouslySetInnerHTML: {
-      __html: marked(packageOption.description)
+      __html: marked.marked(packageOption.description)
     }
   })), ((_a = packageOption.link) === null || _a === void 0 ? void 0 : _a.url) && React__default.createElement(Repeat, null, React__default.createElement(ButtonInline, {
     as: "a",
@@ -6400,7 +4569,7 @@ const Metadata = {
 const typedMetadata = Metadata;
 const formatPhonenumber = text => {
   try {
-    const parsed = custom.parsePhoneNumberFromString(text.replace('-', '').replace(/ /g, ''), typedMetadata);
+    const parsed = core.parsePhoneNumberFromString(text.replace('-', '').replace(/ /g, ''), typedMetadata);
     return (parsed === null || parsed === void 0 ? void 0 : parsed.formatNational()) || text;
   } catch (e) {
     return text;
@@ -6437,30 +4606,20 @@ const ActionList = ({
   }));
 };
 
-const List$8 = styled__default.ul`
-  list-style: none;
-  padding: 0;
-  margin: 0;
-`;
-const Item$a = styled__default.li`
-  position: relative;
-  font-size: 0.875rem;
-
-  & + & {
-    margin-top: ${size(0.5)};
-  }
-`;
+const List$8 = styled__default.ul.withConfig({
+  displayName: "wrapper__List"
+})(["list-style:none;padding:0;margin:0;"]);
+const Item$a = styled__default.li.withConfig({
+  displayName: "wrapper__Item"
+})(["position:relative;font-size:0.875rem;& + &{margin-top:", ";}"], size(0.5));
 const Icon$5 = styled__default.div.attrs(() => ({
   className: 'wayke__theme wayke__color--primary-text'
-}))`
-  position: absolute;
-  left: 0;
-  top: 4px; // Magic number
-  font-size: 0.875em;
-`;
-const Label$9 = styled__default.div`
-  padding-left: calc(1em + ${size(1)});
-`;
+})).withConfig({
+  displayName: "wrapper__Icon"
+})(["position:absolute;left:0;top:4px;font-size:0.875em;"]);
+const Label$9 = styled__default.div.withConfig({
+  displayName: "wrapper__Label"
+})(["padding-left:calc(1em + ", ");"], size(1));
 
 const CheckMarkListItem = ({
   children
@@ -6472,74 +4631,34 @@ const CheckMarkList = ({
   children
 }) => React__default.createElement(List$8, null, children);
 
-const Wrapper$t = styled__default.div`
-  padding: ${size(1.5)} ${size(2)};
-  background-color: ${props => props.theme.color.accentDark};
-  border-radius: 3px;
-  font-size: 0.875rem;
-`;
-const Header$5 = styled__default.div`
-  display: flex;
-  align-items: center;
-`;
-const Body$4 = styled__default.div`
-  font-size: 0.875rem;
-  margin-top: ${size(1)};
-`;
-const Info$2 = styled__default.div`
-  flex: 1 1 auto;
-  display: flex;
-  align-items: center;
-`;
-const Action$6 = styled__default.div`
-  flex-shrink: 0;
-  padding-left: ${size(1.5)};
-  font-size: 0.875rem;
-`;
-const InfoContent = styled__default.div`
-  & + & {
-    margin-left: ${size(0.75)};
-  }
-`;
+const Wrapper$t = styled__default.div.withConfig({
+  displayName: "wrapper__Wrapper"
+})(["padding:", " ", ";background-color:", ";border-radius:3px;font-size:0.875rem;"], size(1.5), size(2), props => props.theme.color.accentDark);
+const Header$5 = styled__default.div.withConfig({
+  displayName: "wrapper__Header"
+})(["display:flex;align-items:center;"]);
+const Body$4 = styled__default.div.withConfig({
+  displayName: "wrapper__Body"
+})(["font-size:0.875rem;margin-top:", ";"], size(1));
+const Info$2 = styled__default.div.withConfig({
+  displayName: "wrapper__Info"
+})(["flex:1 1 auto;display:flex;align-items:center;"]);
+const Action$6 = styled__default.div.withConfig({
+  displayName: "wrapper__Action"
+})(["flex-shrink:0;padding-left:", ";font-size:0.875rem;"], size(1.5));
+const InfoContent = styled__default.div.withConfig({
+  displayName: "wrapper__InfoContent"
+})(["& + &{margin-left:", ";}"], size(0.75));
 const InfoBtn$1 = styled__default(ButtonReset).attrs(() => ({
   className: 'wayke__theme wayke__color--primary-text'
-}))`
-  position: relative;
-  display: block;
-
-  :before {
-    content: '';
-    position: absolute;
-    top: ${size(-0.5)};
-    bottom: ${size(-0.5)};
-    left: ${size(-0.5)};
-    right: ${size(-0.5)};
-    background-color: ${props => props.theme.color.accentDark};
-    border-radius: 50%;
-    opacity: 0;
-    transition: opacity 200ms ease;
-  }
-
-  > * {
-    position: relative;
-    z-index: 1;
-  }
-
-  :hover {
-    :before {
-      opacity: 1;
-    }
-  }
-
-  :active {
-    transform: scale(0.95);
-  }
-`;
+})).withConfig({
+  displayName: "wrapper__InfoBtn"
+})(["position:relative;display:block;:before{content:'';position:absolute;top:", ";bottom:", ";left:", ";right:", ";background-color:", ";border-radius:50%;opacity:0;transition:opacity 200ms ease;}> *{position:relative;z-index:1;}:hover{:before{opacity:1;}}:active{transform:scale(0.95);}"], size(-0.5), size(-0.5), size(-0.5), size(-0.5), props => props.theme.color.accentDark);
 const Title$1 = styled__default.div.attrs(() => ({
   className: 'wayke__theme wayke__font--bold'
-}))`
-  font-size: 1rem;
-`;
+})).withConfig({
+  displayName: "wrapper__Title"
+})(["font-size:1rem;"]);
 
 const SwitchBar = ({
   title,
@@ -6622,7 +4741,7 @@ const PackageOptionModal = ({
     wide: true
   })), packageOption.description && React__default.createElement(Repeat, null, React__default.createElement(Content$2, {
     dangerouslySetInnerHTML: {
-      __html: marked(packageOption.description)
+      __html: marked.marked(packageOption.description)
     }
   })), ((_a = packageOption.link) === null || _a === void 0 ? void 0 : _a.href) && packageOption.link.title && React__default.createElement(Repeat, null, React__default.createElement(ButtonInline, {
     as: "a",
@@ -6693,17 +4812,15 @@ const CheckList = ({
   }, React__default.createElement(Content$2, null, React__default.createElement("p", null, "Denna bil tillh\u00F6r ett centrallager och g\u00E5r att k\u00F6pa genom flera anl\u00E4ggningar. Byt anl\u00E4ggning f\u00F6r att visa kontaktuppgifter till just den anl\u00E4ggningen.")))));
 };
 
-const Wrapper$u = styled__default.div`
-  display: flex;
-  align-items: center;
-`;
-const Heading$6 = styled__default.div`
-  flex: 1 1 auto;
-`;
-const Action$7 = styled__default.div`
-  flex-shrink: 0;
-  padding-left: ${size(2)};
-`;
+const Wrapper$u = styled__default.div.withConfig({
+  displayName: "wrapper__Wrapper"
+})(["display:flex;align-items:center;"]);
+const Heading$6 = styled__default.div.withConfig({
+  displayName: "wrapper__Heading"
+})(["flex:1 1 auto;"]);
+const Action$7 = styled__default.div.withConfig({
+  displayName: "wrapper__Action"
+})(["flex-shrink:0;padding-left:", ";"], size(2));
 
 const SectionHeader = ({
   children,
@@ -6715,69 +4832,15 @@ 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)};
-    }
-  }
-
-  ${props => props.theme.breakpoint.LtSm} {
-    ${Wrapper} & {
-      margin-left: ${size(-2)};
-      margin-right: ${size(-1)};
-    }
-  }
-`;
-const OverflowGridList = styled__default.ul`
-  display: flex;
-  align-items: flex-start;
-  list-style: none;
-  padding: 0;
-  margin: ${size(-1)};
-
-  ${props => props.theme.breakpoint.LtMd} {
-    ${Wrapper} & {
-      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} {
-    ${Wrapper} & {
-      padding: 0 ${size(2)};
-
-      :after {
-        width: ${size(1)};
-      }
-    }
-  }
-`;
-const OverflowGridItem = styled__default.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%;
-  }
-`;
+const OverflowGrid = styled__default.div.withConfig({
+  displayName: "OverflowGrid"
+})(["", "{", " &{margin-left:", ";margin-right:", ";}}", "{", " &{margin-left:", ";margin-right:", ";}}"], props => props.theme.breakpoint.LtMd, Wrapper, size(-3), size(-2), props => props.theme.breakpoint.LtSm, Wrapper, size(-2), size(-1));
+const OverflowGridList = styled__default.ul.withConfig({
+  displayName: "OverflowGrid__OverflowGridList"
+})(["display:flex;align-items:flex-start;list-style:none;padding:0;margin:", ";", "{", " &{overflow:auto;-webkit-overflow-scrolling:touch;padding:0 ", ";:after{content:'';flex:0 0 auto;height:1px;width:", ";}}}", "{", " &{padding:0 ", ";:after{width:", ";}}}"], size(-1), props => props.theme.breakpoint.LtMd, Wrapper, size(3), size(2), props => props.theme.breakpoint.LtSm, Wrapper, size(2), size(1));
+const OverflowGridItem = styled__default.li.withConfig({
+  displayName: "OverflowGrid__OverflowGridItem"
+})(["flex:1 0 auto;width:calc(100% - ", ");max-width:calc(100% - ", ");padding:", ";", "{width:calc(50% - ", ");max-width:calc(50% - ", ");}", "{width:33.333%;max-width:33.333%;}"], size(2), size(2), size(1), props => props.theme.breakpoint.Sm, size(3), size(3), props => props.theme.breakpoint.Md);
 
 const RelatedSearchContext = React.createContext({
   moreLikeThisUrl: false,
@@ -6900,7 +4963,7 @@ const PackageOptions = ({
       noMargin: true
     }, packageOption.title)), packageOption.description && React__default.createElement(Repeat, null, React__default.createElement(Content$2, {
       dangerouslySetInnerHTML: {
-        __html: marked(packageOption.description)
+        __html: marked.marked(packageOption.description)
       }
     })), ((_a = packageOption.link) === null || _a === void 0 ? void 0 : _a.url) && React__default.createElement(Repeat, null, React__default.createElement(ButtonInline, {
       as: "a",
@@ -6915,18 +4978,15 @@ const PackageOptions = ({
   }));
 };
 
-const TableColumn = styled__default.div`
-  line-height: 1.2;
-`;
-const TableColumnRow = styled__default.div`
-  display: flex;
-  align-items: flex-start;
-  margin: ${size(-1)};
-`;
-const TableColumnCell = styled__default.div`
-  flex: 1 0 50%;
-  padding: ${size(1)};
-`;
+const TableColumn = styled__default.div.withConfig({
+  displayName: "TableColumn"
+})(["line-height:1.2;"]);
+const TableColumnRow = styled__default.div.withConfig({
+  displayName: "TableColumn__TableColumnRow"
+})(["display:flex;align-items:flex-start;margin:", ";"], size(-1));
+const TableColumnCell = styled__default.div.withConfig({
+  displayName: "TableColumn__TableColumnCell"
+})(["flex:1 0 50%;padding:", ";"], size(1));
 
 const getBg = severity => {
   let bg = theme.color.textDark;
@@ -6942,15 +5002,9 @@ const getBg = severity => {
 
 const Wrapper$v = styled__default.div.attrs(() => ({
   className: 'wayke__theme wayke__font--bold'
-}))`
-  display: inline-block;
-  background-color: ${props => getBg(props.severity)};
-  padding: ${size(0.75)} ${size(1.5)};
-  color: ${props => props.theme.color.textLight};
-  border-radius: 3px;
-  font-size: 0.75rem;
-  line-height: 1.2;
-`;
+})).withConfig({
+  displayName: "wrapper__Wrapper"
+})(["display:inline-block;background-color:", ";padding:", " ", ";color:", ";border-radius:3px;font-size:0.75rem;line-height:1.2;"], props => getBg(props.severity), size(0.75), size(1.5), props => props.theme.color.textLight);
 
 const Badge = ({
   label,
@@ -7067,30 +5121,18 @@ const PhoneNumber = ({
   }, React__default.createElement(ButtonContent, null, "Visa telefonnummer"))));
 };
 
-const Wrapper$w = styled__default.a`
-  display: block;
-`;
-const Image$3 = styled__default.img`
-  display: block;
-  width: 100%;
-  border-radius: 3px;
-`;
-const Placeholder = styled__default.a`
-  display: block;
-  position: relative;
-  width: 100%;
-  height: 0;
-  padding-bottom: 43.75%; // Proportions of Google Static Map (640x280)
-  background-image: linear-gradient(-15deg, #dfe4ce, #c1d6ea, #dfe4ce);
-  border-radius: 3px;
-  color: ${props => props.theme.color.textDark};
-`;
-const PlaceholderAction = styled__default.div`
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-`;
+const Wrapper$w = styled__default.a.withConfig({
+  displayName: "wrapper__Wrapper"
+})(["display:block;"]);
+const Image$3 = styled__default.img.withConfig({
+  displayName: "wrapper__Image"
+})(["display:block;width:100%;border-radius:3px;"]);
+const Placeholder = styled__default.a.withConfig({
+  displayName: "wrapper__Placeholder"
+})(["display:block;position:relative;width:100%;height:0;padding-bottom:43.75%;background-image:linear-gradient(-15deg,#dfe4ce,#c1d6ea,#dfe4ce);border-radius:3px;color:", ";"], props => props.theme.color.textDark);
+const PlaceholderAction = styled__default.div.withConfig({
+  displayName: "wrapper__PlaceholderAction"
+})(["position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);"]);
 
 const StaticMap = ({
   position
@@ -7889,36 +5931,24 @@ var removeProperties = (properties => {
   return newProperties;
 });
 
-const TableList = styled__default.ul`
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  border-top: 1px solid ${props => props.theme.color.border};
-  border-bottom: 1px solid ${props => props.theme.color.border};
-  font-size: 0.875rem;
-`;
-const TableListItem = styled__default.li`
-  display: flex;
-  align-items: center;
-  padding: ${size(1)} 0;
-
-  & + & {
-    border-top: 1px solid ${props => props.theme.color.border};
-  }
-`;
-const TableListKey = styled__default.div`
-  flex: 1 1 auto;
-`;
-const TableListValue = styled__default.div`
-  flex-shrink: 0;
-  padding-left: ${size(1)};
-`;
-const TableListBooleanPos = styled__default.div`
-  color: ${props => props.theme.color.ui.positive};
-`;
-const TableListBooleanNeg = styled__default.div`
-  color: ${props => props.theme.color.ui.negative};
-`;
+const TableList = styled__default.ul.withConfig({
+  displayName: "TableList"
+})(["list-style:none;padding:0;margin:0;border-top:1px solid ", ";border-bottom:1px solid ", ";font-size:0.875rem;"], props => props.theme.color.border, props => props.theme.color.border);
+const TableListItem = styled__default.li.withConfig({
+  displayName: "TableList__TableListItem"
+})(["display:flex;align-items:center;padding:", " 0;& + &{border-top:1px solid ", ";}"], size(1), props => props.theme.color.border);
+const TableListKey = styled__default.div.withConfig({
+  displayName: "TableList__TableListKey"
+})(["flex:1 1 auto;"]);
+const TableListValue = styled__default.div.withConfig({
+  displayName: "TableList__TableListValue"
+})(["flex-shrink:0;padding-left:", ";"], size(1));
+const TableListBooleanPos = styled__default.div.withConfig({
+  displayName: "TableList__TableListBooleanPos"
+})(["color:", ";"], props => props.theme.color.ui.positive);
+const TableListBooleanNeg = styled__default.div.withConfig({
+  displayName: "TableList__TableListBooleanNeg"
+})(["color:", ";"], props => props.theme.color.ui.negative);
 
 const formatValue = (value, unit) => {
   if (typeof value === 'boolean') {
@@ -7953,7 +5983,7 @@ const MetadataItem = ({
   const [foldout, setFoldout] = React.useState(false);
   const onToggleFoldout = React.useCallback(() => setFoldout(!foldout), [foldout]);
   const presentedValue = formatValue(value, unit);
-  return React__default.createElement(TableListItem, null, React__default.createElement(TableListKey, null, hint ? React__default.createElement(ButtonInlinePrimary, {
+  return React__default.createElement(TableListItem, null, React__default.createElement(TableListKey, null, hint ? React__default.createElement(ButtonInline, {
     onClick: onToggleFoldout,
     title: `Mer information om ${name}`
   }, name) : name), React__default.createElement(TableListValue, null, value !== undefined ? presentedValue : 'Uppgift saknas'), hint && foldout && React__default.createElement(Modal, {
@@ -7966,64 +5996,21 @@ const MetadataItem = ({
   })));
 };
 
-const Wrapper$x = styled__default.div`
-  overflow: hidden;
-  margin-top: ${size(-1)};
-  margin-left: ${size(-1)};
-  margin-right: ${size(-1)};
-
-  ${props => props.theme.breakpoint.LtSm} {
-    margin-left: ${size(-2)};
-    margin-right: ${size(-2)};
-  }
-`;
-const List$9 = styled__default.ul`
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-  white-space: nowrap;
-  font-size: 0;
-
-  ${props => props.theme.breakpoint.LtSm} {
-    padding-left: ${size(1)};
-    padding-right: ${size(1)};
-  }
-`;
-const Item$b = styled__default.li`
-  display: inline-block;
-  vertical-align: bottom;
-  font-size: 1rem;
-`;
+const Wrapper$x = styled__default.div.withConfig({
+  displayName: "wrapper__Wrapper"
+})(["overflow:hidden;margin-top:", ";margin-left:", ";margin-right:", ";", "{margin-left:", ";margin-right:", ";}"], size(-1), size(-1), size(-1), props => props.theme.breakpoint.LtSm, size(-2), size(-2));
+const List$9 = styled__default.ul.withConfig({
+  displayName: "wrapper__List"
+})(["list-style:none;padding:0;margin:0;overflow:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;font-size:0;", "{padding-left:", ";padding-right:", ";}"], props => props.theme.breakpoint.LtSm, size(1), size(1));
+const Item$b = styled__default.li.withConfig({
+  displayName: "wrapper__Item"
+})(["display:inline-block;vertical-align:bottom;font-size:1rem;"]);
 const Action$8 = styled__default(ButtonReset).attrs(() => ({
   role: 'tab',
   className: 'wayke__theme wayke__font--bold'
-}))`
-  position: relative;
-  display: block;
-  padding: ${size(1)};
-  color: ${props => props.theme.color.textDarkLighten};
-
-  :hover {
-    color: ${props => props.theme.color.textDark};
-  }
-
-  :after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: ${size(1)};
-    right: ${size(1)};
-    height: 2px;
-    background-color: ${props => props.theme.color.textDark};
-    transform: scaleY(0);
-    transition: transform 200ms ease;
-    z-index: 1;
-  }
-
-  ${props => props.active && styled.css(["color:", ";:after{transform:scaleY(1);}"], props => props.theme.color.textDark)}
-`;
+})).withConfig({
+  displayName: "wrapper__Action"
+})(["position:relative;display:block;padding:", ";color:", ";:hover{color:", ";}:after{content:'';position:absolute;bottom:0;left:", ";right:", ";height:2px;background-color:", ";transform:scaleY(0);transition:transform 200ms ease;z-index:1;}", ""], size(1), props => props.theme.color.textDarkLighten, props => props.theme.color.textDark, size(1), size(1), props => props.theme.color.textDark, props => props.active && styled.css(["color:", ";:after{transform:scaleY(1);}"], props => props.theme.color.textDark));
 
 const Tabs = ({
   tabs,
@@ -8110,6 +6097,48 @@ const PropertySet = ({
   })));
 };
 
+const PdfListItem = styled__default.li.attrs(() => ({
+  className: 'wayke__theme wayke__color--primary-text'
+})).withConfig({
+  displayName: "wrapper__PdfListItem"
+})(["flex:0 0 50%;padding:", ";", "{flex:0 0 100%;}"], size(1), ({
+  theme
+}) => theme.breakpoint.LtSm);
+const PdfContainer = styled__default.ul.withConfig({
+  displayName: "wrapper__PdfContainer"
+})(["list-style:none;padding:0;display:flex;flex-wrap:wrap;margin:", ";"], size(-1));
+const PdfLink = styled__default.a.attrs(() => ({
+  className: 'wayke__theme wayke__color--primary-text wayke__font--bold'
+})).withConfig({
+  displayName: "wrapper__PdfLink"
+})(["text-decoration:none;font-size:0.875rem;&:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;}"]);
+const PdfTitle = styled__default.div.withConfig({
+  displayName: "wrapper__PdfTitle"
+})(["color:", ";"], props => props.theme.color.textDark);
+const PdfSubtitle = styled__default.div.withConfig({
+  displayName: "wrapper__PdfSubtitle"
+})(["color:", ";"], props => props.theme.color.textDarkLighten);
+const PdfColumn = styled__default.div.withConfig({
+  displayName: "wrapper__PdfColumn"
+})(["flex 0 0 auto;&:first-child{flex:1 1 auto;}"]);
+const PdfListInner = styled__default.div.withConfig({
+  displayName: "wrapper__PdfListInner"
+})(["position:relative;border:1px solid ", ";padding:", ";display:flex;align-items:center;:hover{background-color:", ";}"], props => props.theme.color.border, size(1.5), props => props.theme.color.hoverOverlay);
+
+const PdfDownloadItem = ({
+  document
+}) => React__default.createElement(PdfListItem, null, React__default.createElement(PdfListInner, null, React__default.createElement(PdfColumn, null, React__default.createElement(PdfTitle, null, document.name), React__default.createElement(PdfSubtitle, null, document.contentType)), React__default.createElement(PdfColumn, null, React__default.createElement(PdfLink, {
+  href: document.url,
+  rel: "noopener noreferrer nofollow",
+  target: "_blank"
+}, "\u00D6ppna"))));
+const PdfDownloadContainer = ({
+  documents
+}) => React__default.createElement(PdfContainer, null, documents.map((document, i) => React__default.createElement(PdfDownloadItem, {
+  key: `${document.url}-${i}`,
+  document: document
+})));
+
 const WaykeSearchItem = ({
   id,
   hashRoute,
@@ -8182,7 +6211,8 @@ const WaykeSearchItem = ({
     manufacturer,
     ecommerce,
     packageOptions,
-    publishedAt
+    publishedAt,
+    documents
   } = vehicle;
   const {
     fuelType,
@@ -8274,7 +6304,11 @@ const WaykeSearchItem = ({
     onClick: onShowMoreOptionsClick
   }, React__default.createElement(UspList, {
     items: options
-  })))), React__default.createElement(ProductPageMainSection, null, React__default.createElement(Branch, {
+  })))), (documents.length || 0) > 0 && React__default.createElement(ProductPageMainSection, null, React__default.createElement(Repeat, null, React__default.createElement(H2, {
+    noMargin: true
+  }, "Dokument")), React__default.createElement(Repeat, null, React__default.createElement(Content$2, null, React__default.createElement("p", null, "Tillh\u00F6rande dokument f\u00F6r bilen."))), React__default.createElement(Repeat, null, React__default.createElement(PdfDownloadContainer, {
+    documents: documents
+  }))), React__default.createElement(ProductPageMainSection, null, React__default.createElement(Branch, {
     branch: branch,
     loading: loadingCentralStorageVehicle
   }), ecommerce && ecommerce.enabled && React__default.createElement(Repeat, null, React__default.createElement(ButtonPrimary, {
@@ -8529,24 +6563,9 @@ const SearchProvider = ({
 
 const Root = styled__default.div.attrs(() => ({
   className: 'wayke__theme wayke__font--regular'
-}))`
-  background-color: ${props => props.theme.color.bg};
-  color: ${props => props.theme.color.textDark};
-  font-size: 1rem;
-  line-height: 1.5;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  *,
-  *:before,
-  *:after {
-    box-sizing: border-box;
-  }
-
-  a img {
-    border: 0;
-  }
-`;
+})).withConfig({
+  displayName: "Root"
+})(["background-color:", ";color:", ";font-size:1rem;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;*,*:before,*:after{box-sizing:border-box;}a img{border:0;}"], props => props.theme.color.bg, props => props.theme.color.textDark);
 
 const useEcom = ecomSettings => {
   if (ecomSettings === null || ecomSettings === void 0 ? void 0 : ecomSettings.url) {
@@ -8854,7 +6873,7 @@ const WaykeComposite = ({
 const WaykeCompositeWithProvider = ({
   provider,
   composite
-}) => React__default.createElement(WaykeProvider, Object.assign({}, provider), React__default.createElement(WaykeComposite, Object.assign({}, composite)));
+}) => React__default.createElement(WaykeProvider, _objectSpread2({}, provider), React__default.createElement(WaykeComposite, _objectSpread2({}, composite)));
 
 const WaykeItemProvider = ({
   url,