@jetshop/template-trend 6.1.4 → 6.1.5

package/dist/src/components/Layout/Header/RecommendedChannel/ChannelBanner.js

@@ -0,0 +1,218 @@
+import ChannelContext from '@jetshop/core/components/ChannelContext';
+import t from '@jetshop/intl';
+import { Above } from '@jetshop/ui/Breakpoints';
+import LargeSelector from '@jetshop/ui/ChannelSelector/LargeSelector';
+import { FlyoutTarget, FlyoutTrigger } from '@jetshop/ui/Modal/Flyout';
+import { ReactComponent as Carrot } from '@jetshop/ui/svg/Carrot.svg';
+import React, { useContext, useState } from 'react';
+import { styled } from 'linaria/react';
+import Button from '../../../ui/Button';
+import CloseButton from '../../../ui/CloseButton';
+import MaxWidth from '../../MaxWidth';
+import Selector from './RecommendedChannelSelector';
+import { useChannelBanner } from '@jetshop/core/hooks/useChannelBanner';
+import { theme } from '../../../Theme';
+const ChannelBannerWrapper = styled('div') `
+  display: none;
+  &.openBanner {
+    display: block;
+  }
+  align-items: center;
+  justify-content: space-between;
+  min-height: 70px;
+  padding: 16px 0px;
+  background-color: ${theme.colors.tablegrey};
+
+  .close-button {
+    background: transparent;
+  }
+
+  ${theme.above.md} {
+    .close-button {
+      margin: 0;
+      padding-right: 0;
+    }
+  }
+
+  ${theme.below.md} {
+    position: relative;
+    padding: 22px 0px;
+
+    .close-button {
+      position: absolute;
+      top: 0;
+      right: 1em;
+    }
+  }
+`;
+const BannerContainer = styled(MaxWidth) `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`;
+const BannerContent = styled('div') `
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: flex-start;
+
+  .banner-text {
+    margin-right: 24px;
+    line-height: 1.5;
+  }
+
+  .light-text {
+    color: #a5a5a5;
+    margin: 0 20px;
+    white-space: nowrap;
+  }
+
+  .selector-wrapper {
+    position: relative;
+  }
+
+  svg.carrot-icon {
+    fill: #4f4f4f;
+    width: 9px;
+    margin-right: 0;
+  }
+
+  .carrot-icon[data-isopen='true'] {
+    transform: rotate(180deg);
+  }
+
+  .selector-flyout-wrapper {
+    position: absolute;
+  }
+
+  ${theme.below.md} {
+    flex-direction: column;
+
+    .banner-text {
+      width: 100%;
+      padding-right: 20%;
+      margin-right: 0;
+      margin-bottom: 16px;
+      text-align: left;
+    }
+
+    .light-text {
+      width: 100%;
+      margin: 13px auto;
+      text-align: center;
+      overflow: hidden;
+
+      &::before,
+      &::after {
+        background-color: #cccccc;
+        content: '';
+        display: inline-block;
+        height: 1px;
+        position: relative;
+        vertical-align: middle;
+        width: 50%;
+      }
+
+      &:before {
+        right: 1em;
+        margin-left: -50%;
+      }
+
+      &:after {
+        left: 1em;
+        margin-right: -50%;
+      }
+    }
+
+    .dropdown-selector {
+      height: calc(100vh - 229px);
+      overflow-y: scroll;
+    }
+
+    .selector-wrapper {
+      width: 100%;
+    }
+  }
+`;
+const ChannelButton = styled(Button) `
+  height: 46px;
+  width: 200px;
+  text-transform: none;
+  border-radius: 4px;
+  font-size: ${theme.fontSizes[1]};
+
+  ${theme.below.md} {
+    width: 100%;
+  }
+`;
+const SelectorButton = styled(Button) `
+  height: 46px;
+  width: 200px;
+  padding: 0 16px;
+  text-transform: capitalize;
+  background-color: #ffffff;
+  border: 1px solid #e1e1e1;
+  border-radius: 4px;
+  color: #4f4f4f;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  span {
+    font-size: ${theme.fontSizes[1]};
+  }
+
+  &:hover {
+    background-color: #ffffff;
+    color: #4f4f4f;
+  }
+
+  ${theme.below.md} {
+    width: 100%;
+  }
+`;
+const Flyout = ({ children }) => (React.createElement("div", { style: {
+        position: 'absolute',
+        backgroundColor: 'white',
+        zIndex: '999',
+        width: '200px'
+    } }, children));
+const ChannelBanner = () => {
+    const { channels, recommendedChannel, selectedChannel, updateChannel, selectedChannelGroup } = useContext(ChannelContext);
+    const { bannerIsOpen, hideTheBanner } = useChannelBanner();
+    const [dropdownSelector, setDropdownSelector] = useState(false);
+    const toggleDropdownSelector = () => {
+        dropdownSelector ? setDropdownSelector(false) : setDropdownSelector(true);
+    };
+    // Return early if openBanner is false or we have no recommended channel
+    if (!bannerIsOpen || !recommendedChannel)
+        return null;
+    return (React.createElement(ChannelBannerWrapper, { className: bannerIsOpen && 'openBanner' },
+        React.createElement(BannerContainer, null,
+            React.createElement(BannerContent, null,
+                React.createElement("div", { className: "banner-text" }, t('It looks like you are visiting us from {country}. Do you want to visit our {country} site?', {
+                    country: recommendedChannel.country.name
+                })),
+                React.createElement(ChannelButton, { onClick: () => {
+                        updateChannel(recommendedChannel);
+                        hideTheBanner();
+                    } }, t('Go to {country}', {
+                    country: recommendedChannel.country.name
+                })),
+                React.createElement("div", { className: "light-text" }, t('or')),
+                React.createElement(Above, { breakpoint: "md" }, matches => matches ? (React.createElement("div", { className: "selector-wrapper" },
+                    React.createElement(FlyoutTrigger, { id: "recommended-channel-selector" }, ({ showTarget, hideTarget, isOpen }) => (React.createElement(SelectorButton, { onClick: isOpen ? hideTarget : showTarget },
+                        React.createElement("span", null, t('Choose country')),
+                        React.createElement(Carrot, { className: "carrot-icon", "data-isopen": isOpen })))),
+                    React.createElement(FlyoutTarget, { id: "recommended-channel-selector" }, ({ isOpen, hideTarget }) => (React.createElement(Flyout, null,
+                        React.createElement(Selector, { channels: selectedChannelGroup || channels, selectedChannel: selectedChannel, updateChannel: updateChannel, hideTarget: hideTarget, type: LargeSelector })))))) : (React.createElement("div", { className: "selector-wrapper" },
+                    React.createElement(SelectorButton, { onClick: toggleDropdownSelector },
+                        React.createElement("span", null, t('Choose country')),
+                        React.createElement(Carrot, { className: "carrot-icon", "data-isopen": dropdownSelector })),
+                    dropdownSelector && (React.createElement("div", { className: "dropdown-selector" },
+                        React.createElement(Selector, { channels: channels, hideTarget: () => setDropdownSelector(false), selectedChannel: selectedChannel, updateChannel: updateChannel, type: LargeSelector }))))))),
+            React.createElement(CloseButton, { className: "close-button", onClick: hideTheBanner }))));
+};
+export default ChannelBanner;
+//# sourceMappingURL=ChannelBanner.js.map

package/dist/src/components/Layout/Header/RecommendedChannel/ChannelBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelBanner.js","sourceRoot":"","sources":["../../../../../../src/components/Layout/Header/RecommendedChannel/ChannelBanner.js"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,yCAAyC,CAAC;AACrE,OAAO,CAAC,MAAM,eAAe,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,aAAa,MAAM,2CAA2C,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAE,cAAc,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,MAAM,MAAM,oBAAoB,CAAC;AACxC,OAAO,WAAW,MAAM,yBAAyB,CAAC;AAClD,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AACtC,OAAO,QAAQ,MAAM,8BAA8B,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC,MAAM,oBAAoB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;;;;;;;;sBASpB,KAAK,CAAC,MAAM,CAAC,SAAS;;;;;;IAMxC,KAAK,CAAC,KAAK,CAAC,EAAE;;;;;;;IAOd,KAAK,CAAC,KAAK,CAAC,EAAE;;;;;;;;;;CAUjB,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAA;;;;;CAKvC,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmC/B,KAAK,CAAC,KAAK,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDjB,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;;;;eAKrB,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;;IAE7B,KAAK,CAAC,KAAK,CAAC,EAAE;;;CAGjB,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;;;;;;;;;;;;;iBAcpB,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;;;;;;;;IAQ/B,KAAK,CAAC,KAAK,CAAC,EAAE;;;CAGjB,CAAC;AAEF,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAC/B,6BACE,KAAK,EAAE;QACL,QAAQ,EAAE,UAAU;QACpB,eAAe,EAAE,OAAO;QACxB,MAAM,EAAE,KAAK;QACb,KAAK,EAAE,OAAO;KACf,IAEA,QAAQ,CACL,CACP,CAAC;AAEF,MAAM,aAAa,GAAG,GAAG,EAAE;IACzB,MAAM,EACJ,QAAQ,EACR,kBAAkB,EAClB,eAAe,EACf,aAAa,EACb,oBAAoB,EACrB,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAE/B,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAE3D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChE,MAAM,sBAAsB,GAAG,GAAG,EAAE;QAClC,gBAAgB,CAAC,CAAC,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAC5E,CAAC,CAAC;IAEF,wEAAwE;IACxE,IAAI,CAAC,YAAY,IAAI,CAAC,kBAAkB;QAAE,OAAO,IAAI,CAAC;IAEtD,OAAO,CACL,oBAAC,oBAAoB,IAAC,SAAS,EAAE,YAAY,IAAI,YAAY;QAC3D,oBAAC,eAAe;YACd,oBAAC,aAAa;gBACZ,6BAAK,SAAS,EAAC,aAAa,IACzB,CAAC,CACA,4FAA4F,EAC5F;oBACE,OAAO,EAAE,kBAAkB,CAAC,OAAO,CAAC,IAAI;iBACzC,CACF,CACG;gBACN,oBAAC,aAAa,IACZ,OAAO,EAAE,GAAG,EAAE;wBACZ,aAAa,CAAC,kBAAkB,CAAC,CAAC;wBAClC,aAAa,EAAE,CAAC;oBAClB,CAAC,IAEA,CAAC,CAAC,iBAAiB,EAAE;oBACpB,OAAO,EAAE,kBAAkB,CAAC,OAAO,CAAC,IAAI;iBACzC,CAAC,CACY;gBAChB,6BAAK,SAAS,EAAC,YAAY,IAAE,CAAC,CAAC,IAAI,CAAC,CAAO;gBAC3C,oBAAC,KAAK,IAAC,UAAU,EAAC,IAAI,IACnB,OAAO,CAAC,EAAE,CACT,OAAO,CAAC,CAAC,CAAC,CACR,6BAAK,SAAS,EAAC,kBAAkB;oBAC/B,oBAAC,aAAa,IAAC,EAAE,EAAC,8BAA8B,IAC7C,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CACvC,oBAAC,cAAc,IACb,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU;wBAEzC,kCAAO,CAAC,CAAC,gBAAgB,CAAC,CAAQ;wBAClC,oBAAC,MAAM,IAAC,SAAS,EAAC,aAAa,iBAAc,MAAM,GAAI,CACxC,CAClB,CACa;oBAChB,oBAAC,YAAY,IAAC,EAAE,EAAC,8BAA8B,IAC5C,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAC3B,oBAAC,MAAM;wBACL,oBAAC,QAAQ,IACP,QAAQ,EAAE,oBAAoB,IAAI,QAAQ,EAC1C,eAAe,EAAE,eAAe,EAChC,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,aAAa,GACnB,CACK,CACV,CACY,CACX,CACP,CAAC,CAAC,CAAC,CACF,6BAAK,SAAS,EAAC,kBAAkB;oBAC/B,oBAAC,cAAc,IAAC,OAAO,EAAE,sBAAsB;wBAC7C,kCAAO,CAAC,CAAC,gBAAgB,CAAC,CAAQ;wBAClC,oBAAC,MAAM,IACL,SAAS,EAAC,aAAa,iBACV,gBAAgB,GAC7B,CACa;oBAChB,gBAAgB,IAAI,CACnB,6BAAK,SAAS,EAAC,mBAAmB;wBAChC,oBAAC,QAAQ,IACP,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,KAAK,CAAC,EAC5C,eAAe,EAAE,eAAe,EAChC,aAAa,EAAE,aAAa,EAC5B,IAAI,EAAE,aAAa,GACnB,CACE,CACP,CACG,CACP,CAEG,CACM;YAEhB,oBAAC,WAAW,IAAC,SAAS,EAAC,cAAc,EAAC,OAAO,EAAE,aAAa,GAAI,CAChD,CACG,CACxB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/src/components/Layout/Header/RecommendedChannel/RecommendedChannelSelector.js

@@ -0,0 +1,123 @@
+import React, { useState } from 'react';
+import { styled } from 'linaria/react';
+import { cx } from 'linaria';
+import t from '@jetshop/intl';
+import ChannelSelector, { LangCurrWrapper, SelectorBody } from '@jetshop/ui/ChannelSelector/ChannelSelector';
+import { CancelButton, CommitButton } from '@jetshop/ui/ChannelSelector/ChannelSelectorButtons';
+import LargeSelector from '@jetshop/ui/ChannelSelector/LargeSelector';
+import CheckboxGroup from '@jetshop/ui/Checkbox/CheckboxGroup';
+import flattenCountries from '../ChannelSelector/flattenCountries';
+import { theme } from '../../../Theme';
+const Wrapper = styled('div') `
+  & > div:first-child {
+    border: 1px solid #e1e1e1;
+    background: #ffffff;
+  }
+`;
+const Country = styled('div') `
+  height: 42px;
+  font-size: 14px;
+  padding: 0 14px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  transition: 200ms;
+  color: #4f4f4f;
+  font-weight: 400;
+  opacity: 0.75;
+  background-color: transparent;
+
+  &.isActive {
+    background-color: #ebebeb;
+    color: #000;
+    font-weight: 600;
+    opacity: 1;
+  }
+  :hover {
+    opacity: 1;
+  }
+`;
+const CountryFlag = styled('img') `
+  height: 12px;
+  width: 16px;
+  margin-right: 15px;
+`;
+const StylesWrapper = styled('div') `
+  label {
+    display: inline-flex;
+  }
+
+  ${LangCurrWrapper} {
+    background: #f9f9f9;
+    margin-bottom: 0;
+  }
+`;
+const ChecboxGroupContainer = styled('div') `
+  & > div {
+    position: relative;
+    padding-left: 80px;
+    & > span {
+      position: absolute;
+      top: 0;
+      left: 0;
+      color: #000;
+      & ~ label {
+        margin-top: 0.6rem;
+        color: #000;
+      }
+      & + label {
+        margin-top: 0;
+      }
+    }
+  }
+  input ~ span {
+    border: 1px solid ${theme.colors.blue};
+    svg {
+      height: 8px;
+    }
+  }
+  label input:checked ~ span {
+    background-color: ${theme.colors.blue};
+  }
+`;
+const StyledChannelSelector = styled(ChannelSelector) `
+  border: 1px solid #e1e1e1;
+`;
+const StyledSelectorBody = styled(SelectorBody) `
+  padding: 0;
+`;
+const buttonCss = `
+  margin: 0;
+  width: 100%;
+`;
+const StyledCommitButton = styled(CommitButton) `
+  ${buttonCss}
+`;
+const StyledCancelButton = styled(CancelButton) `
+  ${buttonCss};
+  border: 1px solid #e1e1e1;
+`;
+const Selector = ({ channels, selectedChannel, updateChannel, hideTarget }) => {
+    const [countries] = useState(flattenCountries(channels));
+    return (React.createElement(StyledChannelSelector, { channels: channels, initialChannel: selectedChannel, render: ({ currencyItems, languageItems, selectedChannel, onSelect, hasChanged, onCurrencySelect, onLanguageSelect }) => (React.createElement(Wrapper, null,
+            React.createElement(LargeSelector, null,
+                React.createElement(StyledSelectorBody, null, countries.map(({ name, code, channel }) => (React.createElement(Country, { key: channel.id + name, className: cx(channel.id === selectedChannel.id &&
+                        name === selectedChannel.country.name &&
+                        'isActive'), onClick: () => onSelect(channel.id, null, null, code) },
+                    React.createElement(CountryFlag, { src: `https://countryflags.jetshop.io/${code}/flat/32.png`, alt: "Country Flag", width: "16", height: "12" }),
+                    name,
+                    " (",
+                    channel.name,
+                    ")")))),
+                React.createElement(StylesWrapper, null,
+                    React.createElement(LangCurrWrapper, null,
+                        React.createElement(ChecboxGroupContainer, null,
+                            React.createElement(CheckboxGroup, { selectedItem: selectedChannel.language.name, items: languageItems, handleChange: onLanguageSelect, groupLabel: t('Language') }),
+                            React.createElement(CheckboxGroup, { selectedItem: selectedChannel.currency.name, items: currencyItems, handleChange: onCurrencySelect, groupLabel: t('Currency') })))),
+                hasChanged ? (React.createElement(StyledCommitButton, { onClick: () => {
+                        updateChannel(selectedChannel);
+                        hideTarget();
+                    }, text: t('Update') })) : (React.createElement(StyledCancelButton, { text: t('Close'), onClick: () => hideTarget() }))))) }));
+};
+export default Selector;
+//# sourceMappingURL=RecommendedChannelSelector.js.map

package/dist/src/components/Layout/Header/RecommendedChannel/RecommendedChannelSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecommendedChannelSelector.js","sourceRoot":"","sources":["../../../../../../src/components/Layout/Header/RecommendedChannel/RecommendedChannelSelector.js"],"names":[],"mappings":"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"}

package/dist/src/components/Layout/Header/SearchBar.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { css } from 'linaria';
+import { styled } from 'linaria/react';
+import { SearchField } from '@jetshop/ui/Search';
+import AutocompleteQuery from './AutocompleteQuery.gql';
+import { theme } from '../../Theme';
+const PosedSearchBarContainer = styled('div') `
+  position: relative;
+  width: 100%;
+  svg {
+    position: absolute;
+    right: 8px;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    use {
+      fill: #878787;
+    }
+  }
+`;
+const InnerSearchBar = styled('div') `
+  position: relative;
+  margin: 0 auto;
+  width: 100%;
+`;
+const searchFieldStyles = css `
+  &[data-flight-searchfield] > * {
+    display: flex;
+    height: 2rem;
+    width: 100% !important;
+    justify-content: center;
+    input {
+      font-size: 16px;
+      border: 0;
+      background: #f3f3f3;
+      height: 100%;
+      width: 100%;
+      padding: 0 1rem;
+    }
+  }
+  [data-flight-searchfield-cancel] {
+    height: 100%;
+    min-width: 48px;
+    width: fit-content;
+  }
+  [data-flight-searchfield-flyout] {
+    text-align: left;
+    top: calc(100% + ((54px - 100%) / 2));
+    ${theme.below.md} {
+      top: calc(100% + ((64px - 100%) / 2));
+      width: calc(100% + 4rem + 16px);
+      left: -8px;
+      border-left: none;
+      border-right: none;
+    }
+    > * {
+      padding: 0.5rem;
+    }
+    h2 {
+      color: #999999;
+      text-transform: uppercase;
+      font-size: 0.75rem;
+      padding: 0.5rem;
+    }
+    li {
+      border-top: 1px solid #e8e8e8;
+    }
+    a {
+      color: black;
+      padding: 0.5rem;
+      display: block;
+    }
+  }
+`;
+const SearchBar = ({ searchOpen, setSearchOpen }) => searchOpen && (React.createElement(PosedSearchBarContainer, { key: 'searchBarPosed' },
+    React.createElement(InnerSearchBar, null,
+        React.createElement(SearchField, { autocompleteQuery: AutocompleteQuery, onCancel: () => setSearchOpen(false), className: searchFieldStyles }))));
+export { SearchBar };
+//# sourceMappingURL=SearchBar.js.map

package/dist/src/components/Layout/Header/SearchBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../../../src/components/Layout/Header/SearchBar.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,MAAM,SAAS,CAAC;AAC9B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,iBAAiB,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,MAAM,uBAAuB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;;;;;;;;;;;;CAa5C,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;;;CAInC,CAAC;AAEF,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;MAuBvB,KAAK,CAAC,KAAK,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;CAyBnB,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,EAAE,UAAU,EAAE,aAAa,EAAE,EAAE,EAAE,CAClD,UAAU,IAAI,CACZ,oBAAC,uBAAuB,IAAC,GAAG,EAAE,gBAAgB;IAC5C,oBAAC,cAAc;QACb,oBAAC,WAAW,IACV,iBAAiB,EAAE,iBAAiB,EACpC,QAAQ,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EACpC,SAAS,EAAE,iBAAiB,GAC5B,CACa,CACO,CAC3B,CAAC;AAEJ,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/src/components/Layout/Header/SearchButton.js

@@ -0,0 +1,50 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import t from '@jetshop/intl';
+import { styled } from 'linaria/react';
+import { ReactComponent as Search } from '../../../svg/Search.svg';
+import { theme } from '../../Theme';
+const Button = styled('button') `
+  background: transparent;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  color: inherit;
+  :hover {
+    color: ${theme.colors.black};
+    svg {
+      use {
+        fill: ${theme.colors.black};
+      }
+    }
+  }
+  svg {
+    margin: 4px;
+    margin-bottom: 0;
+    height: 18px;
+    width: 18px;
+    use {
+      fill: #878787;
+    }
+  }
+`;
+function SearchButton(props) {
+    const { setSearchOpen, searchIsOpen } = props, rest = __rest(props, ["setSearchOpen", "searchIsOpen"]);
+    return (React.createElement(Button, Object.assign({ onClick: () => setSearchOpen(true) }, rest),
+        React.createElement(Search, null),
+        React.createElement("span", null,
+            " ",
+            t('Search'))));
+}
+export default SearchButton;
+//# sourceMappingURL=SearchButton.js.map

package/dist/src/components/Layout/Header/SearchButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchButton.js","sourceRoot":"","sources":["../../../../../src/components/Layout/Header/SearchButton.js"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,CAAC,MAAM,eAAe,CAAC;AAC9B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,cAAc,IAAI,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,MAAM,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAA;;;;;;;aAOlB,KAAK,CAAC,MAAM,CAAC,KAAK;;;gBAGf,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;;;;;;;;;CAajC,CAAC;AAEF,SAAS,YAAY,CAAC,KAAK;IACzB,MAAM,EAAE,aAAa,EAAE,YAAY,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAhD,iCAAwC,CAAQ,CAAC;IACvD,OAAO,CACL,oBAAC,MAAM,kBAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,IAAM,IAAI;QAClD,oBAAC,MAAM,OAAG;QACV;;YAAQ,CAAC,CAAC,QAAQ,CAAC,CAAQ,CACpB,CACV,CAAC;AACJ,CAAC;AAED,eAAe,YAAY,CAAC"}

package/dist/src/components/Layout/Header/SubCategoryNav.js

@@ -0,0 +1,71 @@
+import React, { Component } from 'react';
+import CategoryLink from '@jetshop/ui/CategoryLink';
+import { styled } from 'linaria/react';
+import { theme } from '../../Theme';
+const SubCategoryContainer = styled('div') `
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  flex-wrap: wrap;
+  border-bottom: 1px solid #e8e8e8;
+  padding: ${theme.space[1]};
+  ${theme.below.sm} {
+    flex-direction: column;
+    border: none;
+    padding: none;
+  }
+`;
+const SubCategoryLink = styled(CategoryLink) ``;
+const SubCategoryHeader = styled('h3') `
+  font-size: 14px;
+  font-weight: 600;
+`;
+const SubCategory = styled('h4') `
+  font-size: 14px;
+  font-weight: normal;
+  color: #5c5c5c;
+  width: 33%;
+  margin: 0px;
+  margin-bottom: 10px;
+`;
+const Categories = styled('div') `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  margin: 10px;
+`;
+const SubCategories = styled('div') `
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+`;
+export default class SubCategoryNav extends Component {
+    constructor() {
+        super(...arguments);
+        this.renderSubCategories = categoryHeader => {
+            const { categories } = this.props;
+            const subCategories = categories.filter(category => category.parentId === categoryHeader.id);
+            return (React.createElement(SubCategories, null, subCategories.map(subCategory => {
+                return (React.createElement(SubCategoryLink, { key: subCategory.url, category: subCategory },
+                    React.createElement(SubCategory, null, subCategory.name)));
+            })));
+        };
+    }
+    render() {
+        const { categories, activeCategory } = this.props;
+        const categoryHeaders = categories.filter(category => category.parentId === activeCategory.id);
+        if (categoryHeaders.length > 1) {
+            return (React.createElement(SubCategoryContainer, null, categoryHeaders.map(categoryHeader => {
+                return (React.createElement(Categories, { key: categoryHeader.id },
+                    React.createElement(SubCategoryLink, { category: categoryHeader },
+                        React.createElement(SubCategoryHeader, null, categoryHeader.name)),
+                    this.renderSubCategories(categoryHeader)));
+            })));
+        }
+        else
+            return null;
+    }
+}
+//# sourceMappingURL=SubCategoryNav.js.map

package/dist/src/components/Layout/Header/SubCategoryNav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubCategoryNav.js","sourceRoot":"","sources":["../../../../../src/components/Layout/Header/SubCategoryNav.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,YAAY,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,MAAM,oBAAoB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;;;;;aAM7B,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IACvB,KAAK,CAAC,KAAK,CAAC,EAAE;;;;;CAKjB,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,YAAY,CAAC,CAAA,EAAE,CAAC;AAE/C,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;CAGrC,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;;CAO/B,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;;;;;CAM/B,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;;;;CAKlC,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,SAAS;IAArD;;QACE,wBAAmB,GAAG,cAAc,CAAC,EAAE;YACrC,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YAClC,MAAM,aAAa,GAAG,UAAU,CAAC,MAAM,CACrC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,QAAQ,KAAK,cAAc,CAAC,EAAE,CACpD,CAAC;YACF,OAAO,CACL,oBAAC,aAAa,QACX,aAAa,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;gBAC/B,OAAO,CACL,oBAAC,eAAe,IAAC,GAAG,EAAE,WAAW,CAAC,GAAG,EAAE,QAAQ,EAAE,WAAW;oBAC1D,oBAAC,WAAW,QAAE,WAAW,CAAC,IAAI,CAAe,CAC7B,CACnB,CAAC;YACJ,CAAC,CAAC,CACY,CACjB,CAAC;QACJ,CAAC,CAAC;IAyBJ,CAAC;IAvBC,MAAM;QACJ,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAClD,MAAM,eAAe,GAAG,UAAU,CAAC,MAAM,CACvC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,QAAQ,KAAK,cAAc,CAAC,EAAE,CACpD,CAAC;QAEF,IAAI,eAAe,CAAC,MAAM,GAAG,CAAC,EAAE;YAC9B,OAAO,CACL,oBAAC,oBAAoB,QAClB,eAAe,CAAC,GAAG,CAAC,cAAc,CAAC,EAAE;gBACpC,OAAO,CACL,oBAAC,UAAU,IAAC,GAAG,EAAE,cAAc,CAAC,EAAE;oBAChC,oBAAC,eAAe,IAAC,QAAQ,EAAE,cAAc;wBACvC,oBAAC,iBAAiB,QAAE,cAAc,CAAC,IAAI,CAAqB,CAC5C;oBACjB,IAAI,CAAC,mBAAmB,CAAC,cAAc,CAAC,CAC9B,CACd,CAAC;YACJ,CAAC,CAAC,CACmB,CACxB,CAAC;SACH;;YAAM,OAAO,IAAI,CAAC;IACrB,CAAC;CACF"}

package/dist/src/components/Layout/Header/TopNav.js

@@ -0,0 +1,63 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { styled } from 'linaria/react';
+import { cx } from 'linaria';
+import { theme } from '../../Theme';
+const List = styled('ul') `
+  margin-left: 8px;
+  margin-right: 0px;
+  justify-content: flex-end;
+  li.top-nav-list-item:last-of-type {
+    padding-left: 8px;
+    padding-right: 0px;
+  }
+
+  &.left {
+    margin-right: 8px;
+    margin-left: 0px;
+    li.top-nav-list-item:first-of-type {
+      padding-left: 0px;
+      padding-right: 8px;
+    }
+  }
+
+  margin-top: 0px;
+  margin-bottom: 0px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  z-index: 999;
+  li.top-nav-list-item {
+    list-style: none;
+    color: ${theme.colors.grey};
+    display: block;
+    padding: 0 8px;
+    white-space: nowrap;
+  }
+  button {
+    background: none;
+    color: #666;
+  }
+
+  ${theme.below.md} {
+    width: '50%';
+    &.searchOpen {
+      width: 'auto';
+    }
+  }
+`;
+export default function TopNav(_a) {
+    var { children, searchOpen, left } = _a, rest = __rest(_a, ["children", "searchOpen", "left"]);
+    return (React.createElement(List, Object.assign({ className: cx(left ? 'left' : null, searchOpen && 'searchOpen') }, rest), React.Children.map(children, item => item && React.createElement("li", { className: "top-nav-list-item" }, item))));
+}
+//# sourceMappingURL=TopNav.js.map

package/dist/src/components/Layout/Header/TopNav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopNav.js","sourceRoot":"","sources":["../../../../../src/components/Layout/Header/TopNav.js"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;aA0BZ,KAAK,CAAC,MAAM,CAAC,IAAI;;;;;;;;;;IAU1B,KAAK,CAAC,KAAK,CAAC,EAAE;;;;;;CAMjB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAuC;QAAvC,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,OAAW,EAAN,IAAI,cAArC,kCAAuC,CAAF;IAClE,OAAO,CACL,oBAAC,IAAI,kBACH,SAAS,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,UAAU,IAAI,YAAY,CAAC,IAC3D,IAAI,GAEP,KAAK,CAAC,QAAQ,CAAC,GAAG,CACjB,QAAQ,EACR,IAAI,CAAC,EAAE,CAAC,IAAI,IAAI,4BAAI,SAAS,EAAC,mBAAmB,IAAE,IAAI,CAAM,CAC9D,CACI,CACR,CAAC;AACJ,CAAC"}

package/dist/src/components/Layout/MaxWidth.js

@@ -0,0 +1,19 @@
+import { styled } from 'linaria/react';
+import { theme } from '../Theme';
+const MaxWidth = styled('div') `
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+  align-items: stretch;
+  margin: 0 auto;
+  padding: 0 0.75rem;
+  position: relative;
+  flex: 1 1 auto;
+  width: 100%;
+  max-width: 80rem;
+  ${theme.above.sm} {
+    padding: 0 2rem;
+  }
+`;
+export default MaxWidth;
+//# sourceMappingURL=MaxWidth.js.map

package/dist/src/components/Layout/MaxWidth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaxWidth.js","sourceRoot":"","sources":["../../../../src/components/Layout/MaxWidth.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;;;;;;;;;;IAW1B,KAAK,CAAC,KAAK,CAAC,EAAE;;;CAGjB,CAAC;AAEF,eAAe,QAAQ,CAAC"}